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...

Seluruh artikel postingan pada blog ini dapat di copy-paste dengan syarat menuliskan sumbernya dan memasang link aktif blog ini pada blog sobat | Bagi Sobat yang menemukan link download bermasalah (brokenlink) dapat memberitahu saya di sini

Gunakan layanan 4shared generator (klik di sini ) untuk mempermudah mendonwload file dari 4shared tanpa perlu login.

Artikel Terkait:

Blog Tutorial

• Alternatif Expand Template Widget
• Cara Membuat Widget Random Article
• Membuat Sendiri Aplikasi Android Untuk Blog
• Membuat Form Kontak Admin
• Pasang Tombol Sharing Lintas.Me
• Membuat Sendiri Aplikasi Symbian Untuk Blog
• Membuat Email Dengan Domain Sendiri Gratis
• Cara Mengarahkan Gambar Google Ke Blog
• Membuat Judul Blog Bergerak Di Browser
• Membuat Anti Select Text Pada Postingan
• Mengatasi Tata Letak Blog Yang Tidak Teratur
• Widget Free Proxy
• Cara Pasang Slider Carousel Di Blog
• Menampilkan Widget Hanya Pada Halaman Postingan
• Pasang Widget Follower Box Twitter
• Widget Random Ayat Al-Qur'an Di Blog
• Membuat Footer 3 Kolom Di Blog
• Widget Random Kata-Kata Mutiara Islami
• Parse HTML Tool
• Cara Praktis Pasang Foto Di Hasil Pencarian Google
• Pasang Meta Tag Friendly SEO Super
• Buat Flash Banner Online
• Cara Pasang Widget Pop-Up Di Tengah Blog
• Cara Upload File Flash Ke Google Site
• Widget Cek Lokasi Dari No.Handphone