Simple Recent Posts Widget Untuk Blogspot (updated)

Postingan kali ini ialah Updated dari sebelumnya, masih ingat postingan sebelumnya yang pernah dibahas Cara Membuat Recent Post Blogger Menggunakan Peekaboo Effect nah postingan kali ini ialah updated lanjutannya yang akan kita modifikasi recent posts nya semoga lebih simple dan tanpa menggunakan thumbnail, disini akan kita hapus beberapa isyarat script didalamnya yang nantinya hanya akan menampilkan link postingannya saja.

Dipostingan yang lalu kita sudah menampilkan recent post dengan thumbnail yang isyarat scriptnya ibarat dibawah ini

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/AVvXsEhDAZB-rw0o7pdGpqUf8jdqN9U-YMRd52J7z6fpDGPfOWLYPpaArDEkVEoGet7iQAGg3Lw13pHg4yWQO7b9lTFeo-zh98_MXRZ3i3TjnckCXlIMFzwo1VYoVyVE8rCBA_T8_foqOA7aAvf-/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+'" target ="_top" title="'+ posttitle+'">'+ 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;

Perhatikan isyarat yang ditandai, itu yang nantinya akan kita hapus dengan menghilangkan thumbnailnya, jadi lebih simple akan ibarat ini jadinya.

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+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');} document.write('</ul>');};

Bagaimana teman menjadi lebih sedikit dan simple kodenya, Bagaimana makin penasaran ? setelah itu silahkan teman save isyarat dibawah ini di gadget HTML/Javascript pada sidebar melalui 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+'" target ="_top" title="'+ posttitle+'">'+ 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>

Perhatikan isyarat 6 yang ditandai itu fungsinya untuk menampilkan banyaknya jumlah postingan yang akan teman tampilkan di simple recent post.

Lanjut lagi, silahkan teman salin dan letakkan isyarat CSS dibawah ini sempurna di atas isyarat </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

DEMO

Dan selesai, Selamat Mencoba