Simple Recent Posts Widget Untuk Blogspot

Masih ingat dengan postingan recent post dengan pengaruh peekaboo? Nah kali ini kita akan memodifikasi recent posts tersebut menjadi lebih simple tanpa thumbnail. Kita akan menghapus beberapa arahan di dalam script-nya supaya thumbnail-nya tidak muncul dan hanya menyisakan link-link postingan saja.

Pada postingan yang lalu, recent post menampilkan thumbnail dengan script ibarat berikut (silahkan buka recent-post-thumb.js)

 function showlatestpostswiththumbs(json){document.write('<ul id="recent-posts-container">');for(var i=0;i<3;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commentstext=entry.link[k].title;var commentsurl=entry.link[k].href;}
 if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
 var recenthumb;try{recenthumb=entry.media$thumbnail.url;}catch(error){s=entry.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!="")){recenthumb=d;}else recenthumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDOublcyHVyHN4IvEEOi35Ej2f4eesU4CUqoO7ULrUNxL2n70IGA2CnvCrWl8Cv1V_JiKFaJJ0dNSkmflbW31bCRz6jCMfecrnUpXbE6gdKWE05JOj30LraDz5nBHAmvDaljPE_Cs1RPf/s1600/no-thumb.png';}
 document.write('<li class="recent-posts-list">');document.write('<img class="recent-post-thumb" src="'+ recenthumb+'"/>');document.write('<div class="recent-post-title"><a href="'+ postsurl+'" sasaran ="_top" title="Simple Recent Posts Widget Untuk Blogspot">'+ posttitle+'</a></div>');document.write('</li>');}
 document.write('</ul>');};function yScrollHandler(){var win=document.getElementById("peekaboo");if((window.pageYOffset+ window.innerHeight)>=document.body.offsetHeight){win.style.transition="right 0.7s ease-in-out 0s";win.style.right="0px";}else{win.style.transition="right 0.7s ease-in-out 0s";win.style.right="-452px";}};window.onscroll=yScrollHandler;

Kita hapus arahan untuk menampilkan thumbnail-nya dan yang lainnya yang tidak dibutuhkan (yang aku marking), sehingga menjadi ibarat di bawah ini.

 function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<6;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
 document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" sasaran ="_top" title="Simple Recent Posts Widget Untuk Blogspot">'+ posttitle+'</a>');document.write('</li>');}
 document.write('</ul>');};

Menjadi lebih simple bukan? Makara untuk menyimpannya silahkan simpan script di bawah ini pada gadget HTML/JavaScript di sidebar lewat tata letak.

 <script>
 //<![CDATA[
 function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<6;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
 document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" sasaran ="_top" title="Simple Recent Posts Widget Untuk Blogspot">'+ posttitle+'</a>');document.write('</li>');}
 document.write('</ul>');};
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
 //]]>
 </script>

Kode 6 ialah untuk menampilkan jumlah postingan pada simple recent post.

Kemudian tambahkan CSS di bawah ini di dalam Edit HTML di atas arahan </head>

 <style type='text/css'>
 #recent-posts{
     width:auto;
     padding:0 10px;
     margin:0 auto;
     border:1px solid #ddd;
 }
 #recent-posts ul,#recent-posts li {
     list-style:none;
 }
 #recent-posts a{
     text-decoration:none;
 }
 #recent-posts li{
     border-top:1px solid #ddd;
     padding:6px 0
 }
 #recent-posts li:first-child{
     border-top:none;
 }
 </style>

Result: JSFIDDLE

Selamat mencoba....


Sumber https://www.kompiajaib.com/

Share this post