Cara membuat widget recent post berdasarkan label di blogger – Ketika membangun sebuah blog, kenyamanan pengunjung adalah yang menjadi prioritas utama. Pengunjung harus mudah dalam menjelajahi blog kita dan membaca artikel-artikel kita. Oleh karena itu, blogger memberikan fitur widget. Widget ini harus kita manfaatkan dengan baik. Tidak semua widget yang disediakan blogger harus dipasang didalam blog kita. Yang kita pasang didalam blog hanya widget-widget tertentu yang benar-benar memberikan kemudahan bagi pengunjung untuk menjelajahi blog kita. Widget-widget yang wajib dipasang menurut blogger koplo adalah widget label, widget postingan populer, dan widget postingan terbaru berdasarkan label.
Dari ketiga itu yang paling membantu adalah widget postingan terbaru berdasarkan label. Karena kita memberi kemudahan pengunjung dalam mengunjungi postingan terbaru per label. Ini juga akan mempengaruhi lamanya pengunjung mengunjungi blog anda. Saya contohkan begini, anda sedang membaca artikel disebuah blog, setelah selesai membaca artikel tersebut, dan melihat widget postingan terbaru berdasarkan label. Otomatis anda akan tertarik untuk membaca postingan tersebut. Jadi anda akan lebih lama mengunjungi blog tersebut.
Cara membuat widget recent post berdasarkan label di blogger
Mengingat dampak penggunaan postingan terbaru berdasarkan label sangat besar pada sebuah blog, maka anda saya anjurkan untuk memasangnya. Cara memasangnya juga sangat mudah kok. Bahkan untuk pemula sekalipun. Tapi jika anda belum terlalu paham bagaimana caranya, saya akan menjelaskannya. Simak cara membuat widget recent post berdasarkan label di blog dibawah ini :
1. Yang pertama silahkan anda masuk ke dashboard blogger anda. Kemudian masuk ke menu Template > Edit HTML. Setelah itu, Cari kode </style> atau ]]></b:skin>. Setelah ketemu, letakkan kode ini tepat diatas kode </style> atau ]]></b:skin>
/* Recent By Label */.recent-by-tag img {float:left;width:60px;height:60px;margin-right:10px;margin-bottom:17px}
.recent-by-tag li {clear:both;line-height:1.3em !important}
.recent-by-tag li a{list-style:none;color:#555;font-weight:bold;font-size:14px !important}
.recent-by-tag li a:hover,.recent-by-tag li:hover a{color:#f35858 !important}
.recent-by-tag li .showdates{display:inline-block;font-size:10px;font-weight:normal;margin-top:5px;color:#aaa}
2. Kemudian cari kode <head>. Letakkan kode ini tepat dibawahnya
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = false;</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="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>Keterangan :
-Untuk mengubah jumlah postingan yang ditampilkan silahkan cari kode var numposts = 5; kemudian ganti anda 5 dengan jumlah yang anda inginkan.
-Untuk menghilangkan tumbnail postingan silahkan cari kode var showpostthumbnails = true; kemudian ubah true menjadi false
-Untuk menampilkan tanggal postingan silahkan cari kode var showpostdate = false; kemudian ubah false menjadi true.
Setelah kode sudah anda terapkan dengan benar silahkan klik simpan tema.
3. Setelah itu, silahkan masuk ke menu tata letak > tambahkan gadget > HTML/Java Script. Isi judulnya terserah anda. Kemudian pada bagian konten pastekan kode berikut :
<script>
var mql = window.matchMedia('screen and (min-width: 1px)');if (mql.matches){document.write("<script src="/feeds/posts/default/-/Template?orderby=updated&alt=json-in-script&callback=rcentbytag"></script>");}
</script>Keterangan :
Ganti kata template dengan nama label blog anda. Kalian harus memperhatikan penggunaan huruf besar dan huruf kecilnya. Apabila label anda terdapat tanda spasi, silahkan ganti tanda tersebut dengan kode %20. Misal label anda “Belajar Ngeblog” Maka anda ganti menjadi “Belajar%20Ngeblog”.
Setelah itu klik simpan. Dan lihat blog anda. Kira kira hasilnya akan menjadi seperti ini
 |
| Recent post dengan tumbnail |
 |
| Recent post tanpa tumbnail |
Yak, kira-kira seperti itulah cara untuk membuat widget recet post berdasarkan label tertentu. Dengan adanya recent post berdasarkan label, anda dapat menyematkan postingan terbaru dari label-label tertentu sesuai dengan keinginan anda. Biasanya label yang ditampilkan adalah label yang menjadi label paling populer dalam suatu blog. Sehingga pengunjung dapat dengan mudah untuk melihat artikel-artikel terbaru dalam label tersebut.
Jika anda tertarik dengan tutorial mengenai blogger lainnya, jangan lupa untuk membaca artikel saya yang berjudul kenapa kode head, body, dan style tidak ada dalam template blogger. Semoga artikel saya kali ini bermanfaat bagi anda. Terimakasih telah berkunjung di www.bloggerkoplo.com. Salam koplo.
makasihh, sangat membantu. Saya kirim cendol ah :v . Kalau bisa selanjutnya artikel mengenai membuat dan mengatur posisi widget di homepage biar tutorial di atas bisa diganti2 posisinya. Makasihh
Siap gan, ditunggu ya
Mantep tutorialnya. udah sy terapin di situs sy 🙂
Siao.. Senang bisa membantu gan..
kenapa css nya tidak berjalan ya saya 🙁
mungkin salah dalam menempatkan kode cssnya
Bang kalo pengen sesuai label gimana? Misalkan artikel yang dikunjungi ada di label gaming
Nah artikel lainya juga gaming
Kalo artikel yg dikunjungi berlabel tekno, artikel lainnya juga tekno gitu
Kalau fitur itu kan sudah ada di blog mas. Namanya related posts