Membuat Recent Post By Label Super Ringan

Membuat Recent Post By Label Super Ringan

Widget recent post by label sangat penting untuk dipasang di sebuah website. Terlebih website yang bergender magazine atau news. Pemakaian widget ini untuk menarik pengunjung dan memperlihatkan sebuah informasi mutakhir menurut kategori tertentu. Widget ini juga memang banyak dan jamak digunakan di media-media berita.

Selain di atas kelebihan widget yang akan bagikan ini yakni super ringan dengan tampilan yang menawan. Hal itu sebab pemakaian widget ini tidak banyak menggunakan perenderan. Demikian juga widget recent post by label ini sudah dilengkapi dengan Conditional Tag yang tentunya tidak muncul ketika dilihat dari media mobile. Ini berfungsi biar tidak membebani ketika dilihat melalui handphone.

Cara Membuat Widget Recent Post by Label dengan Tag Conditional

OK, pribadi saja untuk penampakan silahkan lihat saja pada gambar di atas. Adapun tutorialnya yakni sebagai berikut. Tutorial ini yakni milik bungfrangki.COM.

#Langkah Pertama

Silahkan sisipkan instruksi CSS berikut ini pada template sahabat biar tampilannya menarik. Letakkan sempurna di atas instruksi ]]></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}

#Langkah Kedua

Selanjutnya letakkan instruksi javascript berikut pada template sahabat juga, tepatnya di atas instruksi </head>.

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwx-PGp_hv542SExnX2XuRKzXTwKYjvCyFmxiwtXD1tOraXylz-VGsIi4vB15vjvwLqvk2eMxXeS3FMc27ia3ztJrwULPkzgd2mlMOfTy0_j_45IYtaG2rwfn9sNSUPn5FVBnlR6fpRoH8/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+'" sasaran ="_blank" title="Membuat Recent Post by Label Super Ringan"><img class="rct-thumb" alt="Widget recent post by label sangat penting untuk dipasang di sebuah website Membuat Recent Post by Label Super Ringan" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" sasaran ="_blank" title="Membuat Recent Post by Label Super Ringan" 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>")}
Advertisement
//]]>
</script>

Setelah itu simpan

NB. Sesuaikan instruksi var numpost dengan jumlah yang ingin ditampilkan dan juga var showpostthumbnails dan var showpostdate dengan true atau false.

#Langkah Ketiga

Ini yakni langkah terakhir, yaitu dengan memasang instruksi pemanggil widget recent post by label. Letakkan instruksi berikut pada Tata Letak > Tambah Widget > HTML/Java Script.

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

Silahkan diganti instruksi TEMPLATE dengan nama label yang dikehendaki.

Tralala, kini sahabat sudah mempunyai widget recent post by label yang super ringan. Semoga bermanfaat ya dan kalau ada hal yang belum dipahami silahkan coret-coret saja di kotak komentar...
Sumber https://www.blog.pustakamadrasah.web.id/