Pages

Rabu, 07 Desember 2011

Membuat Slider Artikel Dengan Jquery

02.19 | Diposting oleh DIMAS GENESIS | | Edit Entri
Slider artikel atau Slider related post adalah widget yang menampilkan semua artikel kita secara slide menurun ke bawah. Berikut langkah - langkah pembuatannya.
  • Klik Rancangan > Elemen Laman > Tambah Gadget.
  • Pilih HTML/JavaScript.
  • Copy semua kode di bawah ini dan paste di kolom yang ada.
<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://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";


imgr[1] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";


imgr[2] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";


imgr[3] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";


imgr[4] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";
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://72bidadari.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>


Keterangan:
Tulisan berwarna biru adalah judul widget, bisa diganti dengan judul apapun.
Tulisan berwarna merah adalah URL blog anda sendiri.
Untuk kode - kode yang lain, misalnya kode warna HTML, bisa anda edit sendiri dengan melihat kode di atas.
  • Kemudian klik simpan
Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

News Post

Google Translator

Radar

Mengenai Saya

Foto saya
hanya seorang Manusia biasa...

Followers

Diberdayakan oleh Blogger.

Labels

Ads 468x60px

Popular Posts

Categories

Blog Archive

Featured Posts Coolbthemes