Slide Gambar Header Blog

Bagi sobat yang ingin membuat gambar foto berjalan | slide diblog dengan bantuan script dari Jquery dengan animasi transisi atau perubahan yang bergantian tentunya sangatlah bagus untuk menambah penampilan blog anda.Mungkin bisa pengganti flash.

Okylah .. ikuti caranya dibawah ini
1. Masuk ke blogger
2. Klik Rancangan >> Klik Edit HTML
3. Cari kode  ]]></b:skin>; Lalu copy pastekan kode dibawah ini tepat 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; } 

4. Copy pastekan kode dibawah ini tepat diatas kode  </head>

<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: 1000, navigation: false, delay: 5000 }); }); </script>

 Nb. 1000 ganti sesuaikan (lebar) dan mungkin bisa ditambah heigth: 200,

5. Klik simpan
6. Klik ke Elemen halaman untuk menambah widget.,Copy paste kode script dibawah ini

<div id='coin-slider'>

<a href="ALAMAT-URL" target="_blank">
        <img src="URL -GAMBAR gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>
 
<a href="ALAMAT_url" target="_blank">
        <img src="URL-gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>

<a href="ALAMAT_url" target="_blank">
        <img src="URL- gambar" />
        <span>
    Deskripsi gambar ......
        </span>
    </a>

</div>

 Nb.Ganti alamat url dengan alamat URL anda

7. Simpan dan geser sesuai yang anda kehendaki posisinya.

Smoga berhasil ... jangan lupa kasih komentar..