Cara Membuat Releated Post Dengan Thumbnail di Sidebar

Anonim    Januari 16, 2017    Blogger , Tutorial-Blog   

Update malem sobat Blognyaadist! kali ini saya akan update Cara Membuat Releated Post Dengan Thumbnail di Sidebar.

Seperti yang ada di sidebar Blognyaadist.Id ini Contohnya, langsung saja kita simak caranya. 

Cara pasang:

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Isi Judul dengan Posting Terbaru
3. Copas kode berikut ini ke kolom Content:

<style>
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:12px;margin:10px 0 0}
</style>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;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!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl6_mvA_FAw5FhwR_gmP-8eJMoLDep359GdYcIk2JavpfH2FDTP61aJC9s9Pxas7ACSihoEaAn35AiPfSnJY46it5rsAC_PfPq5SG7_e4tD_LWahIYAbP2nMIu8iecxXAyATqiX9UU4aO_/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>
<script>
document.write("<script src=\"http://www.blognyaadist.id//feeds/posts/default?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Jika ingin menampilkan posting terbaru dari label atau kategori tertentu, maka kode terakhir yang digunakan yang ini:

<script>
document.write("<script src=\"http://www.blognyaadist.id//feeds/posts/default/-/Label?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Catatan: 

• Ubah alamat blog yang warna merah dengan alamat blog Anda dan Label yang akan ditampilkan.
• Ubah angka 5 pada var numposts = 5; untuk merubah jumlah yang akan ditampilkan.

4. Save!

Sekian sobat yang dapat saya sampaikan malam ini, bila ada kurang lebihnya silahkan kalian corat coret sendiri di komentar. Okeh sekian~

Jangan lupa share keteman kalian yaa.