Sunday, July 1, 2012

Membuat Scroll Gambar Dengan Plugin jCarousel di Blogger



Ingin menampilkan gambar di blog kamu dengan menggunakan JQuery ? nah kali ini saya akan membagikan salah satu plugin jQuery yang bernama jCarousel. Sebuah plugin yang di buat oleh Mr. Jan Sorgalla yang digunakan secara luas untuk mengendalikan daftar item (baik gambar, video atau teks) dalam rangka horisontal atau vertikal. Item dapat bergerak secara bolak-balik dengan animasi. Widget ini dapat digunakan baik sebagai scroller gambar atau textscroller. Hal ini dapat dikendalikan secara eksternal dengan kedua JavaScript dan AJAX dan tentu saja php. Jadi plugin kode pintar yang dapat diubah dengan semua fungsi jQuery. Oke cukup penjelasannya, langsung menuju tutorialnya.

1. Masuk ke Blogger kamu.

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu masukkan kode di bawah ini kedalam kotak HTML/Javascript tadi.

<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src='http://mybloggertricks.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'></script>
<script src='http://mybloggertricks.googlecode.com/files/mycarousel.js' type='text/javascript'></script>
  <style>
.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
   border-radius: 10px;
    background: #F0F6F9;
   
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
   width:425px;     padding: 20px 40px;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  425px;     height: 75px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}
.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}
/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(http://mybloggertricks.googlecode.com/files/next-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
/**
*  Vertical Buttons
*/
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-next-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-vertical:focus {
    background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
    background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

  </style>
 
  <ul id="mycarousel" class="jcarousel-skin-tango">
   
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> 

<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> 
   
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>   

</ul> 

NOTE :

- Untuk mengubah lebar widget, ubah angka di bagian width:425px;
- Untuk mengubah SEMUA lebar gambar pada widget, ubah angka di bagian width:  425px;
- Ganti tanda # dengan alamat url yang akan dialihkan, atau mungki kamu bisa menaruh url facebook kamu, dll
- Ganti IMAGE LINK dengan alamat URL gambar yang kamu simpan.
- Ganti angka di bagian width="75" height="75" untuk mengubah lebar serta tinggi gambar yang kamu tampilkan.
- Ganti Description dengan deskripsi gambar kamu, sehingga mesin pencari bisa mengindeks gambar kamu dan membuat blog kamu mendapatkan peringkat yang bagus di mesin pencari.  
- jika ingin menambahkan gambar, cukup tambahkan kode



<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>   

sebelum kode </ul>  yang terletak paling bawah.

3. Simpan dan kamu lihat hasilnya :) thanks mybloggertricks.com :D

Postingan Terkait:

19 comments:

  1. kita harus berterima kasih kepada Mr.Jan atas aplikasinya ini dan terimakasih untuk tuan rumah blog yang sudah berbagi...keep happy blogging kawan :)

    ReplyDelete
  2. wah.. panjang banget uy. tp belum berani utak-atik.. hehehehe

    nice tutorial

    ReplyDelete
  3. wahhh keren jga nih sobat :))

    ReplyDelete
  4. Waaahhh..mantef juga nih bang tutornya..sipppp...hahhahyy

    ReplyDelete
  5. docoba dulu kang.. lumayan tambah2 ilmu.. :)

    ReplyDelete
  6. perbedaanya sama scroll widget itu apa sob?

    ReplyDelete
  7. bikin berat ga? sip sip kalau lagi pengen pasang gw kesini lagi..

    ReplyDelete
    Replies
    1. namanya juga menampilkan gambar sob, agak berat jadinya :)

      Delete
  8. hadir lagi nih untuk baca2...
    sukses yah

    ReplyDelete
    Replies
    1. sip gan, maag ya belum bisa datang hehehe

      Delete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More