Cara membuat Recent Posts dengan Tampilan Gambar

Salah satu cara untuk mengurangi tingkat bounce rate yaitu dengan memasang recent posts. Widget recent post mampu juga disebut artikel terbaru atau posting terbaru berfungsi sebagai petunjuk postingan yang gres di update. Blog sahabat pastinya punya pelanggan tetap baik dari twitter facebook maupun feed rss. Tentunya dikala mereka kembali setelah lama tidak ke blog kita mereka mampu tau apa saja post-post terbaru blog kita.

Pada tutorial kali ini saya akan menunjukkan tutorial cara membuat gadget recent post dengan thumbnail atau yang ada gambarnya, tentunya kalau posting sahabat ada gambarnya, namun kalau artikel tidak memasukkan gambar, maka gambar pun tidak akan muncul. 

Yuk kita ikuti caranya berikut ini.

1. Masuk ke akun blogger

2. Dasbor > Tata Letak > Tambahkan Gadget > Pilih HTML Javascript

3. Silakan klik Copy all pada text area di bawah ini, lalu paste di form yang ada. Lalu simpan template.

<!-- Widget Recent Posts dengan Thumbnails isyarat Script Start --><br /><p style="display:none;">Animated Scroll Recent Posts With Thumbnails For Blogger by <a href="http://www.super-gaptek.com/">Belajar Ngeblog</a></p><br /><br /><style type="text/css" media="screen"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:350px; } #spylist ul{ width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKvxdH04HnfYHVDRPXApDjDv1IaLgM-N2wy3icdAi6Ioto49WNUUb0cbQIB_vxp6elHlPyx_I0QYCFkYaJJFgr9ADayi3dv6ug1kV-R9QVpohoilOOSV6Cm0duiaIC-mcnFIh-4R9jjHN8/s1600/bdlab-blogspot-com.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .spydate{ overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } --> </style><br /><br /><br /><br /><div id="spylist"><br /><br /><br /></div><br /><!-- Widget Recent Posts dengan Thumbnails isyarat Script End --><br /><br /><center><a href="http://www.super-gaptek.com/" title="Cara membuat Recent Posts dengan Tampilan Gambar" target="_blank"><small>Get Widget</small></a></center>

Buat sahabat yang belum tahu cara menambah gadget silakan buka artikel Cara memasang gadget di blog

Pengaturan :

• Untuk mengubah jumlah tampilan recent posts masuk silakan cari kode  numposts = 10; silakan ganti angka 10 nya.

• Jangan lupa mengganti alamat blog saya  / dengan nama URL blog anda sendiri.

• Untuk mengubah ukuran gambar cari isyarat Silakan ubah angka 70, untuk memperkecil kurangi angkanya.

thumbwidth = 70;

thumbheight = 70;

Untuk demonya mampu dilihat di sini

Widget recent post sahabat sudah jadi. Selamat berkarya menghias blog dengan widget recent posts.

Sumber http://blogbelajar2.blogspot.com