Cara Membuat Widget Recent Posts By Tag Untuk Blogger
Cara Membuat Widget Recent Posts By Tag Untuk Blogger - Kali ini hostze akan membahas Bagaimana cara membuat widget yang dipilih berdasarkan label tertentu pada blogger Jadi dengan adanya widget ini akan lebih memudahkan pengunjung dalam mencari artikel anda sesuai label postingan, ok bagaimanakah caranya langsung saja di simak.
2. Silakan Copy dan simpan kode ini diatas kode
3. Lalu simpan kode ini pada widget blogger HTML/JavaScript.
Catatan :
Langkah - Langkah Memasang Widget Recent Posts By Tag Untuk Blogger :
1. Pertama simpan dahulu CSS ini diatas kode
]]></b:skin> atau </style>
/*Recent Post By tag*/
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:16px;margin:10px 0 0}
2. Silakan Copy dan simpan kode ini diatas kode
</head>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger by Hostze
// https://plus.google.com/u/0/111530662257448244435/ - http://www.hostze.net/
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/AVvXsEiVIwhTx4zb6DV-IBUfgVk_L11KFxf7bX62WC43wPyUAppApXTMaJE8RsS1OdWSMpD73UKkGhQNvoS3jiKID8vhaGloKns-pCXoY2lPfLehG_JaKGNZgCKOuqPffWzU63_n4K2Td7RTtdg7/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>
3. Lalu simpan kode ini pada widget blogger HTML/JavaScript.
<script>
document.write("<script src=\"/feeds/posts/default/-/Blog%20Seo?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>
Catatan :
- var numPosts : Isi dengan jumlah artikel yang anda inginkan.
- var showpostthumbnails : Pilih true jikn ingin menamapilkn gambar dan false untuk menghilangkannya.
- var showpostdate : Pilih true jika ingin menamapilkn tanggal dan false untuk menghilangkannya.
- Blog%20Seo : Silakan Ubah dengan label yang di inginkan, bila lebih dari dua kata gunakan %20 sebagai pengganti spasi.
