Cara Mudah Membuat Recent Post Per Label Dengan JavaScript

kutipER

Cara Mudah Membuat Recent Post Per Label Dengan JavaScript – Untuk kali ini saya ingin membagikan atau sharing sebuah catatan blog kembali yang saya dapat dari hasil utak-atik template blog yang di mana terdapat code JavaScript untuk membuat Recent Post, Lates Post Per Label. Jadi disini kalian tidak perlu mengatur CSS atau sebagainya cukup masukan code JavaScript ini di halaman pengeditan Template blog kalian.

Lumayanlah untuk mempercantik dan memperindah blog kalian, Kurang Lebih untuk hasil tampilan nya seperti gambar berikut, lebih tepatnya seperti Mercury Template.

Pertama, Silakan kalian masuk ke beranda blog kalian, lalu Pilih Tema >> Edit HTML, Lihat Gambar dibawah!

Kedua, Silakan kalian cari kode </body>, biasanya ada di paling bawah, Setelah ketemu silakan kalian copy paste script di bawah Letakan di atasnya, Lihat gambar di bawah!

Baca Juga: Cara Membuat Related Post Menarik

<script type=’text/javascript’>

//<![CDATA[

$(“.ty-trigger .HTML .widget-content span.tagpost”).each(function(){var c=$(this).attr(“data-label”),d=$(this).attr(“data-no”);$.ajax({url:”/feeds/posts/default/-/”+c+”?alt=json-in-script&max-results=”+d,type:”get”,dataType:”jsonp”,success:function(v){var H=””;var b='<div class=”ty-bonus”>’;for(var s=0;s<v.feed.entry.length;s++){for(var x=0;x<v.feed.entry[s].link.length;x++){if(v.feed.entry[s].link[x].rel==”alternate”){H=v.feed.entry[s].link[x].href;break}}var C=v.feed.entry[s].title.$t;var a=v.feed.entry[s].category[0].term;var F=v.feed.entry[s].author[0].name.$t;var I=v.feed.entry[s].published.$t,J=I.substring(0,4),w=I.substring(5,7),y=I.substring(8,10),A=month_format[parseInt(w,10)]+” “+y+”, “+J;var B=v.feed.entry[s].content.$t;var E=$(“<div>”).html(B);if(B.indexOf(“//www.youtube.com/embed/”)>-1){var D=v.feed.entry[s].media$thumbnail.url.replace(“/default.jpg”,”/mqdefault.jpg”);var z=D}else{if(B.indexOf(“<img”)>-1){var G=E.find(“img:first”).attr(“src”).replace(“s72-c”,”s1600″);var z=G}else{var z=no_image}}b+='<div class=”ty-wow”><a class=”ty-thumb-bonos” href=”‘+H+'” style=”background:url(‘+z+’) no-repeat center center;background-size: cover”><span class=”tyimg-lay”/></a><div class=”ty-bonus-con”><h3 class=”ty-bonos-entry”><a href=”‘+H+'”>’+C+'</a></h3><span class=”yard-auth-ty”>’+F+'</span><span class=”ty-time”>’+A+”</span></div></div>”}b+=”</div>”;$(“.ty-trigger .HTML .widget-content span.tagpost”).each(function(){var e=$(this).attr(“data-label”);if(e==c){$(this).parent().html(b)}})}})});

//]]>

</script>{codeBox}

Ketiga, Silakan kalian masuk ke Menu Tata Letak >> Add Gadget letaknya sesuai yang kalian inginkan >> Pilih HTML/Java Script, Lalu masukan kode di bawah, Lihat Gambar! Silakan save.

<span class=”tagpost” data-label=”Drama%20Korea” data-no=”6″>{codeBox}

Note:

Judul : Sesuai yang kalian inginkan!
Drama%20Korea adalah nama dari label tersebut silakan kalian ganti dengan nama label kalian!
Angka “6” adalah banyaknya post label yang di tampilan bisa di ganti sesuai keinginan kalian!

Terima kasih, semoga bermanfaat!

kutipER