Cara Membuat Random Post Dengan Efek Slide

Mempercantik sebuah blog sepetinya sebuah keharusan yang harus di lakukan seorang blogger agar tampilan blog kita enak untukdi lihatnya.
Juga agar pengunjung di blog kita semakin ingin berlama lamaan melihat blog kita.
Salah satu cara untuk mempercantik blog kita adalah dengan membuat random post  dengan efek slide otomatis .
Coba sobat blogger perhatikan di pojok kanan atas blog saya ini.
Indah bukan........???

Jika sobat blogger ingin membuat tampilan seperti blog saya ini,ikuti langkah langkah berikut :


 

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<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:10px;
padding: 0px;
height:280px;
}
#spylist ul{
width:275px;
overflow:hidden;
list-style-type: none;
padding: 0px;
margin:0px;
}
#spylist li {
width:240px;
padding: 7px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:65px;
overflow: hidden;
background: -moz-linear-gradient(center left, #727273 0%, #ccc 40%,#ccc 90%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #727273),color-stop(0.40,

#ccc),color-stop(0.90, #ccc),color-stop(1, #ffffff));
border-style:solid;
border-left-width:10px;
border-color:#ddd;
box-shadow: 3px 4px 3px #797979;
-webkit-box-shadow: 3px 4px 3px #797979;
-moz-box-shadow: 3px 4px 3px #797979;
}
#spylist li a {
text-decoration:none;
color:#000;
font-size:14px;
font-weight:normal;
font-style:normal;
text-shadow: 1px 3px 3px #fff;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 5px 0px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
#spylist li img {
float:left;
margin-right:7px;
margin-left:7px;
background:#EFEFEF;
border:2px solid #fff;
box-shadow: -3px 2px 2px  #000;
-webkit-box-shadow: -3px 2px 2px #000;
-moz-box-shadow: -3px 2px 2px #000;
}
.spydate{
overflow:hidden;
font-size:10px;
text-shadow: 1px 2px 2px #8EABFF;
color:#455D95;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
display:none;
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#fff;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#012EB0";
aBold = false;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 60;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "URL BLOG ANDA";
limitspy=3
intervalspy=4000
</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js'

type='text/javascript'></script>
</div> 

5.Save hasil editan tadi

Selamat mencoba dan berkreasi.

Apa yang yang telah saya share ini semoga menjadi ilmu yang bermanfaat bagi sobat semua.