Widget Keren Untuk Foto Gallery

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.

Cara Membuat jCarousel Dengan jQuery
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(&#39;#mycarousel&#39;).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(http://2.bp.blogspot.com/_QeR8kbaWhLU/S_2eBVRtRlI/AAAAAAAAA0s/WwIjogoV6WI/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(http://2.bp.blogspot.com/_QeR8kbaWhLU/S_2eBMtGJ8I/AAAAAAAAA0k/_3rWtO1W5Ic/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 :





SEO


TUTORIAL BLOG


WIDGET


TOOL BLOG


ARTIKEL LAINNYA :


    SECURITY======================================


    TRIK WINDOWS============================




    DESIGN========================================

    INTERNET==================================

    EARN $==================================











    Penulis : ADMIN ~ Sebuah blog yang menyediakan berbagai macam informasi

    Artikel Widget Keren Untuk Foto Gallery ini dipublish oleh ADMIN pada hari Monday, July 16, 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Widget Keren Untuk Foto Gallery
     

    0 comments:

    Post a Comment

    Zona Download Software Gratis
    DESIGN
    SECURITY
    TOOLS WINDOWS
    • CamStudio 8  (Tool untuk merekam layar komputer ke format video)
    INTERNET
    AUDIO/VIDEO
    OTHERS