Cara Membuat Widget Artikel Terbaru (Recent Post) Dengan Thumbnail dan Efek Scroll

Santos el Salam

23 Agustus 2019

Bagi seorang blogger, ada beberapa komponen yang perlu diperhatikan saat membuat dan mengelola apa yang disuguhkan dalam isi blognya. Agar pengunjung tertarik dengan isi blog kita dan betah berlama-lama membacanya, kita mesti memaksimalkan fitur-fitur widget yang telah tersedia, termasuk di antaranya yaitu pemasangan widget Recent Post/ Artikel Terbaru/ Postingan Terbaru. Keuntungan dari memasang widget ini adalah pengunjung dapat melihat dan memilih artikel-artikel terbaru dari blog kita. Dengan adanya widget recent post ini, pengunjung akan dibuat penasaran untuk membaca artikel-artikel lain dari blog kita. 

Selain itu, keuntungan lain dari memasang widget Artikel Terbaru (Recent Post) ini yaitu bisa meningkatkan Page View yang cukup signifikan bagi blog kita. Google-bot pun konon juga menyukai blog yang menyediakan fitur Recent Posts (artikel terbaru) di situsnya. Di internet ada beragam cara tutorial mengenai pemasangan widget recent post ini. Ada recent post yang hanya menampilkan daftar judul artikel, dan ada juga yang disertai thumbnail gambar. Pada kesempatan kali ini, saya akan berbagi mengenai cara memasang widget Artikel Terbaru tampilan judul disertai dengan thumbnail gambar. Adanya thumbnail gambar ini tentunya bisa menarik pengunjung agar membaca artikel blog kita. Widget ini dapat anda pasang di sidebar blog anda. Berikut contoh penampakannya:

Jika anda tertarik untuk memasangnya, anda bisa mengikuti tutorial berikut ini. 

Cara Membuat Widget Artikel Terbaru (Recent Post) Dengan Thumbnail Gambar

1. Login ke akun blogger anda

2. Buka Dashboard kemudian pilih Layout (Tata Letak) dan klik Add a Gadget (tambahkan Gadget) 

3. Selanjutnya pilih HTML/JavaScript

4. Setelah kotak html terbuka, masukkan kode dibawah ini ke dalamnya dan beri judul Recent Post, Artikel Terbaru atau yang semacamnya. 

Berikut kodenya:

<style> img.recent_thumb {padding-right:10px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 55px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;font-color:black;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:0px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs normal {font-size:13px;} </style> <script type="text/javascript" src="http://yourjavascript.com/11132354122/tholeb-recent.js"></script> <script type="text/javascript"> var numposts = 10; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script> <script src="http://santossalam.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs" type="text/javascript"></script>

Keterangan: Angka "10" menunjukan jumlah postingan yang ditampilkan, silahkan anda bisa merubahnya sesuai selera anda. Untuk Url (yang berwarna merah) silahkan ganti dengan URL blog anda.

5. Terakhir klik simpan dan lihat hasilnya.

Jika script di atas tidak berfungsi alias widget recent post tidak berjalan, maka anda bisa memakai script kode buatan Arlinadesign di bawah ini. Tampilannya hampir sama dengan yang di atas. Cara pemasangannya pun juga hampir sama.

Berikut kodenya:

<div class='widget-ctent'>
<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;border:0;margin:5px 0;padding:5px 0;position:relative;width:100%}
.recent_posts_arlina .wrapinfo{display:inline-block;margin:0 10px 0 0;overflow:hidden;z-index:2;position:relative;width:60px;height:60px;float:left}
ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}
.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:13px;}
.recent_posts_arlina strong {font-size:13px;}
ul.recent_posts_arlina li a{font-weight:700;line-height:normal}
ul.recent_posts_arlina li a:hover{text-decoration:underline}
</style>
<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/recentpostarlina.js'></script>
<script style='text/javascript'>
var numposts=10,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=0;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>
</div>

Keterangan: Angka 10 (jumlah tampilan judul artikel) bisa anda ganti sesuai keinginan anda.

Baca juga: Cara Membuat Widget Artikel Terbaru Ringan Tanpa Javascript

Membuat Efek Scroll

Jika anda ingin menambahkan efek scroll untuk menghemat ruang misalnya, anda bisa menambahkan kode berikut ini pada kode di atas. Kode ini juga bisa diterapkan pada widget lain yang ingin anda beri efek scroll.

<div style="overflow:auto; width:80%px; height:250px;">

KODE WIDGET

</div>

Demikianlah Cara Membuat Widget Artikel Terbaru (Recent Post) Dengan Thumbnail dan Efek Scroll. Selamat Mencoba, semoga berhasil dan semoga bermanfaat. 

Labels: Blogging

Thanks for reading Cara Membuat Widget Artikel Terbaru (Recent Post) Dengan Thumbnail dan Efek Scroll. Please share...!

Facebook

Twitter