Monday, August 1, 2011

Rescent Post Dengan Efek Slide Jquery

Sesuai janji saya mengenai jquery. Berikut saya ingin berbagi tips membuat rescent post (artikel terbaru) menggunakan efek slide jquery.

Berikut langkah-langkahnya.
1. Login ke blog anda
2. Klik Rancangan > Elemen Laman > Tambah Gadget > pilih HTML/JavaScript
3. Kemudian copas kode Javascript dan jquery dibawah ini

<script src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#rpslider {
overflow:hidden;
margin:5px auto;
padding:0px 0px;
height:400px;
font:10px Georgia,"Times New Roman", Times, serif;
}
#rpslider ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#rpslider li {
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:50px;
overflow: hidden;
background-color:#fff;
border:1px solid #FF0000;
}

#rpslider li a {
text-decoration:none;
color:#FF0000;
height:16px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#rpslider li .news-text {
display:block;
padding:5px;
text-align:justify;
color:#000000;
}
#rpslider li img {
float:left;
margin-right:5px;
background:#800080;
border:0;
width:50px;
height:50px;
}
.spydate{
overflow:hidden;
padding:2px 0px;
margin:1px 0px 0px 0px;
}
</style>
<script language="Javascript" type="text/javascript">//<![CDATA[
jmlrepos = 10;
tampilspy = 4;
durasispy = 5000;
alamatblog = "http://mariozoner.blogspot.com";
eusiartikel = true;
jmlkarpos = 100;
//]]></script>
<div id="rpslider">
<script src='https://sites.google.com/site/mariozoner/gb-mario/spysidemod.min.js' type='text/javascript'></script>
</div>

Sedikit keterangan mengenai kode berwarna merah di atas
- #rpsidebarspy {
height:400px;                                                              ->  tinggi widget
font:10px Georgia,"Times New Roman", Times, serif;  -> ukuran dan jenis font
}

- #rpsidebarspy ul{
width:100%; }           -> lebar widget. 100% artinya lebar widget mengikuti lebar halaman. soba bisa menggantinya  sesuai lebar halman blog sobat

- #rpsidebarspy li {
height:50px;                             -> tinggi item widget
background-color:#fff;             -> warna background
border:1px solid #FF0000;     -> warnar border
}

- #rpsidebarspy li .news-text {
color:#000000;                       - > warna text konten
}
- #rpsidebarspy li img {
float:left;             -> letak gambar konten. apabila ingin dikanan ganti menjadi right
width:50px;       -> lebar foto yg tampil
height:50px;       -> tinggi foto yg tampil
}

tampilspy = 4;                                                       -> Jumlah artikel yang ditampilkan
durasispy = 5000;                                                 -> kecepatan pergantian slide
alamatblog = "http://mariozoner.blogspot.com";      -> ganti dengan url blog sobat

4. Klik simpan dan lihat hasilnya.

Semoga bermanfaat.


Related Post

2 comments:

  1. wew...
    patut dicoba nich, mantap gan. . .
    owh ya, fol sukses, folback y. . .
    mainpedia.blogspot.com

    ReplyDelete
  2. @Mainpedia Admin'z : thanks. siip, segera ke tkp :)

    ReplyDelete

Mohon tinggalkan jejak/komentar sobat disini. Dilarang SPAM. Okey...