Pasang Related Post Slideshow JQuery

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.

Source: http://pelajaran-blog.blogspot.com/2011/06/cara-membuat-recent-related-post-jquery.html

Semoga berguna dan bermamfaat...