Membuat Widget Recent Post Sederhana Tapi Keren Di Blogger

Assalamu'alaikum Wr. Wb.

Salam sejahtera untuk kita semua, selamat datang kembali di Blog Sederhana Saya ini (Mas Operator), pada artikel/postingan kali ini Saya akan membagikan sebuah tutorial sederhana mengenai cara membuat Widget Recent Post Sederhana, namun meskipun sederhana masih bisa dikatakan keren, heheheheheheh....

Untuk hasil akhirnya/contoh nyatanya bisa Anda lihat widget Recent Post yang ada di Blog Saya ini. Untuk lebih jelasnya bisa Anda lihat gambar screenshot di bawah ini :

Widget Recent Post/Postingan Terbaru ini Saya dapat dari Webnya Mas Timon, yang merupakan salah satu master/suhu/expert di dunia blogging. Cara maupun langkah-langkah dalam membuatnya pun tergolong sangat mudah, dan berikut ini merupakan cara/langkah dalam pembuatan Widget Recent Post/Postingan Terbaru ini :



Langkah Pertama

1. Silahkan Copy/Salin Script di bawah ini :

/* Artikel Terbaru */ .artikel-terbaru ul li { border-bottom: 2px dotted $(label.border.color); padding-bottom: 8px; margin-bottom: 8px; font-weight: 500; } .list-label-widget-content ul li, .LinkList ul li, .PageList ul li { border-bottom: 2px dotted $(label.border.color); padding-bottom: 5px; } .artikel-terbaru ul li:before, .list-label-widget-content ul li:before, .LinkList ul li:before, .PageList ul li:before { content: "\f14b"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; margin-right: 6px; } .artikel-terbaru ul li:before { content: "\f14b"; } .list-label-widget-content ul li:before { content: "\f07b"; } .LinkList ul li:before { content: "\f14c"; } .PageList ul li:before { content: "\f249"; }

2. Login ke dashboard Blogger Anda, kemudian klik pada menu Tema/Theme, selanjutnya klik pada Edit HTML, kemudian dihalaman edit HTML silahkan cari kode"CSS Reset" (bisa dengan menekan tombol kombinasi Ctrl+F pada keyboard untuk memudahkan pencarian) perhatikan gambar di bawah ini :

3. Seperti yang ditunjukkan oleh gambar di atas, silahkan paste/tempel script yang tadi di copy persis berada di bawah kode CSS Reset tadi, untuk lebih jelasnya perhatikan gambar screenshot di bawah ini :

4. Akhiri dengan klik tombol Save Theme.

Langkah Kedua

Masih di halaman Dashboard Blog kita, sekarang kli pada menu Layout/Tata Letak, perhatikan gambar di bawah ini :

Kemudian tambahkan gadget HTML/Java Script pada sidebar yang diinginkan, pehatikan gambar di bawah ini :

Kemudian silahkan Copas script/kode di bawah ini kedalam gadget HTML/Java Script yang telah kita tambahkan tadi :

<div class='artikel-terbaru'> <script> function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n=" <li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li> ";document.write(n)}document.write("</ul> ")} </script> <script src="/feeds/posts/summary/?max-results=10&alt=json-in-script&callback=artikelterbaru"></script> </div>

Jangan lupa, klik Save/Simpan. Kemudian silahkan cek hasilnya. Jika pada widget Recent Post yang sudah kita tambahkan tadi muncul sama persis seperti widget Recent Post yang ada di Blog Saya ini, berarti menandakan bahwa apa yang kita kerjakan sudah jadi. Namun jika belum (terutama pada tampilan icon pensil yang tidak muncul) maka ada satu langkah lagi yang harus kita lakukan, yakni menginstall FontAweson agar terinstall di template Blog kita, dan caranya/langkahnya adalah sebagai berikut ini :

Masih di halaman dashboard blog kita, sekarang klik kembali pada Menu Theme/Tema, kemudian klik Edit HTML, cari kode </head> kemudian Copas script di bawah ini, dan letakkan persis di bawah kode </head> tadi.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Perhatikan gambar screenshot di bawah ini :

Simpan template, dan lihat hasilnya, maka yang tadinya icon pensil tidak muncul sekarang sudah muncul, demikian pembahasan mengenai "Membuat Widget Recent Post Sederhana Tapi Keren Di Blogger" mudah-mudahan apa yang sudah Saya sampaikan pada artikel/postingan Saya kali ini bisa bermanfaat untuk kita semua, sekian, terimakasih, dan Wassalamu'alaikum Wr. Wb.

Salam Operator Sekolah!!!

Share :