Setelah jalan-jalan di internet mencari tutorial membuat recent post di internet, saya menemukan recent post dengan menggunakan thumbnail yang sungguh menarik. Tapi saya cari dan terus cari semuanya menggunakan file JS atau Java Script dari luar, sehingga ini sangat berpengaruh pada loading blog kita, yah jadi lambat bro!! Seperti biasa tutorial di blog ini sangat jarang yang memiliki JS dari luar, g percaya? baca aja sendiri satu2!!
Jadi saya mencari-cari tutorial yang tidak terdapat file JS dari luar. Dan ternyata dapat
disini, kemudian saya edit sedemikian rupa sehingga terciptalah recent post sesuai keinginan saya. Yah sekedar berbagi, silahkan gunakan tutorial dibawah ini untuk mendapatkan recent post yang serasa milik pribadi. contoh hasil silahkan lihat milik saya!! kalo tertarik baca terus sampai habis oke..!!
- Masuk ke Blogger Dashboard > Layout > Edit HTML.
- Copy paste kode dibawah sebelum kode ]]></b:skin>
.sidebar
.widget-content {overflow: hidden;
word-wrap: break-word;
}
Selanjutnya masukkan file java sript kedalam template blog anda caranya:
- Masuk Blogger Dashboard > Layout > Edit HTML;
- Temukan kode </head> kemudian paste kode di bawah ini sebelum kode tersebut:
<script type='text/javascript'>
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){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);}}strx=s.join("");}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...';}function showrecentposts(json){document.write('<table width="'+boxwidth+'" border=0 bordercolor="#FF0000" align="left" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'">');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')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';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)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td style="font-size:'+fntsize+'px;">'+icon+'<a href="'+posturl+'">'+posttitle+'</a> </span></td></tr>';if(summaryPost==0){trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td>'+icon+'<a href="'+posturl+'">'+posttitle+'</a></td></tr>';}document.write(trtd);j++;}document.write('</table>');}
</script>
Belum selesai sob!!
Sekarang giliran menambahkan widget HTML bro!! Caranya:
- Masuk Blogger Dashboard > Layout > Page Elements;
- Klik Tambah Gadget> pilih HTML/JavaScript;
- Sekarang.copy paste sript dibawah:
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = "100%";
cellspacing = "8";
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = "48";
thumbheight = "48";
fntsize = "13";
acolor = "#000099";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
max-results=10;
</script>
<script src="http://nurad1k.blogspot.com/feeds/posts/default?max-results=10&orderby=published&alt=json-in-script&callback=showrecentposts" type="text/javascript"></script>
Ganti
nurad1kdengan nama blog anda!!
kode
max-results=10 adalh untuk mengatur jumlah posting yang tampil, maka ubah
max-results=10 ke angka yang anda inginkan! Misal
max-results=5 maka yang tampil adalah 5 posting.
Simpan Widget dan lihatlah hasilnya!!
Semoga Sukses!!
Jika ingin menambahkan fungsi scroll sehingga menghemat tempat maka bagi yang belum tahu silahkan ke Membatasi Text, Gambar, Widget , dll dengan Overflow
NurAd1K
nurad1k.blogspot.com
