Membuat Recent Posts Slide Bergulir Ke Bawah

Dalam pembahasan kali ini saya akan memberikan Anda tutorial mengenai cara membuat recent posts slide bergulir ke bawah dalam gadget, kali ini kita akan membuat recent post yang akan menampilkan postingan secara bergilir/bergulir sebanyak 10 buah yang silih berganti secara terus menerus dari 1-10 postingan, recent post yang kita buat saat ini sangat berbeda karena ada beberapa pengaturan yang mesti di sesuaikan dengan keadaan blog kita seperti pada saat ini kita akan membuat tinggi gadget recent post nya 350px dan lebar gadget 320px lau tinggi perbox postingan 70px dan lebar postingan perbox 300px, baiklah untuk lebih singkat mari kita langsung saja menuju langkah-langkah pembuatannya sebagai berikut ;

1. Login ke Blogger.com
2. Klik Rancangan

3. Di Elemen Laman klik Tambah Gadget

4. Lalu tambahkan HTML/JavaScript dengan cara klik tanda +

5. Masukan script di bawah ini kedalamnnya Lihat Langkah-Langkah Tambah Gadget HTML/Javascript 

<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:320px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:300px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.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>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[1] = "http://i1037.photobucket.com/albums/a452/thing_wu/Thing/women/2q1bhc3.jpg";
imgr[2] = "http://i1044.photobucket.com/albums/b443/akropolis_album/antarktis/125model6-1.jpg";
imgr[3] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[4] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
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://ahmadheriyanto.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

6. Simpan dan lihat hasilnya.

Penting..!!
_ numposts = 10; menentukan banyaknya postingan yang di tampilkan
_ gantilah script http:// ahmadheriyanto .blogspot.com/ dengan URL blog Anda
_ di bagian script ini 
imgr[0] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[1] = "http://i1037.photobucket.com/albums/a452/thing_wu/Thing/women/2q1bhc3.jpg";
imgr[2] = "http://i1044.photobucket.com/albums/b443/akropolis_album/antarktis/125model6-1.jpg";
imgr[3] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[4] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";

_ height:350px; script ini untuk mengatur tingginya gadget jika ingin meninggikan gadget tinggal rubah nilai 350px dengan nilai yang lebih besar lagi misalkan 500px

_ Script berikut ;

#spylist ul{
width:320px;
overflow:hidden;

script itu untuk mengatur lebarnya gadget pada script width:320px; jika ingin lebih lebar atau lebih sempil silahkan rubah nilainya ke yang lebih  besar atau ke yang lebih kecil bila untuk menyempitkan.

_ Script berikut ;

#spylist li {
width:300px;
padding: 5px 5px;

script itu untuk mengatur lebarnya recent post pada script width:300px; dengan ketentuan nilai 20px lebih kecil dari script lebar gadget, jika ingin lebih lebar atau lebih sempil silahkan rubah nilainya ke yang lebih  besar atau ke yang lebih kecil bila untuk menyempitkan.

yang saya ketahui dan pahami bahwa ini akan menggantikan tampilan gambar dan atau jika postingan anda tidak memiliki gambar maka gambar-gambar inilah yang akan menggantikannnya, walau yang akan kita tampilkan saat ini 10 postingan namun hanya dengan 5 gambar pengganti saja itu cukup karena pengisian tampilan recent post yang tak bergambar akan di ganti dengan stok yang ada, maka semua tampilannya akan bergambar semua jadi tetap terjaga keindahannya


Selamat mencoba, semoga berhasil dan terima kasih telah berkunjung.



Sumber