Cara Membuat Gallery Gambar dengan Efek Keren Accordion

Cara Membuat Gallery Gambar dengan efek keren accordion–Saat ini, berbagai design blog dan web sangat pesat perkembangannya. Salah satu yang berkembang adalah efek accordion. Efek accordion mempunyai suatu keunikan tersendiri dan ciri khas yang unik. Sudah banyak yang membahas tentang bagaimana cara membuat daftar isi atau menu yang menggunakan efek ini. Tetapi kali ini berbeda, saya akan memberikan cara membuat gallery gambar dengan efek keren accordion.

Berikut yang ingin melihat penampakan atas Gallery gambar dengan efek keren accordion silahkan dicek pada link yang tertera di bawah ini:

Live Preview

Cara Pembuatan Fitur Gallery Gambar dengan efek keren Accordion:

Langkah-langkah pembuatan sebagai berikut:

Login terlebih dahulu ke blogger.com
Template > Edit HTML > cari kode ‘]]></b:skin>’. Letakkan kode di bawah ini tepat di atas kode ‘]]></b:skin>’.

.accordion{position:relative;overflow:hidden}
.accordion.panel{background-color:#000; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghC231fWR2LiBmtcQuwzD9Y4ecpcNp7DFdOe-dPjRTujXdqE6FvfujVgarS1VlYj3udFVepmndXvAqeektk8piVdwAZ0-PLHKtp0tIskH9xFm8Z-JgTT3Gja8oJeT2Oj1xAtWoy0c5qEQC/s1600/preloader.gif); background-repeat:no-repeat; background-position:center center; position:absolute; overflow:hidden}
.accordion.shadow{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxwynT3OfXwOYD9EJoSWufdsjnJbc-TUxMZtyIGVQ1G8aXYeKXEhNQ7Vsjaxwm0Wj3otyjJgZ885Z06mQUbTPYeuJQVlS7v2nCi-DUIOu0EoFOiwXrDVmnRgrHdTOhj_GC0qensO9VdZhyphenhyphen/s1600/shadow.png) repeat-Y; position:absolute; right:0px; width:25px; height:100%}
.accordion.preloader{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9lxTJfygMPqjzgEqYHqtepcicKpY8UvWaZfhUTmn_EluOS6HjbS5nrcDYEEU16AjLrREDV4EWYJoO1CfrfoqmyCmfqJg8sv165b9VC0C6z3Fza2nxdVEc9AOwE7MizL-wekJZpqsXtnOg/s1600/preloader2.gif) no-repeat; width:62px; height:14px; position:absolute; z-index:15}
.accordion.caption{overflow:hidden; position:absolute; z-index:20}
.accordion .caption-background{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsAHbVvVgeDbX3ogrbKHaIqGX9m-ukH3fO9gfs9VUc8E8JOjusA7MzLNRoatrkLjBfAzJS27-D2eka5Ti_tDLdKfakLxHDvQylTr0wehlgg2G7uK_0XD6trf8ihAQ-zekMqVORU52plxTb/s1600/captionBg.png); background:rgba(0,0,0,0.5);position:absolute; width:100%; height:100%}
.accordion .caption p{color:#FFF; margin:0px; padding:10px}
.accordion .caption p a{color:#FFF}

3. Cari lagi kode </head>, lalu letakkan kode di bawah ini tepat di atas kode </head>

<script type="text/javascript" src="http://yourjavascript.com/1886331383/jquery-gridaccordion-min.js"/>
<script type='text/javascript'>jQuery(document).ready(function($){$('.accordion').gridAccordion({width:880,height:340,columns:5,distance:2,closedPanelWidth:10,closedPanelHeight:10,alignType:'centerCenter',slideshow:true,panelProperties:{0:{captionWidth:200,captionHeight:35,captionTop:30,captionLeft:30},4:{captionWidth:150,captionHeight:100,captionTop:30,captionLeft:650},7:{captionWidth:310,captionHeight:35,captionTop:350,captionLeft:40},8:{captionWidth:300,captionHeight:40,captionTop:150,captionLeft:35},11:{captionWidth:150,captionHeight:120,captionTop:300,captionLeft:30},14:{captionWidth:300,captionHeight:40,captionTop:30,captionLeft:50},16:{captionWidth:150,captionHeight:120,captionTop:150,captionLeft:10},18:{captionWidth:300,captionHeight:40,captionTop:130,captionLeft:50}}});});</script>

4. Simpan Template. Setelah itu menuju layout/tata letak > Add Gadget >HTML/Javascript. Isi dengan kode di bawah ini. Bagian judul tidak perlu diisi.

><ul class="accordion">
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1fqHDS09dBRNL1ntwHpsu4_WVMIo1IkLc_RVxqeinVV3Y2k_Sl6INR3xgJfIGHTpjAd7rUH4mZwxe5lAdxzMK0QUVEJsmELc3qTN3XydjfNxeIDiwO2Kr6Q5x-FE098NaBH1AcpqJeVR3/s1600/apple+globe.jpg"/>
<div class="caption">This is just a simple caption.</div>
</li>
<li>
<a href="http://netfori.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQx7DgpXi0hegmonoKmf6OdRbXdIR2ZXfvzNOe_II2DgWNEyn5Y0DPUvMFA1dCRJAsaz6sgXew3So_bE8pm_0RrnbDBv545zh5l8t5G8haeIUMyuQO4x52vLe6LUEx1BZKlX8mQZuzwCBN/s1600/image_asset-435771-1913660591-vga.jpg"/>
</a>
<div class="caption">Klik Gambar ini untuk menuju Blog Netfori</div>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghB-cwgW8fquSJZyHwx1rtCMumyqrRPHh27SjTItJztbdfkjtSCY-dntoiE4C_cFEfj-xo5vZt6Nn-wCeO_JMO7vsi-0n41O2dDypH72OGTpdFFPftGN8Khm245fY7HOkCba1hDTi6S4oC/s1600/image_asset-440178-1054935783-vga.jpg"/>
<div class="caption" style="width: 310px; height: 35px; left: 40px; top: 350px; opacity: 1;"><div class="caption-background" style="width: 100%; height: 100%;"><p style="width: 100%; height: 100%; opacity: 1;">Captions dapat berada di mana saja dengan ukuran sesuai selera.</p></div></div>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5PQZaGxIoR3J3gyVn1MMV9n2l1yOT8wd6B6LgCIfIaQ5pR3568B1V5yDcJfGH0XvJkc5s1EDuiyPEnswM9HNgSbMhDaFGLLRO_-DPKN5DdpikfpODW8ohmh8OE7QKtirljF2e8aWk9vT/s1600/kocatepe+mosque.jpg"/>
<div class="caption" style="width: 300px; height: 40px; left: 35px; top: 150px; opacity: 1;"><div class="caption-background" style="width: 100%; height: 100%;"><p style="width: 100%; height: 100%; opacity: 1;">Tambah<b> Link </b> contoh <a href="http://netfori.blogspot.com">~KLIK INI!!!</a> or
<input type="button" value="Buttons" />
</p></div></div>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVDwXxdTgW-z3a_bGaGAU0fsRVay0aGmVm715FKdGZiq3Zb4cAwpQpn55uupe4IVG2yMn9zhLNbJIhpbOHuFjt86PNqGRRZMZdgrT561tgbnFDCCzh2LOH6FGHesNPw5JdA9J1922E9BQ8/s1600/tunnel+of+trees.jpg"/>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI8nc1O0UiZ2MvnkwlLAd8KwrYV2tA5MLW-QPV_UZMONEvNhRtC8i55NR8Qi0o4O_6aHd10hGAY4T1TgzqYcbkuZXrC1TP2FiyZxLGwu3zh50b8sVWu5XYos0oG9cRsvMHBnbhxdteibsw/s1600/image2.jpg"/>
</li>   
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzG0R33epuPVRSIpl-zO0jHA4rqGtDVLQhuHSkECyLVuEQlp_eWByPUAdaCvy8oBAfkWgfGh2hj0xv5nHEc0dkKSctmg1VQ77qLIWXnpMDSlOALLfp8QEzYroBxi-t1ry949yTVIFPiccs/s1600/image1.jpg"/>
<div class="caption">This is just a simple caption.</div>
</li>
<li>
<a href="http://netfori.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0CNVpBEA3GEQ2I6oIy8k50XF23teaGBkzJeH1u02YZTxARAfZL1R64OZrwkO0_oCeAXx83h91v9Djl_fhLyMY7nc6dFBoFtZJh1jAfmvtI68MSk7r4TsKcGNyyNZZR186e4eRPwNeGnAE/s1600/image5.jpg"/>
</a>
<div class="caption">Klik Gambar ini untuk menuju Blog Netfori</div>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFK49gbJ7U5gXX-zRKLGaIs2E-jWuFQXIEiPhSqGR_MyjcICpvoboXPAc4hfviHaao441UpAg3DGOpyugv8FN1-BAyXM6NxnEZoACH_UqxHNDpc5Oj71_i39oKvTQpx6eTP9GXc2EltOCA/s1600/image4.jpg"/>
<div class="caption" style="width: 300px; height: 40px; left: 35px; top: 150px; opacity: 1;"><div class="caption-background" style="width: 100%; height: 100%;"><p style="width: 100%; height: 100%; opacity: 1;">Tambahkan 
<input type="button" value="Buttons" />
</p></div></div>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtHXdlkng7hzzjNX1B0kb98uKxsUS8l3Ippsr0DAI5tNiaKTuQT8CKbchgQKYA0OgmV6QDLxyCV2UVuwEfii9bIz_8eD3MiKLOE1pv7T40yngPPgx3bEFVKewTTbXSmgB77ImYgBiLh9o/s1600/image3.jpg"/>
<div class="caption" style="width: 310px; height: 35px; left: 40px; top: 350px; opacity: 1;"><div class="caption-background" style="width: 100%; height: 100%;"><p style="width: 100%; height: 100%; opacity: 1;">Captions dapat berada di mana saja dengan ukuran sesuai selera.</p></div></div>
</li>     
</ul>

5. Selesai sudah pembuatan gallery gambar dengan efek accordion yang keren!

Modifikasi Fitur Accordion

Fitur ini hanya dapat berjalan baik bila sang admin dapat menelaah kode di atas dengan cermat, sehingga dapat memunculkan efek yang bagus dan tidak semrawutan. Kenapa? Karena trik ini harus disesuaikan dengan template masing-masing blog. Saya hanya memberikan sebagian kecil yang sekiranya perlu diubah dan diatur lebih lanjut.

Pada kode nomor tiga, kode ‘width:880,height:340’ diubah sesuai dengan kebutuhan
Pada kode nomor empat, ada beberapa kode pembuka <img src=”yang digunakan untuk memanggil gambar yang diinginkan. Bila ingin agar gambar tersbut dapat diklik tambahkan kode <a href=”example.com” sebelum kode <img src=”
Masih pada kode nomor empat, kode <div class=”caption” digunakan untuk memberikan tulisan di gambar.
Bertanyalah bila ada kode di atas yang masih belum jelas pada kotak komentar. Saya akan berusaha menjawab semaksimal dan sebisa saya.

Modifikasi Gallery gambar dengan efek accordion

Kelebihan dan Kelemahan

Kelebihan yang menonjol adalah

Terlihat unik dan lebih keren dibandingkan dengan tampilan gambar gallery/ slide show blog lainnya.
Memperbesar gambar otomatis dengan efek hover
Gambar dapat diklik, ditambahi penjelasan (caption), diberi daftar, dan masih banyak lagi sesuai kebutuhan.
Dapat memberikan efek tenang dan indah dengan melihat gallery gambar tersebut.

Adapun kekurangan dari fitur ini adalah

Menggunakan javascript dan banyak kode yang dapat memberatkan loading blog.
Kemungkinan loading yang lama pada saat fitur ini muncul dengan sempurna.
Penempatan yang berada di bagian bawah header akan memakan waktu terlebih dahulu dibandingkan dengan isi postingan blognya.

Kesimpulan

Mohon simpulkan sendiri apa yang telah saya sampaikan, bagian ini hanya sekedar penambahan saja. Intinya semakin rumit dan aneh suatu design, maka semakin berat dan lama loading blognya. Artinya saling menyeimbangkan lah. Bagi yang ingin protes bagian ini boleh saja kok. Hehe…

Sekian pembahasan yang dapat saya sampaikan, mohon maaf jika terdapat kesalahan yang sengaja maupun yang tidak disengaja. Bila ada sesuatu yang mengganjal terutama ingin mengkritik atau memberikan saran, dapat disampaikan melalui kotak komentar di bawah. Dapatkan artikel tutorial blog unik lainnya dengan subscribe email anda dan dapatkan gratis serta unlimited! Beberapa perubahan dan pengembangan dengan sumber ini. Lihat juga 1001 Daftar Situs Social Bookmark Pagerank Tinggi 2013 Dan Cara Membuat Widget Contact Form di Blog. Terimakasih.

Bagi yang merasa artikel ini menarik, dan ingin menyebarluaskannya dimohon bagi siapa pun yang ingin mengutip diwajibkan untuk mencantumkan kode link di bawah ini. Hargailah karya cipta orang lain. Terimakasih.

<a href="http://netfori.blogspot.com/2013/06/gallery-gambar-dengan-efek-accordion.html">Cara Membuat Gallery Gambar dengan Efek Keren Accordion</a>

Blog Netfori