Bila teman-teman blogger tertarik dengan recent posts hanya dengan 1 thumbnail atau foto artikel, dapat mengikuti cara membuat widgetnya di Cara Membuat Recent Posts Unik Dengan 1 Thumbnail. Kali ini saya dan blog Dinamika ingin berbagi tentang cara membuat recent posts bergambar dengan fungsi scroll.
Bagi para blogger designer tentunya sudah paham apa itu fungsi scroll. Berbeda dalam bahasa dan kalimat matematika, kata fungsi merupakan sebuah persamaan. Tapi kalau dalam bahasa blog, fungsi bisa diartikan dengan efek. Jadi fungsi atau efek scroll secara umum bisa diartikan dengan efek yang membuat sebuah widget dapat turun naik isi atau kontennya mengikuti arah cursor mouse. Biasanya scroll dibuat untuk media atau widget atau bisa halaman yang terlalu panjang atau terlalu lebar, jadi untuk menghemat halaman tadi agar widget lain bisa didayagunakan atau ditampilkan maka dibuatlah efek scroll. Manfaat dari recent posts bergambar dengan efek scroll ini cukup besar, karena selain bisa menghemat halaman, juga bisa menampilkan identitas artikel yang diwakili oleh gambar. Selain itu tentu juga berimbas pada keindahan blog itu sendiri.
Cara membuat recent posts dengan scroll dimaksudkan untuk menampilkan seluruh artikel terbaru dari blog kita. Artikel terbaru tersebut bisa berdasarkan label atau kategori, bisa juga secara keseluruhan.
1. Sign in terlebih dahulu ke dalam blog, lalu masuk ke halaman lay out atau Tata Letak
2. Pada halaman Tata Letak, klik Add Gadget dan cari HTML/Javascript
3. Copy kode berikut dan paste di halaman HTML/JavaScript tadi :
<div align="left">
<table border="1" width="250"> <tbody><tr style="color: rgb(255, 255, 0);"> <th colspan="100%" scope="col" bgcolor="rgb(0,0,0)">POSTING TERBARU</th> </tr><tr><td><div style="font-family: arial; font-size: 11px; overflow: scroll; background: rgb(0,0,0); border-color: rgb(0,0,0); width: 250px; height: 250px;"><div style="text-align:left; width:100%; padding: 0 px; overflow: hidden; color: rgb(0,0,0); background: rgb(0,0,0);">
<ul>
<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
tablewidth = 220;
cellspacing = 1;
borderColor = "#fff";
bgTD = "";
imgwidth = 50;
imgheight = 50;
fntsize = 9;
acolor = "#006AAB";
aBold = true;
icon = " ";
text = "";
fsize= "9";
showPostDate = true;
summaryPost = 120;
summaryFontsize = 9;
summaryColor = "#666";
icon2 = " ";
numposts = 15;
home_page ="http://mediainfomitra.blogspot.com/";
</script>
<script language="JavaScript">
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
document.write('<table width="'+tablewidth+'" border=0 bordercolor="#FF0000" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'" align="center">');
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
cmtext = (text != 'no') ? '<span style="color:'+acolor+'; font-size:'+fsize+'px;">'+pcm+' '+text+'</span>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = (showPostDate) ? '<span style="color:'+acolor+'; font-size:'+fsize+'px;"> - ('+day+ ' ' + m + ' ' + y + ')</span>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
var trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> '+cmtext+ '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuU81iiZP0gXqwqh6hLWbEiSozkGYfwsO5rpKhu6foBuCzl5SKy-f7wUggmaUcvQCN_lcDSnzU_oOofwpQtq0-2pcLNF_8lBp0wHmi1OHYThFRy1ai2ADfAZZ6JCSIHO2r0-dSMFGURvgX/s1600/c_bubble.png"/> ' + daystr + '<div style="color:'+summaryColor+'; margin-top:2px; border-top:1px '+borderColor+' solid; font-size:'+summaryFontsize+'px;text-align:justify;">'+icon2+removeHtmlTag(postcontent,summaryPost)+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;"></div></td></tr>';
if(summaryPost == 0) { trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> '+cmtext+ ' ' + daystr + '</td></tr>'; }
document.write(trtd);
j++;
}
document.write('</table>');
}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>
</ul>
</div></div><span style="font-weight: bold; background:color: rgb(0,0,0)">Media Info</span></td></tr></tbody></table></div>
Perhatikan tulisan berwarna :
- Merah adalah lebar widget
- Hijau adalah ukuran lebar dan tinggi gambar
- Ungu adalah ukuran besar kecilnya font tulisan
- Kuning adalah jumlah karakter untuk deskripsi artikel yang akan tampil pada widget
- Biru Muda adalah homepage (halaman awal atau beranda ) blog sobat, silahkan ganti dengan alamat blog sobat
Silahkan modifikasi ukuran dan warna widget sesuai dengan ukuran sidebar blog teman-teman.
Demikian artikel seputar blog kali ini yang mengupas tentang cara membuat recent post bergambar dengan scroll.
0 komentar :
Post a Comment