Widget Recent Post Blogger Keren Dengan CSS dan Javascript

Widget merupakan salah satu elemen penting untuk optimasi SEO On Page. Dengan meletakan widget Recent Post di dalam sidebar, maka bisa jadi visitor kita akan semakin lama di web kita dan tentunya akan menaikan rate klik iklan.

Kali ini, saya akan membagikan Tutorial cara membuat Widget Artikel Terbaru yang bisa digunakan oleh para blog yang menggunakan CMS Blogger.com. Tutorial ini belum bisa diterapkan pada Template AMP karena menggunakan JavaAScript.

Cara Menambahkan Widget Recent Post

Silahkan pergi ke Blogger.com dan buka blog yang ingin anda pasang Widget Latest Post-nya.

Kemudian klik Layout, lalu tambahkan Gadget dan pilih HTML/Javascript Widget.

Copy kode HTML berikut ini.



<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 #f1f1f1;border-left: solid 3px #019688;padding: 10px 5px 5px 10px;margin: 10px auto;text-decoration: none;}

li.recent-posts:last-child{border-bottom:0;}

li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#000;text-decoration:none}

li.recent-posts {border-left: solid 3px #019688;

    padding: 10px 5px 5px 10px;

  margin: 10px auto;}

</style>



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

<script>

//<![CDATA[

var homePage = "https://amp.alinuxblog.com",

numPosts = 6;

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="'+title+'" >'+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>

Kode ini sudah saya masukan CSS untuk memodifikasi tampilan widget. Sebenarnya anda juga bisa memasukan kode CSS nya di template, namun agar lebih mudah dalam penginstallan, maka saya masukan saja dalam tag <style>.

Jangan lupa untuk mengubah tanda berwana kuning dengan alamat blog anda, lengkap dengan menggunakan protokol https:// atau http:// .

Setelah itu, klik Save. Maka widget akan langsung terpasang di blog anda. Untuk demo widget, silahkan lihat di sidebar blog ini.

Semoga bermanfaat :)