728x90 AdSpace

Latest News

16 November 2011

Slider Jquery

Langkah Pemasangan

1.Log masuk ke blogger dashboard anda

2.Dekat Blogger Dashboard anda-->Klik Design --> Edit Html

Cari kod
]]></b:skin>

Pastekan kod dibawah sebelum/diatas kod ]]></b:skin> tersebut


/*Slider Css*/
#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
width:320px;
height:111px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:15px;
}
#nextBtn{
left:320px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(http://1.bp.blogspot.com/-fH1rGWYTkbU/Tf6MbKOD9JI/AAAAAAAAEbc/Wz-cdPzr2Ik/s1600/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(http://1.bp.blogspot.com/-5zuaXipw548/Tf6MahaUqII/AAAAAAAAEbY/rToQ90dXLU8/s1600/btn_next.gif) no-repeat 0 0;
}
/*Slider Css*/


3.Seterusnya cari kod </head>

4.Pastekan kod dibawah sebelum/di atas kod </head>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/easySlider1.7.js-blogger.js'/>
<script>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>


5.Klik save template

6.Akhir sekali,pergi ke layout page atau design-->Add a gadget-->Html Javascript

Pastekan kod dibawah dekat situ


<div id="slider"> <ul>

<li><a href="http://www.fitri1986.blogspot.com"><img src="http://2.bp.blogspot.com/-CV9tsZBkJk0/TbzBAGUK5GI/AAAAAAAAER8/MtbkGRWP6VY/s320/7.jpg" width="320px" height="111px" /></a></li>

<li><a href="http://www.fitri1986.blogspot.com"><img src="http://2.bp.blogspot.com/-RIgyUwjqUmE/TbzBePCZjrI/AAAAAAAAESI/eRLrzc9ppiU/s320/11.jpg" width="320px" height="111px"/></a></li>

<li><a href="http://www.fitri1986.blogspot.com"><img src="http://3.bp.blogspot.com/-EDCwJlupxNI/TbzA6yQZ3JI/AAAAAAAAER4/w_c8GDCJpig/s320/4.jpg" width="320px" height="111px" /></a></li>

<li><a href="http://www.fitri1986.blogspot.com"><img src="http://4.bp.blogspot.com/-u2ZpgDjn4CU/TbzBSNCDuxI/AAAAAAAAESE/Wd8FUUNlrdU/s320/10.jpg" width="320px" height="111px" /></a></li>

<li><a href="http://www.fitri1986.blogspot.com"><img src="http://4.bp.blogspot.com/-bYQP2a0W_T8/TbzBJfKUyeI/AAAAAAAAESA/MzEg6Cwit04/s320/5.jpg" width="320px" height="111px" /></a></li>

</ul>
</div>


*kod merah(untuk gambar) dan hijau(link url)adalah untuk korang tukar.
Slider Jquery
  • Blogger Comments
  • Facebook Comments

0 ulasan:

Catat Ulasan

Top