Cara Memasang Widget Recent Post Dengan Gambar

Ingin menambahkan Widget keren di blog kalian? sebuah widget yang simpel minimalis dan keren aja, widget yang menampilkan Recent Post atau Artikel Terbaru di samping halaman blog kalian. nah kali ini saya akan share gimana Cara Memasang Widget Recent Post tentunya dengan Gambar, di samping label yang tertera.



Sebelumnya saya ucapkan terima kasih untuk www.keneono.site yang telah memberikan pencerahan kepada saya dan telah memberikan source codenya secara cuma cuma. Btw dalam postingan ini saya sedikit memodifikasi Tampilan Recent Post agar lebih menyatu dengan blog saya "akan dibahas di akhir artikel". Langsung saja :
  • 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>
Catatan : Ganti tulisan warna merah dengan URL Blog kalian.



  • Simpan, dan lihat hasilnya.


 Apa yang saya ubah? disini saya hanya mengubah radius dari 70% ke 0 agar tampilan gambar mengotak dan tidak melingkar, serta mengubah padding height pada Recent Post Widget ini.

Berikut Sebelum dimodifikasi.
Sumber : https://www.keneono.site
Dan berikut setelah saya modifikasi.

Nah caranya sangat gampang sekali bukan? hanya menambahkan saja pada blog kalian. btw saya sangat berterima kasih kepada https://www.keneono.site karena telah memberikan source code ini secara gratis karena saya juga tahu bikin sebuah javascript itu susah. hahaha

Referensi : keneono.site

0 Response to "Cara Memasang Widget Recent Post Dengan Gambar"

Post a Comment

Contact Form

Name

Email *

Message *

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel