Cara Membuat Random Post

baiklah pada kesempatan kali ini saya ingin berbagi tutorial lagi, mengenai 'Recent Posting'. sebelum kita lanjut kecara membuatnya, ingin saya sampaikan sedikit nie, bahwa pada postingan saya yg lalu, saya pernah membahas 'Cara Membuat Random Post 'Dinamis' di Widget', nah sekarang ini saya membahas tutorial yg sama mengenai Recent post, posting terbaru, dan disini saya sudah membuat dengan efek scrolling dan hover box dengan CSS3.



LIHAT CONTOHNYA DISINI.
Jika sobat ingin mencobanya langsung saja memasangnya, dan pemasangannya juga sangat mudah cukup dengan menyimpannya di widget. berikut cara membuatnya :


1. Buka Layout (Tata Letak) » Page Elements (Elemen Laman).
2. Klik Add a Gadget (Tambah gadget).



3. Pilih gadget HTML/JavaScript.

Lalu Copy-paste script berikut ke dalam gadget tadi.

<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:5px;
padding:0px 0px;
height:350px;
border:solid 1px #DEDEDE;
padding:2px 5px 14px 5px;
border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000;
}
#spylist:hover{border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F}
#spylist ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:100%;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i877.photobucket.com/albums/ab333/PlebitaAl100/OTHER%20PICS/line.gif) repeat-x;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}


-->
</style>
    <script language='javascript'>


imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";


imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";


imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";


imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";


imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;


boxwidth = 255;


cellspacing = 6;


borderColor = "#232c35";


bgTD = "#fff";


thumbwidth = 70;


thumbheight = 70;


fntsize = 12;


acolor = "#666";


aBold = true;


icon = " ";


text = "comments";


showPostDate = true;


summaryPost = 40;


summaryFontsize = 10;


summaryColor = "#666";


icon2 = " ";


numposts = 10;


home_page = " NAMA BLOG SOBAT";


limitspy=4
intervalspy=4000


</script>


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

KET::
- tulisan 'NAMA BLOG SOBAT'sobat tinggal ganti dengan URL BLOG sobat. 
- dan pada bagian code CSS nya, sobat bisa merubah sesuai keinginan sobat.
4. Simpan gadget.

Sekarang lihat hasilnya. Postingan anda akan tampil secara random (acak).


Selamat mencoba!