Untuk cara membuatnya :
- Login blogger
- Rancangan, Edit Html
- Cari kode ]]></b:skin> lalu letakkan kode berikut diatas kode tadi : Klik disini untik DEMO
/*--------Slide show-------------*/
.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;
}
Selanjutnya cari kode
</head> lalu letakkan kode di bwah ini diatas kode tadi :
<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>
Simpan template..........
Selanjutnya simpan kode berikut Pada edit Html postingan kawan atau pada Gadget Html/ Java script Sesuai kebutuhan........
<div id="coin-slider">
<a href="Link target gambar" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4DStZnx_kSaYWbhQ-3MxmsnAnHCCDrHh3gUhHJVjSvJI7kLxS61k9ZbScBf5t2RbGYjKHR3uIYGM3D914RC_zQEjAx0tEgAmxYCd0Z4jFvC3x4FAKjCi1wRWnS2xkTGzPghFUcWSAjAg/s1600/imajinasi-komentar.png" />Keterangan gambar</a>
<a href="Link target gambar" target="_blank">
<img src="http://www.startablog101.com/wp-content/uploads/2010/01/do-i-need-a-blog.jpg" />Keterangan gambar</a>
<a href="Link target gambar" target="_blank">
<img src="http://1.bp.blogspot.com/-qAx2osufQeM/Tg9e2pdmk_I/AAAAAAAAAV0/XFWcP4bvlVM/s1600/apakah-blog-itu.jpg" />Keterangan Gambar</a>
</div>
Yang berwarna biru silahkan ganti sesuai kebutuhan.....
namun terkadang cara ini tidak cocok pada sebagian Template,,, jadi coba saja dulu...
Selamat mencoba
Title : Cara membuat Slideshow Gambar (with jQuery)
Description : Untuk cara membuatnya : Login blogger Rancangan, Edit Html Cari kode ]]></b:skin> lalu letakkan kode berikut diatas kode tadi...