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.
OK, langsung saja untuk penampakan silahkan lihat saja pada gambar di atas. Adapun tutorialnya adalah sebagai berikut. Tutorial ini adalah milik bungfrangki.COM.
Silahkan sisipkan kode CSS berikut ini pada template sahabat Ngonline06 agar tampilannya menarik. Letakkan tepat di atas kode ]]></b:skin>.
Selanjutnya letakkan kode javascript berikut pada template sahabat juga, tepatnya di atas kode </head>.
Setelah itu simpan
NB. Sesuaikan kode var numpost dengan jumlah yang ingin ditampilkan dan juga var showpostthumbnails dan var showpostdate dengan true atau false.
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.
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...
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
#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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGJt4K0wVUH_AIccIwruQG3amLq2DUdnWMCpvV4D7mVxyO5ikDGPQnj_OULdCM_S8_zI9Rx4wgt0GU4X1oUVj0FSAjVmdKSOOGpLu-fEyd03TSqNCOd7o08qfqAvDOclEIuXT6O-Mcq3JN/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>Silahkan diganti kode TEMPLATE dengan nama label yang dikehendaki.
var mql = window.matchMedia('screen and (min-width: 992px)');if (mql.matches){document.write("<script src=\"/feeds/posts/default/-/TEMPLATE?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");}
</script>
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...
No comments
Silahkan berkomentar dengan baik.