Salam blogger, pada saat ini saya mau share Trick sederhana buat sobat blogger yang ingin mempercantik blog dengan Slide Show Recent Post cara membuat-nya sangat mudah dan nggak repot, apalagi Dengan
membuat Slide Show pada halaman blog kita, pengunjung akan lebih mudah
lagi untuk menyelusuri daftar isi pada blog yang kita buat. seperti contoh di bawah ini "
Bagaimana sobat ingin membuat-nya juga, jika sobat ingin membuat-nya ikuti langkah berikut :
1. Login ke akun Blogger sobat
2. Klik Rancangan >> Elemen Laman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukan kode berikut :
- Url yang berwarna merah ganti dengan Url sobat
- Angka yang berwarna biru jumlah post yang ingin di tampilkan
- Supaya tidak konflik antara jQuery
dan MooTools anda tambahkan kode script di bawah ini :
1. Login ke akun Blogger sobat
2. Klik Rancangan >> Elemen Laman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukan kode berikut :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--
#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 = 20;
home_page = "nama url kamu";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js" type="text/javascript">
</script></div>
Note :
- Url yang berwarna merah ganti dengan Url sobat
- Angka yang berwarna biru jumlah post yang ingin di tampilkan
<script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> jQuery.noConflict(); </script>
6. Simpan dan lihat hasilnya :)
Kalau udah berhasil jangan lupa beri komentar dan bilang terima kasih ya...