Membuat Recent Post Dengan Tampilan Slide Show

Salam Blogger.......!!!

Ok sob kalau dulu Syahrul Khana  pernah share tentang tutorial bagaimana cara Membuat Buku Tamu Yang Buka Tutup, kali ini Syahrul Khana akan share tentang bagaimana cara Membuat Recent Post Dengan Tampilan Slide Show untuk menambah kesan yang mempesona di blog sobat-sobat sekalian. :D hehehe...!!! 

Cara ini juga berguna untuk mempermudah para pengunjung blog kita untuk mencari Artikel yang Mereka inginkan, karena dengan tampilan slide show ini secara otomatis menampilkan postingan terbaru sampai postingan yang paling lama dengan gambar dan secara satu persatu menggeser tampilan sebelum'a alias Slide Show, kalau kita lihat sebetul'a sangat banyak sob, cara untuk membuat slide show pada postingan di blog, tapi yang Syahrul Khana Posting kali ini adalah cara yang paling gampang untuk memasang'a di blog. Ok sobat, kalau sobat tertarik untuk memasang slide show ini di blog sobat, silahkan ikuti langkah langkah dibawah ini....!!!

1. Login ke blog dengan akun sobat masing2

2. Klik Rancangan ---> Elemen Halaman ---> Tambah Gadget

3. Kemudian Pilih HTML/JavaScript

4. Masukkan 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] = "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 = 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://www.syahrul-khana.co.cc/";

limitspy=4
intervalspy=4000

</script>

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

NB :

Ganti tulisan yang berwarna hijau dengan URL sobat







Selamat Mencoba Sob......
Good Luck........!!!!

Artikel Terkait:

Tips Nge-Blog

• Cara Membuat Scroll Tabel Pada Posting Blog
• Tips Atasi Error "ID Widget Seharusnya Unik"
• Membuat Buku Tamu Yang Buka Tutup
• Cara Membuat Visitor Histats
• Cara Membuat Fan Page Facebook Auto Hide
• Membuat agar blog anda ringan di buka di HP / mobile phone anda
• Cara Menambahkan Status YM di Bawah Profil
• Mengganti Cursor di Blog
• Script Untuk Meminta Seorang Pengunjung Memasukan Namanya Pada Sebuah Halaman Blog
• Membuat Efek Suara Pada Blog
• Membuat Text Roller
• Cara Menambahkan Tombol &quot;Like&quot; Facebook di Blog

Posted in: Tips Nge-Blog