Cara Pasang Widget Foto Gallery di Blog
JOGLIO.widget keren untuk foto gallery menggunakan jCarousel bisa di gunakan pada banyak hal. salah satunya adalah foto gallery. jCarousel sangat bagus karna hanya menggunakan sedikit tempat untuk memasang banyak gambar atau content.
Dengan menggunakan jQuery jCarousel yang cenderung lebih ringan dari pada javascript yang lainnya, menjadikan jCarousel lebih multi fungsi.
Cara Membuat jCarousel Dengan jQuery adalah sebagai berikut :
- Silahkan login keBlogger dengan account anda.
- Pergi Ke "Tata Letak" kemudian "Edit HTML".
- Gunakan jQuery versi 1.4.2, copy paste code berikut dan letakkan di <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
- Copy paste code berikut dan letakkan dibawah code diatas :
<script src='http://hapiajavascript.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'/><script>
jQuery(document).ready(function() {jQuery('#mycarousel').jcarousel();});
</script>
- copy code CSS berikut dan pastekan diatas]]></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/AVvXsEg3dni-Yao2FSuHuTIGZlSLArpvrAJkkKnUki_K1ZKrhNMkWwmfKPzejwttoDvebIJqD_C9iKPSJJ0hyPd186gFk3Vp9Vjg-YBo7GXLdmxGlYd_a9r1Y5n5olD1KmSXhEEsy-lSWqQzZDk/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/AVvXsEgXrq1cboYdFgf18XtmWMTBWOKnzdwEos2llnksQyzOBd7hVj9-fxxA-EjJYqoqZiowYL8wzlPJ6QiRFW4PlooLNzERpZjvdkZO4-kBbLl3UXOwpwdPB012DxbOKlD-mG1FopzSQDeBiB8/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;
}
- Simpan Template.
- Letakkan code berikut di tempat yang anda inginkan :
<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>
# Pada code di atas ini disediakan 7 link gambar. silahkan anda tambah dengan perintah
<li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li>.
# Lebar dan tinggi gambar pada tampilan adalah 75 pixel.
Selamat mencoba dan happy blogging.
Artikel Unik dan menarik lainnya :
- 1.kumpulan dari gambar yang ngakak abiz !!
- 2.Kumpulan gambar-gambar aneh dan sulit diterima akal
- 3.kumpulan barang dengan design yang inspiratif dan kreatif
- 4.kumpulan Kendaraan keren yang unik & inovatif
- 5.Kumpulan karya Fotography yang Menakjubkan
- 6.Kumpulan foto-foto keren cewek bertato
ARTIKEL LAINNYA :
SECURITY======================================
TRIK WINDOWS============================
DESIGN========================================
INTERNET==================================
EARN $==================================
0 comments:
Post a Comment