bagi anda yang ingin mencoba memasang featur slider jquery ini silahkan ikuti panduan singkat dibawah ini
->> dalam keadaan login blog pergi ke menu daboard-> layout-> edit html
--> jangan lupa ceklist kotak kecil disebelah expand widget template
--> sebaiknya back-up dulu template original sebelom melakukan pengeditan
--> silahkan copy kode ini dan pate di atas kode </head>
<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap:"both",
scroll:2,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery('#featured-next-button').bind('click', function() {
carousel.next();
return false;
});
jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbGJWHpoyIOTnChU7dE2zha6gNM8nypedwx6p9A3ntMXSMtgb8ZGYjHKNAVT9F_WIuWq1LOe_IfUoMNrdAE0ZMTbARKNzqjRxlqgWJ_5gUXgT6KtD_XzNaT6sC8z0ItJ0YzO5lFbY-q3Dw/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbGJWHpoyIOTnChU7dE2zha6gNM8nypedwx6p9A3ntMXSMtgb8ZGYjHKNAVT9F_WIuWq1LOe_IfUoMNrdAE0ZMTbARKNzqjRxlqgWJ_5gUXgT6KtD_XzNaT6sC8z0ItJ0YzO5lFbY-q3Dw/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>
--> silahkan simpan template.
setelah itu anda masuk ke design-> page elemen-> add a gadget-> pilih javascript/html
--> copy pate kode dibawah ini di javascript/html
<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>
NOTA:
-silahkan ganti yang saya beri warna merah dengan link postingan blog anda yang ingin ditampilkan pada slider
- silahkan ganti yang berwarna biru dengan link/URl gambar anda .sesuaikan sendiri dengan selera anda.
selamat mencoba semoga berhasil..semoga.. tutorial blogger ini bermamfaat ...
buat pengguna wordpress yang ingin download template premium gratis silahkan
DOWNLOAD GRATIS DISINI
.happy blogging
13 Comments
Wah thanks atas tutornya sob . .
ReplyDeleteini yg ane cari2 baru ktmu dsni :)
oke sama -sama gan moga bermamfaat..:k4
ReplyDeletegan kalau bisa sertakan dengan gambar, contoh jadinya. thanks
ReplyDeleteanonim@
ReplyDeletememang sengaja saya tidak menggunakan code yang sudah ada isinya(contoh) takut pembaca malah tambah bingung.
jika anda ingin melihat contoh peletakan code link/gambar .silahkan lihat postingan terkait yang disertakan dengan contoh(code yang telah ada isinya) silahkan ke TKP http://newbeingetop.wordpress.com/2011/12/07/cara-bikin-widget-auto-slide-artikel-blog
NIce Info.Kunjung balik OK
ReplyDeletethanks atas kunjungan agan..nanti saya main2 juga ke tempa agan ..salam sukses
DeleteGan kok image nya gak nonggol ya...??
ReplyDeletekok bisa gitu gan?? ada yang salah pastinya..
Deletecoba di teliti lebih detail dan perhatikan langkah2nya
asyk langsung ke TKP deh
ReplyDeleteThx :)
ReplyDeletehttp://frenzyyakuza.blogspot.com
thank uda share
ReplyDeletehttp://www.casino261.com
gan link gambar itu gimana cara dapetinya ya saya bingung, maaf newbie
ReplyDeleteambil gambar dari posting yang ada biar sesuai dengan isi posting yang di letakkan di widget tersebut atau
Deleteupload gambar ke hosting seperti photobucket dll lalu ambil link gambarnya.