Recent Post Label Simple With Right Image - Tutorial Kali ini saya akan membuat recent post by label yang mirip dengan Awbatch namun dengan versi blogger.
Setelah saya membuat tutorial Cara Membuat Staff List Simple & Responsive, kali ini saya akan membagikan tutorial recent post untuk blogger yang mungkin akan berguna 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 </head><!--<head/>--> 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
- Buka Blogger > Tata Letak > Tambahkan Widget > HTML/Javascript
- 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/AVvXsEiSQw8aYvJCyfZWsGun-M732KROPWaTdaXcjYdeFsNnUXq1Y1bVu24-bESadEq5axSS_nSGWB4Qgnw5MbX6-BRPguXbnR21l9Q5ghXjR1K98WcmEHS8PIS1zSxuXQluD_0Kw5AszacFD1BI/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+'" target ="_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 jadinya silahkan cek dibawah ini
| Tag | Keterangan |
|---|
| var show_rp_posts=5 | Silahkan Ganti No 5 untuk menampilkan Jumlah postnya |
| LABEL POST | Ganti Dengan Label Post |
Comments
Post a Comment