Cara Buat Widget Recent Post Berdasarkan Label di Blogger
Dtokonline-Artikel ini berisi Cara Membuat Widget Recent Post Berdasarkan Label di Blogger menggunakan kombinasi css dan javascript. Dengan membuat recent post berdasarkan label maka pengunjung blog akan mengetahui apa saja postingan terbaru dari artikel label tertentu. Ini tentu sangat membantu Anda, untuk mengarahkan visitor ke artikel tertentu pada blog yang Anda kelola.
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> .
/* 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 simpan.
Begitulah panduan mengenai cara membuat widget recent post berdasarkan label di blogger, bila ada pertanyaan bisa Anda tanykan pada kolom komentar. Semoga cara diatas bisa berhasil dan dapat membantu Anda, sekian terimakasih.
Tidak ada komentar untuk "Cara Buat Widget Recent Post Berdasarkan Label di Blogger"
Posting Komentar