logo blog

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 menawarkan sebuah informasi mutakhir berdasarkan kategori tertentu. Widget ini juga memang banyak dan jamak dipakai di media-media berita.

Selain di atas kelebihan widget yang akan Ngonline06 bagikan ini adalah super ringan dengan tampilan yang menawan. Hal itu karena pemakaian widget ini tidak banyak memakai perenderan. Demikian juga widget recent post by label ini sudah dilengkapi dengan Conditional Tag yang tentunya tidak muncul saat dilihat dari media mobile. Ini berfungsi agar tidak membebani saat dilihat melalui handphone.

Cara Membuat Widget Recent Post by Label dengan Tag Conditional


Cara Membuat Widget Recent Post by Label super ringan
OK, langsung saja untuk penampakan silahkan lihat saja pada gambar di atas. Adapun tutorialnya adalah sebagai berikut. Tutorial ini adalah milik bungfrangki.COM.

#Langkah Pertama


Silahkan sisipkan kode CSS berikut ini pada template sahabat Ngonline06 agar tampilannya menarik. Letakkan tepat di atas kode ]]></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 kode javascript berikut pada template sahabat juga, tepatnya di atas kode </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="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>")}
Advertisement
//]]>
</script>

Setelah itu simpan

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

#Langkah Ketiga


Ini adalah langkah terakhir, yaitu dengan memasang kode pemanggil widget recent post by label. Letakkan kode 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 kode TEMPLATE dengan nama label yang dikehendaki.

Tralala, sekarang sahabat Ngonline06 sudah memiliki widget recent post by label yang super ringan. Semoga bermanfaat ya dan jika ada hal yang belum dipahami silahkan coret-coret saja di kotak komentar...

Share this:

Artikel Menarik Lainnya

Show comments
Hide comments

No comments

Silahkan berkomentar dengan baik