Cara Membuat Widget Artikel Terbaru Responsive

Salah satu widget yang sangat banyak sekali dipakai oleh para blogger atau bahkan media berita besar sekalipun pasti selalu menggunakan widget artikel baru, update post atau apapun itu yang terpenting berkaitan dengan posting terbaru yang ada pada blog.

Selain untuk mempercantik suatu blog, postingan terbaru yang terdapat pada blog juga sangat memermudah para pengunjung blog untuk dapat melihat artikel yang terbaru pada blog tersebut sehingga para pengunjung tidak usah melakukan pengecekan ke beranda blog.

Pada artikel ini saya ingin berbagi pengalaman untuk membuat blog kamu supaya terlihat lebih cantik dan tetap responsive tentunya, sehingga para pengunjung akan terus betah berlama-lama dalam mengunjungi blog sobat.

Baca juga : Cara membuat widget populer berwarna yang responsive

Bagaimana cara membuat postingan terbaru yang responsive tapi menarik ?
Baiklah, untuk teman-teman semuanya yang ingin membuat widget artikel terbaru ataupun terupdate silahkan simak panduannya :
1. Silahkan kamu login terlebih dahulu ke blogger
2. Masuk ke menu tata letak blog
3. Pilih tambah gadget / widget
4. Pilih HTML/JavaScript
5. Silahkan isi judul dengan apa saja, contohnya artikel baru dan isi pada kolom javascriptnya dengan kode berikut ini :
<script>//<![CDATA[ function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<5;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&alt=json-in-script&callback=showlatestposts\"></scr" + "ipt>"); //]]></script>
Catatan : silahkan ganti angka 5 pada pada kode (var i=0;i<5;i++) sesuai jumlah yang kamu inginkan yang ingin ditampilkan nantinya.

6. Kemudian simpan, Sampai disini kamu belum selesai.
7. Selanjutnya silahkan kamu pilih menu Tema / Template dan pilih Edit HTML
8. Silahkan cari kode </head> dengan cara menekan tombol CTRL + F
9. Jika sudah ketemu, silahkan kamu letakan kode script berikut ini tepat diatas atau sebelum kode </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>
10. Kemudian klik simpan templatenya.

Sampai disini kamu sudah berhasil membuat widget pos terbaru yang sangat simple dan keren yang pastinya responsive, jika kamu melakukan langkah-langkahnya sesuai dengan yang diatas maka tidak akan mengalami kegagalan.

Demikianlah artikel tentang cara membuat widget artikel terbaru yang responsive dan keren tentunya, semoga dengan artikel ini dapat membantu teman-teman semuanya.

Share this post