Pilih Warna Kesukaan Sobat Untuk Menggati Warna Background/Latar Blog Ini

Pasang Related Post Slideshow JQuery

Diposting oleh Hasan_Bawafi on Senin, 02 Januari 2012

Helo sob! Postingan yang ini juga masih berhubungan dengan tutorial blog. Lagi semangat-semangatnya postingin tutorial blog nih, hehehe. Ok! Untuk tutorial kali ini kita akan mencoba membuat "Related Post Slideshow JQuery". Nantinya, blog sobat akan menampilkan related post atau artikel terkait secara acak dengan efek slideshow beserta image thumbnail dari gambar postingan sobat. Cara ini telah saya coba dan terapkan pada blog saya mb-ebook.blogspot.com.

Seperti dibawah inilah tampilan related post slideshow dengan JQuery:



Gimana, tertarik pingin membuatnya? Lihat caranya dibawah ini sob.

Berikut Caranya:
  •  
  • Login ke akun blog sobat.
  • Klik menu "Rancangan" --> "Elemen Halaman" --> "Tambah Widget" --> "HTML/JavaScript", kemudian pastekan script dibawah ini pada bagian kolom:
<script src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script><center><strong>Artikel Acak</strong></center>
<center>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:1px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:100%;
padding: 0px 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
width:100%;
font-size:10px;
height:12px;
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:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:12px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://i.imgur.com/HDJBe.jpg";

imgr[1] = "http://i.imgur.com/HDJBe.jpg";

imgr[2] = "http://i.imgur.com/HDJBe.jpg";

imgr[3] = "http://i.imgur.com/HDJBe.jpg";

imgr[4] = "http://i.imgur.com/HDJBe.jpg";
showRandomImg = true;

boxwidth = 200;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 50;

thumbheight = 50;

fntsize = 9;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 100;

home_page = "http://namablogsobat.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/recentpostthumbspy-min.js' type='text/javascript'></script>
</div></center>
    *NB: -Sobat dapat mengganti "Artikel Acak" dengan judul widget jQuery related post sobat. -Sobat dapat mengganti "http://i.imgur.com/HDJBe.jpg" dengan gambar thumbnail sobat sendiri. (gambar ini akan muncul saat sebuah posting tidak mengunggah sebuah gambar). -Gantilah "http://namablogsobat.blogspot.com/" dengan alamat blog sobat.
  • Simpan dan segera lihat hasilnya.

{ 0 komentar... read them below or add one }

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58 :59 :60 :61
:62 :63

Posting Komentar

Get Free Music at www.divine-music.info
Get Free Music at www.divine-music.info

Free Music at divine-music.info