Tutorial Membuat Recent Post Berdasarkan Label di Blogger


Tutorial Membuat Recent Post Berdasarkan Label di Blogger - Sebagai seorang pemilik blog, menyuguhkan konten yang berkualitas adalah salah satu kebutuhan yang bisa dibilang sangat primer demi kenyamanan dan keinginan sang audien.

Apalagi jika blog kalian mengusung tema berita atau sejenis informasi yang membutuhkan banyak sekali kata dalam penulisannya seperti detik dan situs sejenis lainnya.

Nah jika kalian mengusung blog konten seperti itu dengan template berjenis magazine, kalian pasti akan memikirkan untuk membuat blog terkesan ramai dan tidak sepi. Bukankah begitu? Mulai dari penambahan widget, tata letak widget yang rapi, dan masih banyak lagi.

Dari beberapa hal yang membuat ramai tersebut, salah satunya adalah widget recent post. Kalian tau bukan widget recent post itu apa? Jadi gini,

Pengertian Widget Recent Post

Widget recent post adalah sebuah pelengkap blog yang memiliki fungsi untuk menampilkan daftar artikel terbaru dari blog kita. Tidak hanya untuk menampilkan konten terbaru, recent post yang sudah diperkaya css juga akan memberikan kesan estetis tersendiri untuk blog.

Nah, melalui widget inilah pengunjung yang secara random mengunjungi blog kita dari mesin penelusur bisa lebih dalam mengenal blog kita dengan "mungkin" penasaran akan postingan terbaru blog, pengunjung tidak perlu untuk membuka beranda untuk bisa melihatnya, jadi sangat bermanfaat untuk kenyamanan dan efisiensi pula.

Recent Post yang Berdasarkan Label

Ada saja modifikasi yang bisa dilakukan dari widget ini. Salah satunya adalah postingan terbaru yang secara spesifik berdasarkan label atau kategori pada blog kita. Misalkan kita menggunakan label " Blogger ", maka semua postingan terbaru pada kategori tersebut akan muncul semua.

Cara Memasang Recent Post by Label

Nah, apakah kalian sudah mulai berminat untuk memasang widget ini? tidak hanya bermanfaat untuk audien, tetapi juga mampu mempercantik blog secara estetis maupun terlihat proffesional. Mau tau bagaimana cara memasangnya? berikut adalah caranya :

1. Kunjungi blogger.com dan loginlah menggunakan akun kalian seperti biasanya.

2. Pilih blog yang akan kalian tambahkan dengan widget recent post ini.

3. Pilih ke Tema > Edit Html.

4. Masukkan kode dibawah ini tepat diatas kode </style>

/* 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}

5. Jika sudah, cari kode </body> dan letakkan kode dibawah tepat diatasnya pula.

<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 :

  • var numposts = 5; adalah batas atau jumlah artikel yang akan ditampilkan melalui widget ini. Kalian bisa merubah sesuai keinginan kalian. Disarankan sih 5 atau 7, tidak perlu banyak-banyak.
  • var showpostthumbnails = trueadalah kode untuk menampilkan gambar preview pada tampilan recent post nantinya. Jika kalian tidak ingin menampilkan gambar previewnya, maka tinggal ganti tulisan true menjadi false.
  • var showpostdate = false; adalah kode yang akan menampilkan tanggal postingan kalian diterbitkan. Jika kalian ingin menampilkan tanggalnya, silahkan ganti kodenya menjadi true, jika tidak ingin, biarkan saja seperti itu kodenya.

6. Simpan template.

7. Sekarang, beralihkan ke bagian tata letak atau layout.

8. Tambah widget, pilih HTML/Javascript.


9. Masukan kode berikut ini

<script>
var mql = window.matchMedia('screen and (min-width: 992px)');if (mql.matches){document.write("<script src=\"/feeds/posts/default/-/Gaming?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag\"><\/script>");}
</script>

Ganti kata Gaming dengan nama label yang akan kalian tambahkan di bagian recent post. Perhatikan huruf kapital juga ya.

Jika sudah, maka kalian sudah berhasil menambahkan widget ini di blog kalian dengan sukses dan lancar. Mungkin cukup sekian ya tutorial kali ini, semoga bermanfaat dan apabila terdapat salah kata, mohon dimaafkan. Terima kasih.

Source code : https://www.bungfrangki.com/2015/12/membuat-recent-post-berdasarkan-label.html 

Subscribe to receive free email updates: