Cara membuat menu vertical accordion cantik di blog

Setelah blogwalking ke tetangga sebelah, saya sangat tertarik sekali untuk mepostingan kembali dan share dengan anda tentang Cara membuat menu vertical accordion cantik di blog . Langsung menuju TKP aja..

JQuery-1.3.2.min.js masih menjadi pilar utama bekerjanya accordion, yang dipadukan dengan sejumlah script lain hingga dapat membentuk sebuah fungsi dinamis dengan bentuk tampilan yang terbangun sepenuhnya melalui beberapa kode css dan background image.

jquery dan Javascript pembentuk jQuery Vertical Accordion Menu

Silahkan letakkan dan simpan di bawah kode <head>

Javascript :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src='http://vertical-accordion-menu.googlecode.com/files/GR_v-accordion-gubhugreyot.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
ddaccordion.init({
headerclass: "accordion",
contentclass: "ul_accordion",
revealtype: "click", // "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover"
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false, 
persiststate: true,
toggleclass: ["", "aktif"],
togglehtml: ["prefix", "", ""],
animatespeed: "slow", 
oninit:function(headers, expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
//]]>
</script>

Kode CSS jQuery Vertical Accordion Menu

Untuk kode CSS, anda bisa meletakkan dan menyimpan di atas kode ]]></b:skin>

Kode CSS:

h3.selektor accordion{
       font-weight: bold;
       font-size:14px;
}
.molormenu{
       background:#33333;
       width:auto;
       margin-top:10px;
       font-family:Arial;
}
.molormenu .selektor{
       font-weight: bold;
       font-size:15px; 
       font-family:Times;
       color: #e79958;
       background: transparent url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-2.gif) repeat-x center left;
       margin-bottom: 5px;
       text-transform: uppercase;
       padding: 10px 0 10px 10px;
       cursor: pointer;
       border-bottom:1px solid #666;
}
.molormenu .aktif{
       background-image: url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-3.gif);
}
.molormenu ul{
       background:transparent;
       list-style-type: none;
       margin: 0;
       padding: 0;
       margin-bottom: 8px;
}
.molormenu ul li{
       padding-bottom: 2px; 
}
.molormenu ul li a{ 
       color: #fceada;
       background: url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-4.gif) no-repeat center left;
       display: block;
       padding: 2px 0;
       padding-left: 19px;
       text-decoration: none;
       font-weight: bold;
       border-bottom: 1px solid #666;
       font-size: 11px;
       font-weight:normal;
}
.molormenu ul li a:visited{
       background:red;
       color: #3a3838;
}
.molormenu ul li a:hover{ 
       color:yellow;
       background-color: black;
}

Kode HTML jQuery Vertical Accordion Menu

Kode HTML yang berisikan link dan nama setiap link menu yang akan ditampilkan di blog disimpan melalui penambahan widget. Sampeyan bisa menggunakan widget di bagian sidebar kanan atau kiri. Silahkan setiap link beserta nama link untuk diganti sesuai kebutuhan blog.

<div style="background:#222;padding:2px;border:1px solid 666;">
 
<div align="center" style="background:#2f4274 url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-1.gif);font-family:Monotype Corsiva;font-size:16px;font-weight:bold; margin:5px; color:#c2d2fa;padding:2px  5px;border:1px solid blue;">
CLICK any categories for open!</div>
<div class="clear:both">
</div>
<div class="molormenu">

<h3 class="selektor accordion">
Menu-1</h3>
<ul class="ul_accordion">
<li><a href="Link-1a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
</ul>
<h3 class="selektor accordion">
Menu-2</h3>
<ul class="ul_accordion">
<li><a href="Link-2a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
</ul>
<h3 class="selektor accordion">
Menu-3</h3>
<ul class="ul_accordion">
<li><a href="Link-3a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
</ul>
<h3 class="selektor accordion">
Menu-4</h3>
<ul class="ul_accordion">
<li><a href="Link-4a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
</ul>
<h3 class="selektor accordion">
Menu-5</h3>
<ul class="ul_accordion">
<li><a href="Link-5a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
</ul>
<h3 class="selektor accordion">
Menu-6</h3>
<ul class="ul_accordion">
<li><a href="Link-6a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
</ul>
</div>
</div>

Langkah-langkah yang harus dilakukan :

Penyimpanan Javascript dan Kode CSS

Login : Login to BloGGeR (Login ke BloGGeR) dengan menuliskan User Name (Nama Pengguna) atau Email Address. Tuliskan juga Password atau Sandi
Dasboard (Dasbor) : Setelah memasuki halaman Dasbor, KLIK "Design (Rancangan)".
Design (Rancangan) : KLIK link "Edit HTML"
Backup Template : : Amankan template terlebih dahulu dengan KLIK "Download Full Template (Download Template Lengkap)". Lanjutkan dengan menyimpan (SAVE) file template di "Folder PC".
<head> : Cari kode tersebut dengan menggunakan Ctrl+F untuk memudahkan pencarian kode. Kode <head> terletak di bagian atas "Edit HTML". Letakkan jQuery dan javascript di bawahnya.
]]></b:skin> : Cari kode ini dan gunakan juga Ctrl+F. Letakkan kode CSS di atasnya.
SAVE Template (Simpan Template) : KLIK SAVE Template/Simpan Template.
Lanjutkan dengan KLIK link "Page Elemen (Elemen Laman)".
Add Gadget : KLIK "Add Gadget (Tambah Gadget)" yang terletak di box dengan garis terputus-putus. Sampeyan bisa gunakan yang di bagian "Sidebar" kanan atau kiri.
Tunggu beberapa saat. KLIK pada "HTML/Javascript". Setelah terlihat box penyimpanan widget, copy dan pastekan kode HTML-nya.
KLIK "SAVE/Simpan" dan lihat hasilnya di dengan membuka blog.

Catatan/Keterangan :

1. Kode HTML yang disediakan hanya menyediakan 6 (enam) selector menu. Anda bisa menambah dengan cara menambahkan kode baru setelah yang terakhir dengan kode tambahan :

xHTML

<h3 class="selektor accordion"> Menu-7</h3> <ul class="ul_accordion"> <li><a href="Link-7a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-7b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-7c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-7d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-7e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul>

2. Link dan Nama Link juga bisa ditambah dengan menambahkan kode baru di bawahnya seperti misalnya :

xHTML

<h3 class="selektor accordion"> Menu-7</h3> <ul class="ul_accordion"> <li><a href="Link-7a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-7b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-7c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-7d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-7e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> <li><a href="Link-7f" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> </ul>

Ganti setiap link (link-1a s/d link-1e dan yang lain) dengan URL setiap menu.
Contoh : http://gubhugreyot.blogspot.com/2010/08/cara-buat-cc3-multilevel-drop-down-menu.html
Title di isi dengan keterangan tentang nama menu. Title ini akan terlihat sebagai tip yang terlihat ketika cursor berada di atas link menu.
Nama menu merupakan nama atau judul menu yang akan ditampilkan.
Lebar Accordion akan menyesuaikan diri dengan lebar widget yang tersedia.
Jika blog sebelumnya sudah menggunakan jQuery, maka anda hanya perlu menggunakan kode dan javascriptnya saja (jQuery cukup 1 (satu) dalam satu blog). Buatlah script yang lain selalu berada di bawah jQuery!

Sumber: http://gubhugreyot.blogspot.com

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 22.18

19 komentar:

Unknown7 Maret 2013 pukul 02.43
makasih gan. tutonya udah ane terapin. thank's ya.... muantap gan.....
BalasHapus
Balasan
jalupangna7 Maret 2013 pukul 15.48
@thofa Argha sama2 kang thofa argha..! dan saya ucapkan terima kasih banyak atas komentar dan kunjungannya. salam kenal..:)
BalasHapus
Balasan
Unknown11 Maret 2013 pukul 01.29
kenal balik gan....!!! oh ya ...!! cara bikin stay connectednya gmn....? keren bnget tuuh
BalasHapus
Balasan
jalupangna11 Maret 2013 pukul 17.27
@thofa Argha nanti akan saya posting kang. Terima kasih atas respondnya..
BalasHapus
Balasan
Unknown11 Maret 2013 pukul 20.58
sama-sama , ditunggu ya gan...
BalasHapus
Balasan
jalupangna12 Maret 2013 pukul 14.52
@thofa Argha sudah saya posting, kang. Coba anda cek pada posting yang baru. Terima kasih..:)
BalasHapus
Balasan
Unknown12 Maret 2013 pukul 19.36
asiiik....makasih banyak untuk smunya gan, ane test dulu ya, moga ilmu membawa syafaat bagi pemiliknya,,,

NB:

kalo boleh tahu niiih..... di pojok kiri atas ada tanda begini -->
gmn solusinya jika ingin membuang tanda tersebut ? trimakasih atas pencerahannya.
BalasHapus
Balasan
jalupangna13 Maret 2013 pukul 14.35
@thofa Argha sama2 kang thofa, silahkan. saya juga masih dlm tahap belajar kang thofa. masalah yang anda tanyakan di blog saya, terus terang aja belum saya temukan solusinya karena saya sendiri masih pemula..mungkin kang thofa bisa share juga ke saya cara menghilangkan tanda tersebut..terima kasih masukannya. :)
BalasHapus
Balasan
Unknown14 Maret 2013 pukul 05.23
Komentar ini telah dihapus oleh pengarang.
BalasHapus
Balasan
Unknown14 Maret 2013 pukul 05.28
@lalupangna
maaf aku juga lebih pemula dari agan, kemarin blog aku juga begitu ada tanda --> di pojok kiri atas, untung aja aku masih menyimpan data template origimal. jadi aku beck-up ulang semua
BalasHapus
Balasan
say group28 Maret 2013 pukul 13.30
thank ya ... jangan lupa follow balik ya...
BalasHapus
Balasan
jalupangna28 Maret 2013 pukul 16.06
@mohamad nasihin Ngibad your'e welcome, sudah saya follow back blog anda. Terima kasih atas kunjungan dan komentya..salam kenal. :)
BalasHapus
Balasan
Renno Yose Rizal2 April 2013 pukul 14.40
mampir gaan
www.mac-bengkulu.tk
thanks ilmunya...
minta diajariin yg lain jg yah gaaan..hihi
BalasHapus
Balasan
jalupangna2 April 2013 pukul 16.58
@Renno Yose Rizal udah blogwalking ke blog anda, nice blog. Sama2 mas reno, saya juga masih tahap belajar mas belum profesional spt para master blogger yang lain. :)
BalasHapus
Balasan
Unknown20 Mei 2013 pukul 12.01
terimakasih atas ilmunya :)
BalasHapus
Balasan