Cara Membuat Recent Post Slide Show

Kali ini saya akan membahas tentang cara  membuat recent post yang berefek slide show. Menurut kalian apa gunanya recent post slide show??? kalau menurut saya sih agar blog kita akan terlihat cantik dan menarik, dan agar pengunjung blog merasa betah di blog kita. Untuk membuatnya cukup mudah, kita hanya memasukkan kode script ke dalam gadget. Nah...langsung saja cara membuatnya di bawah ini  :

1. Login blogger
2. Pilih rancangan >>  klik tambah gadget >> klik Html/JavaScript.
3. Masukan kode di bawah ini :

<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: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(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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmh_IYlaPX9orv8HqUPrkKctsDhszWdZD4Gsk7yYtEJoD__rBQLbq0ms7MaHJOTx-QtnLx6p-aMS2VWwZ57lLvgWmjqMs41sx1Q3Eluw2FsKW3bQ86QMoqT2TwSHAn3UDl2JNkCq7-yw/s288/m-azkadoffolow.gif";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmh_IYlaPX9orv8HqUPrkKctsDhszWdZD4Gsk7yYtEJoD__rBQLbq0ms7MaHJOTx-QtnLx6p-aMS2VWwZ57lLvgWmjqMs41sx1Q3Eluw2FsKW3bQ86QMoqT2TwSHAn3UDl2JNkCq7-yw/s288/m-azkadoffolow.gif";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmh_IYlaPX9orv8HqUPrkKctsDhszWdZD4Gsk7yYtEJoD__rBQLbq0ms7MaHJOTx-QtnLx6p-aMS2VWwZ57lLvgWmjqMs41sx1Q3Eluw2FsKW3bQ86QMoqT2TwSHAn3UDl2JNkCq7-yw/s288/m-azkadoffolow.gif";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmh_IYlaPX9orv8HqUPrkKctsDhszWdZD4Gsk7yYtEJoD__rBQLbq0ms7MaHJOTx-QtnLx6p-aMS2VWwZ57lLvgWmjqMs41sx1Q3Eluw2FsKW3bQ86QMoqT2TwSHAn3UDl2JNkCq7-yw/s288/m-azkadoffolow.gif";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmh_IYlaPX9orv8HqUPrkKctsDhszWdZD4Gsk7yYtEJoD__rBQLbq0ms7MaHJOTx-QtnLx6p-aMS2VWwZ57lLvgWmjqMs41sx1Q3Eluw2FsKW3bQ86QMoqT2TwSHAn3UDl2JNkCq7-yw/s288/m-azkadoffolow.gif";
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://infotipsblogging.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>

4. Simpan dan lihat hasilnya.

Keterangan : http://infotipsblogging.blogspot.com/ >> ganti dengan alamat blog sobat.

Good Luck  ^_^

Related Post :

Tips Blogging

• Tips Agar Blog Anti Klik Kanan
• Membuat Efek Bubble Pada Cursor
• Membuat Efek Bintang Berjatuhan Dari Cursor
• Cara Menampilkan Widget Hanya Di Homepage Dan Halaman Posting Saja
• Membuat Daftar Isi Tampilan Explorer
• Membuat Artikel Terkait / Related Post
• Cara Menampilkan Status YM Di Blog
• Cara Membuat Menu Navigasi BreadCrumb
• Cara Membuat Back To Top Dengan JQuery
• Cara Daftar Envolve Dan Memasang Widget Envolve Di Blog
• Cara Membuat Widget Icon Burung Terbang Twitter
• Cara Membuat Menu Horizontal Drop Down
• Cara Membuat Link Open New Tab
• Memasang Tombol Komentar Klasik Di Atas Kotak Komentar Blog
• Cara Memasang Lagu Di Blog
• Cara Membuat Iklan Melayang Dengan Tombol Close
• Cara Membuat Scroll Pada Kotak Komentar Blogger
• Cara Menyembunyikan NavBar Pada Blogger
• Cara membuat Tab View
• Scan Blog atau Website Anda
• Cara Membuat Daftar Isi
• Cara Memasang Widget Translate Pada Blog
• Pasang Widget Internet Speed Test Di Blog Anda
• Menambahkan Reply Buttoon Pada Komentar Blogger

Subcribe Via Email :

Jika Anda Menyukai Artikel Blog ini, Masukan Alamat Email Anda Pada Kolom di Bawah, Maka Anda Akan Mendapatkan Kiriman Email Setiap Kali Ada Posting Baru. Terima Kasih Atas Partisifasinya

Enter Your Email Address :