Pertama login ke blogger anda selanjutna klik template trus edit html dan jangan lupa ceklist expand widget template
Kemudian cari kode ]]></b:skin> setelah ketemu masukkan code berikut diatasnya :
/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
Kemudian cari code </head> setelah ketemu masukkan code berikut diatasnya :
Trus simpan template anda tapi ini belum berakhir lho...
Kembali ke layout/tata letak klik add gadget trus klik html/java script dan masukkan code ini ke dalamnya :
<div id='coin-slider'> <a href="imgN_url" target="_blank"> <img src="link letak gambar" /> <span> Deskripsi gambar...... </span> </a>
<a href="imgN_url" target="_blank"> <img src="link letak gambar" /> <span> Deskripsi gambar...... </span> </a>
<a href="imgN_url" target="_blank"> <img src="link letak gambar" /> <span> Deskripsi gambar...... </span> </a> </div>
Trus save and selesai dan lihat hasil karya anda....
note :
width: 563px bisa anda tukar terserah anda dan imgN_url dan link letak gambar isi dengan link gambar anda
source by mung tutorial
Kemudian cari kode ]]></b:skin> setelah ketemu masukkan code berikut diatasnya :
/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
Kemudian cari code </head> setelah ketemu masukkan code berikut diatasnya :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('#coin-slider').coinslider({ width: 563, navigation: false, delay: 5000 }); }); </script>
Kembali ke layout/tata letak klik add gadget trus klik html/java script dan masukkan code ini ke dalamnya :
<div id='coin-slider'> <a href="imgN_url" target="_blank"> <img src="link letak gambar" /> <span> Deskripsi gambar...... </span> </a>
<a href="imgN_url" target="_blank"> <img src="link letak gambar" /> <span> Deskripsi gambar...... </span> </a>
<a href="imgN_url" target="_blank"> <img src="link letak gambar" /> <span> Deskripsi gambar...... </span> </a> </div>
Trus save and selesai dan lihat hasil karya anda....
note :
width: 563px bisa anda tukar terserah anda dan imgN_url dan link letak gambar isi dengan link gambar anda
source by mung tutorial
1 Response to "Slideshow jquery by mung"
makasih infonya sangat bermanfaat sekali dan mudah dipahami
Balas