Cara Membuat Widget Recent Post Berdasarkan Label di Blogger

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

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&amp;alt=json-in-script&amp;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
Cara Membuat Widget Recent Post Berdasarkan Label di Blogger
Recent post dengan tumbnail
Cara Membuat Widget Recent Post Berdasarkan Label di Blogger
Recent post tanpa tumbnail
Bagaimana? Cukup muda bukan cara membuat widget recent post berdasarkan label di blogger. Jangan lupa juga untuk membuat widget label yang menarik agar pengunjung betah berlama lama diblog anda. Terimakasih telah berkunjung ke www.bloggerkoplo.com. Salam koplo.

Berlangganan update artikel terbaru via email:

4 Responses to "Cara Membuat Widget Recent Post Berdasarkan Label di Blogger"

  1. 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

    ReplyDelete
  2. Mantep tutorialnya. udah sy terapin di situs sy :)

    ReplyDelete

Iklan Tengah Artikel 2

Iklan Bawah Artikel