Minggu, 01 Januari 2012

Cara Membuat SlideShow Gambar di Blog

| Minggu, 01 Januari 2012 | 1 komentar


“slidshow,blog,JQuery,”/

  • Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home 
  • Langsung tuju ke halaman layout atau tata letak, dan klik edit html -template
  • Beri centang pada expand Template widget
  • 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; }
  • 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://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>
  • 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.
  • Simpan, kemudian klik tata letak 
  • 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.
Simpan dan silahkan nikmati hasilnya
sumber : http://wahyu-production.blogspot.com/2011/12/membuat-slide-gambar-di-blog-dengan.html


Baca Juga Artikel Yang Berkaitan



1 komentar:

Rudy Hartono mengatakan...

kunjangan malam, and happy blogging

 
© Copyright 2011. All rights reserved powered by Blogger.com | Template by o-om.com - zoomtemplate.com
ILMU KIETA | Tempat Sharing Dan Bertukar Ilmu | ILMU KIETA