Home » Tips Blog » Cara Membuat Recent Post Bergambar Bergerak Otomatis ke Bawah Cara Membuat Recent Post Bergambar Bergerak Otomatis ke Bawah

Untuk mengatasi atau memanipulasi pikiran yang sedang negatif karena cuaca siang hari ini lumayan panas, mending bikin post ah tentang cara membuat widget recent post bergambar yang bisa berjalan/bergerak otomatis ke-bawah atau istilah yang lebih dikenal dengan spy.
Fungsi, manfaat atau kegunaan jika kita memasang widget recent post yaitu agar pengunjung bisa melihat postingan terbaru di blog kita tanpa harus menuju home.
Dan yang paling penting bisa menambah pageview dan memperindah tampilan blog.
Bagi yang berminat silahkan lihat dan simak tutorial nya.

1.Masuk ke dashboard
2.Pilih tata letak
3.Tambah gadget di sidebar
4.Klik + disebelah tulisan HTML/JavaScript
5.Copy kode di bawah ini dan paste di kotak konten

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li { width:326px;
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/AVvXsEgdel6JYVvOUskxVhi3Y2l86wb8RxLpd_98qz93wVq3uXE8Y-MyYYB0DkaEygDzlN3f5UAxq3LzeBzzOA0j9a93d0Rv0LCVyAVw-U7Q1RmyCg98EIFIQ3T36PBat_LZrsRwhJo08h_9cBRq/s1600/post-hienzo48.jpg) repeat-x;
border:1px solid #cdcdcd;
}
#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>
    <script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true; boxwidth = 294;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000"; thumbwidth = 61; thumbheight = 62;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " "; text = "Komentar";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " "; numposts = 8;
home_page = "http://hienzo.blogspot.com/"; limitspy=4 intervalspy=6000
</script>
<div id="spylist">
<script src='http://hienzo.googlecode.com/files/recentpost-thumbnail%2Bspy.js'
type='text/javascript'></script>
</div>

Catatan:  

• Width (326px) kurangi 35px dari ukuran asli sidebar anda, atau atur gimana enaknya 
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdel6JYVvOUskxVhi3Y2l86wb8RxLpd_98qz93wVq3uXE8Y-MyYYB0DkaEygDzlN3f5UAxq3LzeBzzOA0j9a93d0Rv0LCVyAVw-U7Q1RmyCg98EIFIQ3T36PBat_LZrsRwhJo08h_9cBRq/s1600/post-hienzo48.jpg  bisa diganti dengan url gambar yang telah di modifikasi dan sesuai dengan tema blog anda sendiri, kalau tidak juga gak apa-apa. 
• #cdcdcd adalah kode warna garis batas masing" recent post 
• boxwidth (294) silahkan ubah "terserah" 
• thumbwidth (61) lebar gambar 
• thumbheight (62) tinggi gambar 
• text (Komentar) tulisan disebelah jumlah komentar 
• numposts (8) total posting terbaru yang dilacak
• http://hienzo.blogspot.com/ ganti dengan url home blog/website anda 
• limitspy (4) total posting terbaru yang tampil sebelum di scroll otomatis 
• intervalspy (6000) kecepatan bergerak kebawah atau spy dalam milisecond