Cara Gampang Menciptakan Widget Recent Post Pada Blog
Recent post merupakan sebuah widget yang menampilkan artikel-artikel terbaru yang diterbitkan pada sebuah blog. Pada umumnya sebuah tema atau template blog sudah mengusung widget ini sebagai pelengkap, namun juga ada yang tidak memasukkan widget ini dalam suatu tema yang telah dibuat. Makara untuk melengkapi widget recent post tersebut maka harus ditambahkan secara manual baik memakai widget bawaan blogger atau dapat juga dengan cara menambahkan script pada widget supaya tampilannya menjadi lebih menarik.
Bagi kalian yang ingin menambahkan widget recent post ini aku akan membagikan dua buah script, yang pertama script recent post tanpa gambar dan yang kedua widget recent post dengan gambar. Untuk mempersingkat waktu pribadi saja kita mulai langkah menciptakan widget recent postnya.
Widget Recent Post Tanpa Gambar
Widget ini merupakan tampilan yang sederhana dan tidak menghipnotis loading blog kalian alasannya yakni sangat ringan dan fast loading. Untuk memasang widget ini kalian terlebih dahulu masuk pada sajian blogger kemudian pilih tata letak, selanjutnya tambahkan widget HTML/JavaScript beri judul yang sesuai dengan harapan kalian kemudian copy dan paste instruksi dibawah ini pada isi widget tersebut dan simpan.
<style scoped='' type="text/css"> ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;} li.recent-posts:last-child{border-bottom:0;} li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline} </style> <ul id="recent-posts"></ul> <script> //<![CDATA[ var homePage = "http://www.tipseru.info", numPosts = 10; function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="Cara Praktis Membuat Widget Recent Post Pada Blog" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp); //]]> </script>Keterangan:
homePage = ganti dengan link blog kalian
numPosts = Jumlah postingan yang ingin ditampilkan
Widget Recent Post Dengan Gambar
Widget yang satu ini merupakan widget favorit pilihan banyak para blogger, alasannya yakni dilengkapi dengan gambar kecil yang mempercantik tampilan dan tentunya menarik untuk dilihat. Untuk menciptakan tampilan recent post menyerupai ini caranya sama dengan cara diatas yaitu menambahkan widget HTML/JavaScript pada sajian tata letak, namun script yang kita masukkan kali ini berbeda, scriptnya yakni sebagai berikut.
<style scoped='' type='text/css'> #recent-posts{color:#999;font-size:12px} #recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px} #recent-posts ul{margin:0;padding:0} #recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)} #recent-posts ul li:last-child{border-bottom:0} #recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal} </style> <div id='recent-posts'> <script type='text/javaScript'> var rcp_numposts=5; var rcp_snippet_length=150; var rcp_info='yes'; var rcp_comment='Comments'; var rcp_disable='T?t Nh?n xét'; function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDoGnMCQDgkUhhFZRskEB-0tRcVZDU6m1t1MMidIAMZibcl1Ka6h68cYhZNd-shk29LVq9TITiwut9Ic8MFow2-GO730axgRl5czpOUhmxIH1UJshFXHhZjsXkRDj1vzrHd07USPvOv79n/"};}};dw+='<li>';dw+='<img alt=" Recent post merupakan sebuah widget yang menampilkan artikel Cara Praktis Membuat Widget Recent Post Pada Blog" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="Cara Praktis Membuat Widget Recent Post Pada Blog">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts"></script>'); </script> </div> Yang perlu kalian rubah pada script diatas hanya instruksi yang berwarna orangange, instruksi
var rcp_numposts=5; yakni instruksi jumlah post yang akan ditampilkan, jadi kalian tinggal rubah saja angka tersebut sesuai yang kalian mau dan kalau sudah final tinggal simpan dan lihat hasilnya.
Itulah uraian singkat aku wacana cara menciptakan widget recent post, semoga artikel kali ini menawarkan manfaat bagi kalian semua dan jangan lupa nantikan widget-widget keren dan bermanfaat lainnya.