Demo
Ikuti Langkah - langkah berikut:
1. Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home
2. Langsung tuju ke halaman layout atau tata letak, dan klik edit html -template
3. Beri centang pada expand Template widget
4. Letakkan kode berikut di atas kode ]]></b:skin>
/* 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; }
5. Letakkan kode dibawah ini diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://vittoproject.googlecode.com/files/coin-slider.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('#coin-slider').coinslider({ width: 563, high:300, navigation: true, delay: 5000 }); }); </script>
Width: 563 : silahkan anda sesuaikan dengan lebar tampilan gambar yang anda inginkan, usahakan gambar sudah di atur ke ukuran yang sesuai, biar tampak manis dilihat.
6. Simpan, kemudian klik tata letak
7. Tambahkan gadget html/java script kemudian copas kode berikut:
<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>
Silahkan ganti Link letak gambar dengan lokasi penyimpanan gambar anda.
Jika semuanya benar, kamu akan mendapatkan Slide gambar yang cantik di blog anda.
Selamat mencoba..
trims nih masVitto, sudah dicoba dan hasilnya oke..
BalasHapushehehe... sama - sama mas... terima kasih sudah mau mencoba tutorial dari blog saya.... semoga bisa bermanfaat.
BalasHapuslangsung nyoba ah..baru nih ilmunya.
BalasHapusterima kasih infonya, saya minta kopiannya dan nanti saya link ya, kunjungi balik aku di http://s-surya62.blogspot.com
BalasHapus@ Firmanpratama : silakan gan... semoga membantu.
BalasHapus@Info toko : Ok makasih telah berkunjung, blog agan sudah saya kunjungi. nice blog.
Makasih info nya gand..
BalasHapusblog walking ya..
http://harunrips.blogspot.com
Mas, script di atas kira apa bisa dipasang di blog wp ?
BalasHapusterima kasih
Terimakasih ya tipsnya.. salam blogger..
BalasHapusartikel yg bagus dan menarik ulasannya nie bro, dan aku suka dgn cara penulisannya yg lugas, dan sekalian bagi teman2 yg suka dengan film box office terbaru dan ter update tiap hari, silakan kunjungi situsnya loe, makasi juga buat admin disini ok, atas artikelnya mkasi dan keep blogging bro gbu.
BalasHapusmas mohon bantuanya saya menggunakan template dari artister mas,, dan ketka saya pake slidernya knpa jadisidebar saya ga sejajar sengan slidenya,, mohon bantuaannya secepatnya...
BalasHapuswww.acelic.net
mantab banget bro.. thanks ya
BalasHapus