Cara Memasang Widget Recent Post Dengan Gambar

Salah satu hal yang dapat kamu tambahkan pada halaman blog yang kamu buat adalah widget recent post, meskipun secara default kamu bisa menambahkannya langsung melalui menu add widget di Blogger, namun tentu tampilannya terasa kurang mantap dan kurang elegan. 

Dan karena hal tersebut, kita sebenarnya bisa menambahkan sebuah custom widget recent post dengan hanya menambahkan beberapa bagian kode dan script yang memang cukup sederhana. Terkait hal tersebut, berikut saya rangkum beberapa langkah yang dapat kamu lakukan untuk memasang widget recent post di blog kamu. 

Disclaimer. 

Saya ucapkan terima kasih kepada www.keneono.site yang telah berbagi source code dibawah. 

 

Cara Memasang Widget Recent Post Dengan Gambar

Langkah 1. Pertama silahkan kamu masuk ke halaman Dasbor Blogger. 

Langkah 2. Selanjutnya silahkan kamu masuk ke menu tata letak. 

Selanjutnya pada halaman tersebut, silahkan kamu klik pada Tambahkan Widget / Add Widget, silahkan sesuaikan lokasi dimana widget tersebut akan ditempatkan. 

Setelah kamu klik, kamu akan diberikan sebuah window kecil seperti pada gambar diatas, silahkan kamu pilih saja pada HTML/Javascript. 

Silahkan kamu sesuaikan pada bagian Judul dengan "Artikel Terbaru" atau nama sesuai keinginan kamu, jika sudah silahkan kamu paste kode berikut dan masukkan pada bagian konten. 

• Masuk ke Halaman Blogger kalian.
• Masuk ke Bagian Tata Letak
• Tambahkan Gadget.
• Pilih HTML/Javascript. 
• Masukan Source Code Berikut :

<style type='text/css'> img.recent_thumb {padding:1px;width:75px;height:60px;border:1px solid silver;border-radius:0%;float:left;margin:5px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 60px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style> <script style='text/javascript' src='https://cdn.rawgit.com/dedi96/keneono/7abd0c02/recentpost.js'></script> <script style='text/javascript'> var numposts = 5; var showpostthumbnails = true; var displaymore = false; var displayseparator = true; var showcommentnum = true; var showpostdate = true; var showpostsummary = false; var numchars = 100;</script> <script src='https://blogsayugi.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Silahkan kamu ganti pada bagian "https://blogsayugi.com" menjadi domain blog kamu.

Langkah 3. Jika sudah selesai, silahkan kamu simpan dan lihat perubahannya. 

Silahkan kamu lihat hasilnya sendiri, dan terkait dengan kode diatas, ada beberapa bagian yang saya ubah, seperti radius agar tampilan gambar menjadi kotak, serta mengatur kembali padding agar lebih pas dan terlihat mantap. 

Nah silahkan dicoba guys, saya sengaja tidak memberikan contoh hasil yang saya screenshot biar kamu penasaran. hehehe

Referensi : keneono.site

Gylang Satria Penulis, Blogger dan Author di WinPoin .

Share :