Cara Membuat Random Post jquery Dengan Gambar

Kali ini Saya posting artikel random post jquery dengan gambar yang membuat tampilannya menjadi lebih menarik.

Seperti di bawah inilah screenshot untuk random post dengan gambar.

Tanpa berlama-lama Saya akan memberitahu cara membuat random post jquery dengan gambar.

Ikuti cara di bawah ini :

• Login ke blogger.com , jika sudah,
• Pilih Tata Letak
• Tambahkan gadget, pilih HTML/JavaScript
• Copas script di bawah ini di kotak widget

haha

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><center><strong>RANDOM POST</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] = "https://lh4.googleusercontent.com/-zmvEs7dtp3U/T9L0Ke6YvXI/AAAAAAAAA0k/5xApt7ciJwU/s128/logo.png";
imgr[1] = "https://lh4.googleusercontent.com/-zmvEs7dtp3U/T9L0Ke6YvXI/AAAAAAAAA0k/5xApt7ciJwU/s128/logo.png";
imgr[2] = "https://lh4.googleusercontent.com/-zmvEs7dtp3U/T9L0Ke6YvXI/AAAAAAAAA0k/5xApt7ciJwU/s128/logo.png";
imgr[3] = "https://lh4.googleusercontent.com/-zmvEs7dtp3U/T9L0Ke6YvXI/AAAAAAAAA0k/5xApt7ciJwU/s128/logo.png";
imgr[4] = "https://lh4.googleusercontent.com/-zmvEs7dtp3U/T9L0Ke6YvXI/AAAAAAAAA0k/5xApt7ciJwU/s128/logo.png";
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://suryachandragobel.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://sundaboy.googlecode.com/files/Artikel%20Terkait%20berkedip.txt' type='text/javascript'></script>
</div></center>

Keterangan :

- RANDOM POST = Judul Widget Random Post
- height:300px; = Tinggi Widget
- width:100%; = Lebar Widget ( 100% akan menyesuaikan secara otomatis dengan ukuran Widget)
- numposts = 100; = Jumlah Postingan yang akan di munculkan

• Ganti url http://suryachandragobel.blogspot.com/ dengan url milik sahabat.
• Simpan dan lihatlah hasilnya 

Selamat Mencoba !