SERVIS SANYO BLUMBUNGAN

.
Home » , » cara pasang Feature Slider Jquery di blogspot

cara pasang Feature Slider Jquery di blogspot

untuk memasang widget slider caranya cukup simple dan tidak begitu rumit cuma mengikuti beberapa langkah-langkah mudah dan edit html yang singkat.

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(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/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(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/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:

  1. Wah thanks atas tutornya sob . .
    ini yg ane cari2 baru ktmu dsni :)

    BalasHapus
  2. oke sama -sama gan moga bermamfaat..:k4

    BalasHapus
  3. gan kalau bisa sertakan dengan gambar, contoh jadinya. thanks

    BalasHapus
  4. anonim@

    memang 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

    BalasHapus
  5. Balasan
    1. thanks atas kunjungan agan..nanti saya main2 juga ke tempa agan ..salam sukses

      Hapus
  6. Gan kok image nya gak nonggol ya...??

    BalasHapus
    Balasan
    1. kok bisa gitu gan?? ada yang salah pastinya..
      coba di teliti lebih detail dan perhatikan langkah2nya

      Hapus
  7. Thx :)
    http://frenzyyakuza.blogspot.com

    BalasHapus
  8. gan link gambar itu gimana cara dapetinya ya saya bingung, maaf newbie

    BalasHapus
    Balasan
    1. ambil gambar dari posting yang ada biar sesuai dengan isi posting yang di letakkan di widget tersebut atau
      upload gambar ke hosting seperti photobucket dll lalu ambil link gambarnya.

      Hapus

ayukk berikan tanggapan di kotak komentar ini

DAFTAR POST

Translate blog

DONASI/DONATION

donation this blog my bank

BANK: BRI atas nama: abdus syukkur
No Rek: 6470-01-015176-538

Popular Posts

komentar terbaru

Servis pompa air blumbungan

google+

.comment-content a {display: none;}