Membuat widget Slideshow Entri

Cara membuat widget Slideshow entri pada blog

Salam BHT, Pada pertemuan kita kali ini Hotline Terkini akan mencoba share tentang cara membuat slideshow entri di blog?, Susah nggak ya ?. Akhirnya terjawab juga pertanyaan saya tadi. Akhir-akhir ini saya berkunjung ke blog temen, boleh dibilang Guru sih, dan Terjawab suadah “Cara Membuat Widget Slideshow Entri Pada Blog. Gurublog saya itu bilang” tinggal copy scriptnya , edit dikit, abis itu save. Jadi deh... Guna dari widget ini adalah memudahkan para pengunjung untuk membaca entri apa yang menarik di blog kita.

Karena di slide show tersebut bisa menampilkan gambar dari tiap postingan kita. Ada judul dan komentar yang ada di entri tersebut. Apakah anda berminat juga untuk memasang widget ini ? caranya mudah kok,. Hanya perlu waktu sebentar... daripada membuang – buang waktu mari kita langsung ke inti posting saja..

Tip membuat widget Slideshow Entri pada blog

• Login ke blog anda

• Pilih Rancangan,

• Tambah gadget

• Pilih tambah Html / Java Script

• Copy (Ctr + C) kode Html Dibawah ini, 

Berikut Script-Codenya:

<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 urlhttp://i1321.photobucket.com/albums/u555/MarlonBooketpot/BHT%20Album1/ebook2.png) 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://i1321.photobucket.com/albums/u555/MarlonBooketpot/BHT%20Album1/kumpulan%20animasi%20html/butterfly13.gif";
imgr[1] = "http://i1321.photobucket.com/albums/u555/MarlonBooketpot/BHT%20Album1/kumpulan%20animasi%20html/butterfly18.gif";
imgr[2] = "http://i1321.photobucket.com/albums/u555/MarlonBooketpot/BHT%20Album1/kumpulan%20animasi%20html/butterfly1.gif";
imgr[3] = "http://i1321.photobucket.com/albums/u555/MarlonBooketpot/BHT%20Album1/kumpulan%20animasi%20html/butterfly8.gif";
imgr[4] = "http://i1321.photobucket.com/albums/u555/MarlonBooketpot/BHT%20Album1/kumpulan%20animasi%20html/butterfly9.gif.jpg";

imgr[5] = "http://i1321.photobucket.com/albums/u555/MarlonBooketpot/BHT%20Album1/kumpulan%20animasi%20html/butterfly_2.gif.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.blogkamu.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> <small><a href=" http://onlineprivates.blogspot.com/2012/12/membuat-widget-slideshow-entri.html" target="_blank" title=" Entri Slideshow "> Slideshow Widget </a></small>

Ingat !!! jangan lupa ubah tulisan warna merah menjadi alamat url Blog anda. Dan Editlah Width ( lebar) dan Height (tinggi) sesuai dengan yang anda inginkan. Namun jika anda tidak ingin repot2 mengubah ukuran, tinggal Copas aja. Tapi jangan lupa tulisan warna merahnya di ganti.

• Paste kan (Ctr + V) script di atas kedalam Html/java script tadi
• Simpan
• Lalu atur dimana anda akan meletakan slide show tersebut
• Lalu simpan kembali.
• Selesai

Gimana sobat, Ternyata mudah ya, makanya berkunjung ke Blog Hotline Terkini lagi..

Bagikan Artikel ini via :

Share on fb Tweet Share on G+