Selasa, 29 Maret 2011

Cara Membuat Slide Foto Dengan jQuery

Anda pengen mempercantik blog anda dengan slide slide foto yang menarik??slide-slide yang dapat berganti-ganti gaya saat foto sedang berganti dengan foto lain??

OK Let’s Begin.



  • Silakan log in blog anda
  • Setelah itu masuk design
  • Klik Edit HTML
  • Terlebih dulu download full emplates anda
  • Cari kode HTML ]]></b:skin> (untuk memudahkan pencarian gunakan ctrl + F/F3)
  • Jika sudah anda temukan paste kode di bawah ini di atasnya :


/* 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; }
Setelah itu cari kode </head> dan paste kode dibawah ini di atasnya :


<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() { $(&#39;#coin-slider&#39;).coinslider({ width: 563, navigation: false, delay: 5000 }); }); </script>


Note : 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.
  • Jika sudah klik Save Templates.
  • Klik tata letak/page elemen.
  • Klik add gadget
  • Copy code di bawah ini :
<div id='coin-slider'>
<a href="url_gambar_anda" target="_blank">
<img src=" image_link_location " />
<span>
Deskripsi gambar
</span>
</a>
<a href=" url_gambar_anda " target="_blank">
<img src=" image_link_location " />
<span>
Deskripsi gambar
</span>
</a>
<a href=" url_gambar_anda " target="_blank">
<img src="image_link_location" />
<span>
Deskripsi gambar
</span>
</a>

</div>


· Jika sudah klik save, dan view blog anda.


Blink Blink.... Blog anda sudah berslide Foto, Semoga bermanfaat...:D






Label : zanies xxukfourzerofivexx ...:D

facebook.com/zimosty.zaniiez

0 komentar:

Posting Komentar