Membuat Widget Latest Update Untuk Blogger

Oleh Unknown

Sunday, March 1, 2015

Bagikan :

Tweet

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 Bedholrohman.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/AVvXsEjA7UAvTvihdlY5Z4n1cdlVorWPx6LTV0jK8hhwD4vGkq35rLcvbsEvhE43omUMyL5mDcMYs-6BoJyWAR_lrVIKwO35eLVj0EDUHKoPcFkHHijarr1vr9nn99zTiie2Hqb3pvqY9c2a4m-J/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).

<ul id="updated-posts"></ul>

6. Masukkan kode dibawah ini.
7. Simpan dan lihat hasilnya.

Keterangan :
- Ganti bedholrohman.blogspot.com dengan link blog anda.

Tag : Widget