Recent Post Label Simple With Right Image

Recent Post Label Simple With Right Image - Tutorial Kali ini aku akan menciptakan recent post by label yang ibarat dengan Awbatch namun dengan versi blogger.

Setelah aku menciptakan tutorial Cara Membuat Staff List Simple & Responsive, kali ini aku akan membagikan tutorial recent post untuk blogger yang mungkin akan mempunyai kegunaan untuk blog kalian.

Pertama-tama kalian harus pastikan template kalian sudah terpasang atau sudah ada javascript yang hampir sama dengan dibawah ini, biasanya tersimpan diatas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; template blogger, Jika sudah ada tidak perlu ditambah lagi.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>

Recent Post Label Simple With Right Image

1. Buka Blogger > Tata Letak > Tambahkan Widget > HTML/Javascript
2. Lalu simpan Script berikut ini diwidget tersebut

<script type="text/javascript">/*<![CDATA[*/ var show_rp_posts=5; var show_rp_image=true;function show_rp_labelthumb(y){document.write('<ul class="rp-wrapper">');for(var L=0;L<show_rp_posts;L++){var z,E=y.feed.entry[L],H=E.title.$t;if(L==y.feed.entry.length){break}for(var D=0;D<E.link.length;D++){if("replies"==E.link[D].rel&&"text/html"==E.link[D].type){var G=E.link[D].title,F=E.link[D].href}if("alternate"==E.link[D].rel){z=E.link[D].href;break}}var x;try{x=E.media$thumbnail.url}catch(I){s=E.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwwr1t-vVkn6O3RVruSkGWgrxO80qMMkCbApfTfjKF4mGo98CzBxWxjveCYHWpowclfp27hPqSk6CjF_y7RfNCp_qB-dwOJXCTCYHJuvDhLOo_DdgivjfyPqWdF4Wk2JfRcfQjZml6xMqp/s1600/no-thumb.png"}var C=E.published.$t,K=C.substring(0,4),J=C.substring(5,7),q=C.substring(8,10),k=new Array;if(k[1]="Jan",k[2]="Feb",k[3]="Mar",k[4]="Apr",k[5]="May",k[6]="Jun",k[7]="Jul",k[8]="Aug",k[9]="Sep",k[10]="Oct",k[11]="Nov",k[12]="Dec",document.write('<li class="rp-list">'),1==show_rp_image&&document.write('<a href="'+z+'"><img class="rp-thumbnail" src="'+x+'"/></a>'),document.write('<div class="rp-title"><a href="'+z+'" sasaran ="_top">'+H+"</a></div>"),"content" in E){var B=E.content.$t}var M="",j=0;document.write(M),document.write("</li>")}document.write("</ul>")}; /*]]>*/</script>  <script src="/feeds/posts/default/-/LABEL POST?orderby=published&alt=json-in-script&callback=show_rp_labelthumb"></script> <noscript>Your browser does not support JavaScript!</noscript>  <style> ul.rp-wrapper{margin:0 auto;max-width:300px;list-style:none} ul.rp-wrapper li{list-style:none;border-bottom:1px dashed #ddd;padding:3px 0;clear:both;overflow:hidden} ul.rp-wrapper li:before{content:'\f105';font-family:fontawesome;margin-right:5px;float:left;font-weight:600} ul.rp-wrapper li img.rp-thumbnail{float:right;width:40px;margin-left:5px;height:40px} ul.rp-wrapper li .rp-title{line-height:normal;max-height:38px;overflow:hidden;text-overflow:ellipsis} </style>

Contoh yang sudah alhasil silahkan cek dibawah ini

Demo

Tag	Keterangan
var show_rp_posts=5	Silahkan Ganti No 5 untuk menampilkan Jumlah postnya
LABEL POST	Ganti Dengan Label Post

Bagikan Artikel ini