Kembali javascript kurang dari 10 baris akan membantu membangkitkan jQuery meciptakan sebuah fungsi indah dengan dibantu kode css yang menjadi pilar hingga terbentuk desain menarik. Permainan pada background image, background position serta padding, margin border serta text-shadow dan rounded corners di bagian dalam accordion mampu menghasilkan tampilan eksotik yang layak untuk dipertimbangkan sebagai satu fungsi penambah gaya dan maksimalisasi ruang. Ada dua buah desain yang bisa menjadi pilihan bagi sampeyan. Ke duanya sama-sama menarik, dan mungkin saja membuat kita kesulitan untuk menentukan pilihan. Bagaimana bentuk "Animated Accordion Serba guna ini? Silahkan arahkan cursor pada gambar di bawah ini dan sampeyan akan melihat seperti apa kira-kira bentuk tampilannya.
Cara Membuat jQuery Accordion
Menu Serbaguna
Cara Membuat jQuery Accordion Menu Serbaguna
- Login to BloGGeR (Login ke BloGGeR) dengan menuliskan User Name (Nama Pengguna) atau Email Address kemudian tuliskan juga Password (Sandi). Setelah lengkap, silahkan KLIK "Login".
- Dasboard (Dasbor) adalah halaman pertama yang akan terlihat setelah login. Di sini ada beberapa link dengan berbagai kegunaan. Cari dan KLIK link "Design (Rancangan)".
- Design (Rancangan) : Carilah link "Edit HTML", kemudian KLIK.
- Edit HTML merupakan bagian blog yang menjadi tempat kode HTML desain dasar blog disimpan atau sering disebut sebagai "template". Silahkan lakukan pengamanan template terlebih dahulu (back-up template) dengan cara KLIK "Download Full Template (Download Template Lengkap)" kemudian simpan file template di Folder PC.
- Cari kode ]]></b:skin>, kemudian simpan javascript di bawahnya persis, sedang kode css accordion di atasnya.
- Lanjutkan dengan mencari kode (tag) <head>. Letakkan jquery-1.3.2.min.js di atasnya.
- KLIK "SAVE Template (Simpan Template)".
Javascript Animated Accordian Serbaguna
]]></b:skin>
<script type="text/javascript">
$(document).ready(function(){
$('.wadah').hide();
$('.sedul:first').addClass('active').next().show();
$('.sedul').click(function(){
if( $(this).next().is(':hidden') ) {
$('.sedul').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
return false;
});
});
</script>
Kode CSS Animated Accordion Serbaguna
.boxtama {
background:#333;
width: 220px;
margin: 0 auto;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-top:3px solid #777;
font-size:12px;
}
.boxtama .wadah {
margin: 0 0 5px 2px;
padding: 0;
overflow: hidden;
font-size: 16px;
width: 214px;
clear: both;
background: #bbb;
border: 1px solid #d6d6d6;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.boxtama .wadah .anakwadah {
padding:15px 8px 10px;
}
.boxtama .wadah .anakwadah p {
padding: 5px 0;
margin: 5px 0;
font:12px normal;
color:#000;
}
.boxtama .wadah h3 {
font: 18px normal Georgia;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ddd;
color: #993333;
}
.boxtama .wadah img {
float: left;
margin: 10px 8px 0px 0;
padding: 3px;
background: #ddd;
border: 1px solid #444;
width:60px;
height:60px;
}
.boxtama .wadah .anakwadah ul {
padding:0;
margin:0;
list-style:none;
}
.boxtama .wadah .anakwadah li {
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrow-gubhugreyot.png) top left no-repeat;
background-position:5px 5px;
list-style:none;
margin:0px;
padding:0px;
border-bottom:1px dotted #999;
transition:0.4s;
-o-transition:0.4s;
-moz-transition:0.4s;
-webkit-transition:0.4s;
}
.boxtama .wadah .anakwadah li:hover{
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrowHov-gubhugreyot.png) top left no-repeat;
background-position:10px 5px;
}
.boxtama .wadah .anakwadah li a {
font-family:Trebuchet MS;
padding:0 0 0 25px;
font-size:11px;
color:#222;
font-weight:500;
text-decoration:none;
}
.boxtama .wadah .anakwadah li a:hover {
color:red;
}
h4.sedul {
padding: 0;
margin: 0 0 5px 0;
background: #666 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgOrangeV34H2-gubhugreyot.gif) bottom left repeat-x;
height: 36px;
line-height: 36px;
width: 220px;
font-size: 14px;
font-weight: bold;
float: left;
}
h4.sedul:hover { /* hor.png */
padding: 0;
margin: 0 0 5px 0;
background:#660000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgFadeBlue-gubhugreyot.png) left center no-repeat;
background-position:-1px 0;
border-right:1px solid #999;
}
h4.sedul a {
background: url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRedRight-gubhugreyot.png) left center no-repeat;
background-position:8px 5px;
border-left:2px solid #fff;
border-right:2px solid #fff;
font-family:Droid Serif;
font-size:14px;
color:/*silver*/ #003366;
text-decoration: none;/*opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); */
display: block;
padding: 0 0 0 45px;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
h4.sedul a:hover {
background:#000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRightDownAnima-gubhugreyot.gif) left center no-repeat;
background-position:8px 5px;
color:red;
text-shadow:0px 1px 1px #888;
opacity:1.0;
filter:alpha(opacity=100);
}
h4.active {
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgblueV35H1-gubhugreyot.gif) top left repeat-x;
}
]]></b:skin>
Posisi jQuery-1.3.2.min.js
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<head>
Setelah Kode Javascript, kode CSS dan jQuery di letakkan pada posisi yang benar, silahkan gunakan kode HTML-nya di widget blog, dengan cara :
- KLIK "Page Elements (Elemen Laman)".
- KLIK Add Gadget (Tambah Gadget).
- KLIK "HTML/Javascript".
- Copy-paste kode HTML di box penambahan widget.
- KLIK "SAVE/Simpan)", dan lihat hasilnya dengan membuka blog.
Kode HTML Animated jQuery Accordion Serbaguna
<div style="float:left;background:#111;padding:3px;border:2px solid #666;">
<div class="boxtama"><h4 class="sedul"><a class="pilih" href="#">Theme - Template</a></h4>
<div class="wadah">
<div class="anakwadah">
<h3>Blogger - Blogspot</h3>
<ul class="accor">
<li><a href="http://blogger.com/" target="_blank">Stretch Denim by Darren Delaye</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Minima White by Blogger</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Tic Tac Blue by Blogger</a></li>
<li><a href="http://blogger.com/" target="_blank">Kelembutan by Jason Morrow</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Mudah by Josh Peterson</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Rounders 4 by Blogger</a></li>
<li><a href="http://blogger.com/" target="_blank">PT Keren Sekali by Tina Chen</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Perjalanan by Leezche</a></li>
<li><a href="http://gubhugreyot.blogdetik.com">Thisaway Rose by Blogger</a></li>
</ul>
</div>
</div>
<h4 class="sedul"><a class="pilih" href="#">Biro Jodoh Internasional</a></h4>
<div class="wadah">
<div class="anakwadah">
<h3>Bule Cantik Menunggu Lamaran</h3>
<a href="http://gubhugreyot.blogdetik.com/" target="_blank"><img src="http://animated-jquery-vertical-accordion-menu.googlecode.com/files/gadisAccord-2.jpg" alt="" /></a>
<p>Mungkin ini jadi pilihan yang cukup tepat untuk sampeyan. Seorang bule cantik yang dengan sukarela mau diperisteri perjaka pribumi. Harta dan jabatan tidak jadi perhitungan. "Biar miskin yang penting setia", katanya..</p>
<p>Jika sampeyan berminat dan dengan sungguh-sungguh berniat memperisteri si bule cantik, silahkan segera hubungi orang tua dan siapapun yang kira-kira bisa melakukan lamaran. Satu yang diharapkan oleh cewek cantik ini hanyalah sebuah uang mahar berupa rumah mewah bekas milik Gayus Tambunan. He ... he ... Gampang, toh!</p>
</div>
</div>
<h4 class="sedul"><a class="pilih" href="#">Javascript - jQuery</a></h4>
<div class="wadah">
<div class="anakwadah">
<h3>Earthquake Effects on No Right Click</h3><a href="http://bloggerstuars.blogspot.com/" target="_blank"><img src="http://animated-jquery-vertical-accordion-menu.googlecode.com/files/gadisAccord-2.jpg" alt="" /></a>
<p>Mungkin ini jadi pilihan yang cukup tepat untuk sampeyan. Sebuah javascript No Right Click yang disertai semacam efek gempa bumi dan ditanggung akan membuat bingung dan mengacaukan konsentrasi pengunjung blog..</p>
<p>Beberapa sobat blogger telah memanfaatkan, akan tetapi yang satu ini telah aku modifikasi sehingga efek yang muncul menjadi semakin parah. Javascript "Earthquake Effects on No Right Click" sudah ter-upload di file hosting sehingga sampeyan hanya perlu menyimpan link-nya di bagian head.</p>
</div>
</div>
<h4 class="sedul"><a class="pilih" href="#">Daftar Posting</a></h4>
<div class="wadah">
<div class="anakwadah">
<h3>Javascript</h3><a href="http://gubhugreyot.blogspot.com" target="_blank"><img src="http://animated-jquery-vertical-accordion-menu.googlecode.com/files/gadisAccord-2.jpg" alt="" /></a>
<p>JavaScript is a programming language that makes it possible for you to add programming language to a website for added user functionality. With JavaScript you can detect the browser the user is using, add buttons and make pop-up boxes.</p>
<p>Silahkan gunakan setiap box sesuai dengan yang sampeyan inginkan. Bisa sebagai tempat untuk menu blog atau mo digunakan untuk memuat bagian dari blog yang lain.</p>
</div>
</div>
</div>
</div>
Merubah Warna Teks pada Panel Selector Accordion
Warna teks dan Hover pada panel penggeser dapat anda rubah bila menginginkan warna yang berbeda dengan menambahkan kode CSS di atas kode ]]></b:skin> Gunakan kode seperti yang terlihat di bawah ini :
h4.sedul a.pilih{
color:yellow;
}
h4.sedul a.pilih:hover{
color:orange;
}
Setelah langkah tersebut, silahkan tambahkan class="pilih" pada setiap link selector yang terdapat di kode HTML seperti yang terlihat di bawah ini :
<h4 class="sedul"><a class="pilih" href="#">Link Title </a></h4>
Catatan/Keterangan :
Untuk merubah ukuran lebar (width) Animated jQuery Accordion Menu Serbaguna, silahkan rubah ukuran pada :
.boxtama {
width: 220px;
.boxtama .wadah {
width: 214px;
h4.sedul {
width: 220px;
Sumber :
http://gubhugreyot.blogspot.co.id/2010/07/cara-membuat-animated-jquery-accordion.html
.boxtama {
width: 220px;
.boxtama .wadah {
width: 214px;
h4.sedul {
width: 220px;
Sumber :
http://gubhugreyot.blogspot.co.id/2010/07/cara-membuat-animated-jquery-accordion.html
Tuliskan Komentar Anda disini