Cara termudah memasang widget recent post dengan thumbnail

blogger recent post dengan thumbnail
Kali ini kita akan membuat widget recent post yang berfungsi untuk menampilkan postingan terakhir anda beserta thumbnail atau gambar pada postingan anda tersebut. Widget ini sangat cocok digunakan untuk mempermudah para pengunjung anda melihat apa yang baru saja anda postingkan tanpa harus masuk ke halaman beraanda anda.

Untuk membuat  atau memasang gadget ini ke dalam blog anda sangatlah mudah, anda hanya perlu meng-CoPas (Copy Paste) ke dalam widget bertipe HTML/Javascript. Settingan defaultnya sudah cukup berfungsi  dengan baik sehingga anda tidak perlu mengubah konfigurasi kode apapun, sehingga lebih mudah dan aman tentunya.

Untuk membuat atau memasang widget Recent Post dengan gambar thumbnail ini, ikuti langkah-langkah berikut:


  • Masuk ke Blogger Dashboard anda dan pilih Blog yang anda inginkan 
  • Pilih Tata Letak 
  • Di dalam Tata Letak, klik Tambahkan gadget (lokasinya terserah anda, bisa anda tempatkan pada bagian sidebar ataupun pada bagian footer) 
  • Dari pilihan gadget yang ada, pilih HTML/Javascript dan masukkan kode berikut: 


<div id="ndb-recentpost">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://lh4.googleusercontent.com/-UBwM7zJ94aQ/UZSMUUuyRDI/AAAAAAAABs4/BieZ1hDwx6w/s400/noimage.png";
imgr[1] = "https://lh4.googleusercontent.com/-UBwM7zJ94aQ/UZSMUUuyRDI/AAAAAAAABs4/BieZ1hDwx6w/s400/noimage.png";
imgr[2] = "https://lh4.googleusercontent.com/-UBwM7zJ94aQ/UZSMUUuyRDI/AAAAAAAABs4/BieZ1hDwx6w/s400/noimage.png";
imgr[3] = "https://lh4.googleusercontent.com/-UBwM7zJ94aQ/UZSMUUuyRDI/AAAAAAAABs4/BieZ1hDwx6w/s400/noimage.png";
imgr[4] = "https://lh4.googleusercontent.com/-UBwM7zJ94aQ/UZSMUUuyRDI/AAAAAAAABs4/BieZ1hDwx6w/s400/noimage.png";
showRandomImg = true;
tablewidth = '100%';
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";
imgwidth = 80;
imgheight = 80;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = 'http://' + fnGetDomain(window.location.href) + '/';
function fnGetDomain(url) {
   return url.match(/:\/\/(.[^/]+)/)[1];
}
</script>

<script type='text/javascript'>
function removeHtmlTag(l,h){for(var e=l.split("<"),g=0;g<e.length;g++)-1!=e[g].indexOf(">")&&(e[g]=e[g].substring(e[g].indexOf(">")+1,e[g].length));e=e.join("");return e=e.substring(0,h-1)}
function showrecentposts(l){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=[];for(var h=0;h<numposts;h++){var e=l.feed.entry[h],g=e.title.$t,p,k;if(h==l.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){k=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==
e.link[f].type){p=e.link[f].title.split(" ")[0];break}f="content"in e?e.content.$t:"summary"in e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[h]=imgr[j];s=f;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);-1!=a&&(-1!=b&&-1!=c&&""!=d)&&(img[h]=d);cmtext="no"!=text?'<i><font color="'+acolor+'">('+p+" "+text+")</font></i>":"";for(var e=[1,2,3,4,5,6,7,8,9,10,11,12],q="Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec".split(" "),r=postdate.split("-")[2].substring(0,
2),n=postdate.split("-")[1],t=postdate.split("-")[0],m=0;m<e.length;m++)if(parseInt(n)==e[m]){n=q[m];break}e=showPostDate?'<i><font color="'+acolor+'"> - ('+r+" "+n+" "+t+")</font></i>":"";g=aBold?"<b>"+g+"</b>":g;f='<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+k+'"><img src="'+img[h]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+k+'" style="color:'+acolor+"; font-size:"+
fntsize+'px;">'+g+"</a><br /> "+cmtext+" "+e+'<div style="color:'+summaryColor+"; margin-top:2px; border-top:1px "+borderColor+" solid; font-size:"+summaryFontsize+'px;">'+icon2+removeHtmlTag(f,summaryPost)+"...</div></td></tr>";0==summaryPost&&(f='<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+k+'"><img src="'+img[h]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+k+'" style="color:'+
acolor+"; font-size:"+fntsize+'px;">'+g+"</a><br /> "+cmtext+" "+e+"</td></tr>");document.write(f);j++}document.write("</table>");document.write('<a href="http://jasa-pembuatanweb.blogspot.com" style="font-size: 8px; text-decoration:none; color: #cccccc;">Blogspot Tutorial</a>')}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts">\x3c/script>');
</script>
</div>


Simpan dan lihatlah hasilnya!
Sekarang pengunjung anda dapat melihat postingan terakhir anda tanpa harus masuk ke halaman beranda anda.

Comments
0 Comments

Tidak ada komentar:

Posting Komentar