Cara membuat Widget Recent Post By tag di Blog

Cara membuat Widget Recent Post By tag di Blog

Jalak Ikal 26 September 2 komentar
Widget Recent Post adalah widget yang menampilkan artikel yang terakhir kita postingan di blog dan cara ini memudahkan para pengunjung yang sedang berada di halaman blog anda mengetahui artikel yang baru anda posting di blog anda,namun kelebihan dari widget Recent post ini menampilkan bukan artikel yang baru anda posting di blog,melain kan artikel yang tampil yang sesuai dengan judul tag di blog anda,jadi widget recent post ini tampil sesuai dengan judul tag yang anda pasang di blog.

Recent Post By tag ini sangat di sukai banyak blogger selain tampilan nya yang simple dan juga keren cara pemasangan nya pun tidak lah ribet dan gampang di pahami,jadi jika anda tertarik dengan Recent Post by Tag ini bisa anda pasang di blog anda sendiri dengan mengikuti langkah langkah di bawah ini.
  • Tentu nya anda harus login ke blogger anda
  • Kemudian pilih template di bagian kiri kemudian klik Edit Html
  • Setelah itu letakan kode berikut tepat di atas kode </b:skin> untuk mencari kode tersebut silahkan anda tekan Ctrl+F secara bersamaan
/*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}
Setelah itu silahkan anda cari kembali kode </head> dan kemudian silahkan anda letakan kode berikut sebelum kode tersebut
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger by Kang Ubed
// http://infotrens.com
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="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/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>
  • Setelah itu silahkan anda Save template
Setelah anda melakukanlangkah di atas,langkah selanjut nya silahkan anda masuk ke LayOut dan pilih "Add a Gadget" kemudian pilih lagi Html dan letakan kode berikut
<script>
document.write("<script src=\"/feeds/posts/default/-/Blogger?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>
  • Kemudian silahkan anda klik Save dan lihatlah hasil nya
 Untuk yang berwarna merah silahkan anda ganti dengan tag yang berada di blog anda
Selamat mencoba dan semoga bermanfaat ya trik nya

loading...
Ratings: 
Posted by Jalak Ikal, Published at 26 September and have 2 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

2 komentar

Simple banget Caranya Mudah dimengerti salam blogger, izin praktek

Balas

@Kang Silahkan..salam Blogger...selamat mencoba

Balas

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi