Cara Mudah membuat Related Post Slide di Blogspot

Cara Mudah membuat Related Post Slide di Blogspot. Cara yang akan saya share kali ini tentang cara menampilkan artikel di blog kita secara bergantian dari atas dan bawah. menu ini hampir sama dengan membuat scroll box di blogspot. 

Ketinggalan terlalu banyak materi jquery dalam blog ini?,jangan kuatir sob,tutorial blog ini baru memposting beberapa posts kok :D

Sebelum posting tentang bagaimana membuat recent post jQuery ini,biar kami share kembali beberapa tutorial jQuery dalam blog ini beberapa waktu lalu,diantaranya:

Nah,belum terlalu banyak khan sob,sedot buruan ya :D

Langkah Cara Membuat Related Post / Recent Post jQuery untuk Blogger

Bagi yang masih bingung seperti apa sih related post yang dimaksudkan,sobat bisa lihat contoh gambarnya dibawah ini:

Contoh yang sudah diterapkan sobat bisa lihat di sini.
Gimana sob,pingin ga punya widget kaya gitu?yuk intip gimana sih cara bikin recent post jquery blogger ini..

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard,lalu Tata Letak / Rancangankemudian klik tulisan Add New Widget atau Tambah Gadget dan pilih HTML/Javascript,lihat Gambar:

Kemudian letakkan kode berikut sob:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><center><strong>ARTIKEL DI BLOG INI</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();

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://blogkomputer12.blogspot.com/";

limitspy=4

intervalspy=4000

</script>

<div id="spylist">

<script src='https://sites.google.com/site/pujiantoroinc/Home/recent_post_berkedip.js' type='text/javascript'></script>

</div></center>

Simpan

CATATAN PENTING:

Ganti Tulisan yang berwarna merah dengan alamat URL anda. nah itu tadi posting saya yang berjudul Cara membuat Related Post Slide di Blogspot