Hello sobat blogger! Ketemu lagi dengan saya. Pada postingan saya sebelumnya, saya telah membahas tentang
cara menambahkan effect pelangi pada link di blog dan
cara membuat text yang berputar mengelilingi mouse. Pada kesempatan kali ini, saya ingin berbagi ilmu pengetahuan saya tentang
cara memasang slide show di postingan blog.
Slideshow ini sangat bermanfaat karena slide show ini memudahkan pengunjung untuk membaca postingan blog kita. Slideshow juga dapat menampilkan gambar yang ada di setiap postingan kita. Silakan simak langkah-langkah cara membuatnya.
Berikut
cara memasang slideshow di postingan blog ::
1. Login dulu ke blogger
2. Pilih tata letak dan kemudian pilih tambah gadget
3. Pilih HTML/JavaScript
4. Masukkan kode-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 = "Link URL Blog Anda";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div> <small><a href="Letakkan link kategori blog Anda" target="_blank" title="Ganti ini dengan judul yang Anda sukai"> Widget Slideshow</a></small>
NB ::
[-] Tulisan yang berwarna merah adalah link blog Anda
[-] Tulisan yang berwarna biru muda adalah link kategori blog Anda
[-] Tulisan yang berwarna judul adalah judul tampilan slide shownya
[-] Untuk ukuran slideshow, Anda bisa mengubahnya di bagian width (lebar) dan height (tinggi) sesuai dengan yang Anda sukai.
5. Kemudian tinggal di save
6. Selesai.
Title : Memasang Slideshow di Postingan Blog
Description : Hello sobat blogger! Ketemu lagi dengan saya. Pada postingan saya sebelumnya, saya telah membahas tentang cara menambahkan effect pelangi ...