Membuat Widget Latest Update Untuk Blogger

Artikel terkait : Membuat Widget Latest Update Untuk Blogger

Latest Update adalah widget yang menampilkan daftar artikel yang terakhir diperbaharui/last update. Widget ini juga berguna memperlihatkan pengunjung untuk memantau artikel mana saja yang sudah diperbaharui.

Menampilakan data - data artikel terkahir diperbaharui atau telah mengalami perbaharuan, jadi nantinya widget ini akan disortir berdasarkan artikel yang terbaru diperbaharui oleh admin blog.

Berikut tutorial Membuat Widget Latest Update Untuk Blogger.

1. Login ke akun Blogger.
2. Masuk ke Dashboard, Template > Edit HTML.
3. Tambahkan CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>.

/*Latest Updated*/
li.update {list-style: none;height:auto;overflow:hidden}
li.update a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
li.update a:hover{color:#859ce6}
.imgupdate{float:left; margin:0 10px 10px 0}
.imgupdate:hover{opacity:0.7}
.tgl-com {display:block;font-size:16px;margin-top:5px;font-size:16px}

4. Setelah itu Salin dan Letakkan Kode dibawah ini tepat diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
//Terakhir Diperbaharui by mursaidblog.blogspot.com
function updatedPosts(a){if(document.getElementById("updated-posts")){var e=a.feed.entry,title,img,link,date,content="",o=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],ct=document.getElementById("updated-posts");for(var i=0;i<5;i++){for(var j=0;j<5;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t,pd=e[i].published.$t.substring(0,10).split("-");if("media$thumbnail"in e[i]){img=e[i].media$thumbnail.url}else{img="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirTOmgmGNjiFWWl0Aqy9ilihEO6BgZ7HzOwdJOHKyYoHdRqfm7l1sjSwqCXxJZXo0NfJTDs2ptJPKJtZ4SxCE5LN2kIZQar05dp12yJzusw726f6ciaseXZdgItHe40XL4I_lf2jRh1NW6/s70-c/KM+Icon.png"}content+='<li class="update"><a href="'+link+'" target="_blank" title="'+title+'"><img src="'+img.replace(/\/s72-c/,"/s70-c")+'" class="imgupdate" alt="'+link+'" height="70px" width="70px"/></a>';content+='<strong><a href="'+link+'" target="_blank" title="'+title+'">'+title+'</a></strong><span class="tgl-com" datetime="'+pd.join("-")+'">  '+(pd[2]+" "+o[(parseInt(pd[1],10)-1)]+" "+pd[0])+'</span></li>'}ct.innerHTML=content}}function getScript(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;document.body.appendChild(s)}getScript("http://bedholrohman.blogspot.com/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=5&callback=updatedPosts");
//]]>
</script>

5. Simpan, lalu masuk ke Tata Letak > Tambah Gadget (HTML/JavaScript).