The Personal Blog

Mengenai Saya

Foto saya
Manado, sulawesi utara, Indonesia
Hoby ngeblog,Main Band,Adventure dan Billiard..

Jcarousel Dengan Jquery


Fungsi dari jcarousel ini bisa untuk banyak hal salah satunya bisa untuk Foto Galery,dengan menggunakan Jquery cenderung lebih ringan dari javascript yang lainnya.




Untuk cara membuatnya silahkan ikuti langkah-langkah dibawah ini:

1.Silahkan login ke Blogger
2.Pada Dasbor Klik Tata Letak
3.Klik Edit Html ->> Expand Template Widget
4.Kemudian copy paste code berikut dan letakan di atas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

5.Copy Paste Lagi Code Berikut dan letakan di bawah code diatas

<script src='http://hapiajavascript.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'/>
<script>

jQuery(document).ready(function() {
jQuery(&#39;#mycarousel&#39;).jcarousel();
});

</script>

6.Copy Code Css Berikut dan letakan di atas code ]]></b:skin>

.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 10px;
background: #f0f0f0;
border: 1px solid #333;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 245px;
padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 245px;
height: 75px;
}

.jcarousel-skin-tango .jcarousel-item {
width: 75px;
height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPbh6LcQ3kG3F2vu_zLojyFS_q58MuKkiZRhPj79nCThC0s593aCksK5RRSyM7BHGy0zyTMHtQk366CDaOQqA0KYASrkz0vGvUSMmgVUas0OILRckaqcPRjx2bGb-jAPMEt65mHyUqFM/s1600/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
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: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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEz8An5cIXeUNACgfVaZIbxpVk7soLccS7UiqmES9axksBZ0jejuzicDhbWwi0r9liFrXLFnATxIND8WyVwWKIZ7nH1DS4epq3K_ZKf6wX5thPnGxPw6_FKBJqRKX49m_B3xGWA4lM2bg/s1600/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
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:active {
cursor: default;
background-position: -96px 0;
}

Lalu Simpan Template

7.Langkah Terakhir Klik Add Gadget ->> Html/javascript dan masukan code di bawah ini ke dalamnya..

<div class="jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"><div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;"><ul class="jcarousel-list jcarousel-list-horizontal" id="mycarousel" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 850px;"><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li></ul></div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div><div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"></div></div></div>

8.klik Simpan

Sumber artikel http://sorgalla.com/projects/jcarousel

ARTIKEL TERKAIT



7 komentar:

Unknown mengatakan...

bagus buat biar tambah cantik...hhiehieheie....salutate!

Koko Bota mengatakan...

wahhhh nice info sob......:)

sukses trus......

salam blogger......

Muza elbanaf mengatakan...

Tengkyu tutorialnya, bisa buat mempermanis blog nh...hehe

Sukses sll n salam ukhuwah

I'm → Botzzz mengatakan...

@Belantara
@Blogger tutorial
@muza

mkasih ya dah mampir...........:)

Hanya Seorang Sahabat mengatakan...

template nya keren sob.. simple !!

nice post & slm sahabat.

Ella mengatakan...

info yang berguna, mang seringkali berat kalau blog harus disi gambar-gambar tapi kalo pake yg ini bisa lebih ringan ya..

koko bota mengatakan...

mkasih sharenya ahhh sering2 mampir sini kayaknya menarik dapat ilmu baru.....

Posting Komentar