Cara membuat Recent Posts dengan Tampilan Gambar

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

Pada tutorial kali ini saya akan memberikan tutorial cara membuat gadget recent post dengan thumbnail atau yang ada gambarnya, tentunya jika posting sobat ada gambarnya, namun jika 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 kode 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><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><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/AVvXsEi0O1TQ7xEB97x6fqA5e51QeD7ZR8VdMEjda0zqHMiizwPMZZOAIwkEK3l0etLHPlhYchQ0tETQFejlta8pnJwDX5T4k6eHgg5PUel0hHCFB0CtCyRCP_uSfqVZlQCkoX3fs-CoWEtZcrnd/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 /><script language='JavaScript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirEUqPd1DxyswoaoxEngdoJDBt2jeOKrFIxeDB6DtgAqKllV8camAh-hEjhJy0jZPtdAaj5DAmjTVm9KDKA3MkRa2WEYbFmQ4F3CqY5d5hqMCEp0Z5Y-Isq455j-A6fz1kl70mo3VsBKg/s400/noimage.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirEUqPd1DxyswoaoxEngdoJDBt2jeOKrFIxeDB6DtgAqKllV8camAh-hEjhJy0jZPtdAaj5DAmjTVm9KDKA3MkRa2WEYbFmQ4F3CqY5d5hqMCEp0Z5Y-Isq455j-A6fz1kl70mo3VsBKg/s400/noimage.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirEUqPd1DxyswoaoxEngdoJDBt2jeOKrFIxeDB6DtgAqKllV8camAh-hEjhJy0jZPtdAaj5DAmjTVm9KDKA3MkRa2WEYbFmQ4F3CqY5d5hqMCEp0Z5Y-Isq455j-A6fz1kl70mo3VsBKg/s400/noimage.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirEUqPd1DxyswoaoxEngdoJDBt2jeOKrFIxeDB6DtgAqKllV8camAh-hEjhJy0jZPtdAaj5DAmjTVm9KDKA3MkRa2WEYbFmQ4F3CqY5d5hqMCEp0Z5Y-Isq455j-A6fz1kl70mo3VsBKg/s400/noimage.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirEUqPd1DxyswoaoxEngdoJDBt2jeOKrFIxeDB6DtgAqKllV8camAh-hEjhJy0jZPtdAaj5DAmjTVm9KDKA3MkRa2WEYbFmQ4F3CqY5d5hqMCEp0Z5Y-Isq455j-A6fz1kl70mo3VsBKg/s400/noimage.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 70; thumbheight = 70; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://blogbelajar2.blogspot.com/"; limitspy=4 intervalspy=4000 </script><br /><br /><div id="spylist"><br /><script src='http://julak-project.googlecode.com/files/recentpost%20.js' type='text/javascript'></script><br /><br /></div><br /><!-- Widget Recent Posts dengan Thumbnails kode Script End --><br /><br /><center><a href="http://www.super-gaptek.com/" title="Cara Membuat Blog" target="_blank"><small>Get Widget</small></a></center>

Buat sobat 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  http://www.super-gaptek.com/ dengan nama URL blog anda sendiri.

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

thumbwidth = 70;

thumbheight = 70;

Untuk demonya bisa dilihat di sini

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

http://www.super-gaptek.com/2012/06/cara-membuat-recent-posts-dengan.html