Cara memasang Accordion Menu

Temen-temen, kali ini mau bagi-bagi tips gimana caranya Memasang Accordion Menu. Sebelumnya udah pada tahu belum apa itu Accordion menu. buat contoh langsungnya kalian bisa liat langsung di blog ini di sidebar kanan atas. kalo mau tahu previewnya, nih gambarnya :



accordion menu bisa ngasi efek buka tutup secara sliding. kurang lebih begitu penjelasannya..hehe.. dengan accordion menu, fitur ini bisa mempercantik blog kamu..hehe..kalau kalian pengen tahu langsung, klik disini.

ok langsung aja gimana cara buatnya:

1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. copy paste kode berikut ini sebelum atau di atas kode </head>

<script src='http://blogipank.fileave.com/accmenu/ddaccordion.js' type='text/javascript'/>

<script src='http://blogipank.fileave.com/accmenu/jquery.min.js' type='text/javascript'/>

<script src='http://blogipank.fileave.com/accmenu/menu2.js' type='text/javascript'/>

<style type='text/css'>

.urbangreymenu{
width: 300px; /*lebar menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(http://blogipank.fileave.com/accmenu/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu .headerbar a{
text-decoration: none;
color: white;
display: block;
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

</style>

3. Klik Simpan.

Setelah itu, kalian masuk ke Elemen Halaman, Tambah Gadget, HTML/Javascript. Kalian copy paste kode berikut ini:

<div class="urbangreymenu">

<h3 class="headerbar"><a href="URL KALIAN">NAMA LINK</a></h3>
<ul class="submenu">
<li><a href="URL KALIAN">NAMA LINK</a></li>
</ul>

</div>

Kalian Tinggal ganti yang berwarna merah sesuai kebutuhan kalian. Untuk menambahkan menu utama, kalian bisa copy paste kode :

<h3 class="headerbar"><a href="URL KALIAN">NAMA LINK</a></h3>

Untuk menambahkan sub menu, kalian bisa copy paste kode :

<li><a href="URL KALIAN">NAMA LINK</a></li>

Buat contohnya yang kayak di blog ini, kodenya seperti ini:

<div class="urbangreymenu">

<h3 class="headerbar"><a href="http://blognyaipank.blogspot.com">Home</a></h3>

<ul class="submenu">
<li><a href="http://blognyaipank.blogspot.com/search/label/bisnis%20online">Bisnis Online</a></li>
<li><a href="http://blognyaipank.blogspot.com/search/label/others">News and Others</a></li>
<li><a href="http://blognyaipank.blogspot.com/2009/07/tukeran-link.html">Link Exchange</a></li>
</ul>

<h3 class="headerbar"><a href="http://blognyaipank.blogspot.com/search/label/blogging">Blogging</a></h3>

<ul class="submenu">
<li><a href="http://blognyaipank.blogspot.com/search/label/blogging">Tips Blogging</a></li>
<li><a href="http://blognyaipank.blogspot.com/search/label/seo">Tips SEO</a></li> 
</ul>


<h3 class="headerbar"><a href="http://blognyaipank.blogspot.com/search/label/download">Download</a></h3>

<ul class="submenu">
<li><a href="http://blognyaipank.blogspot.com/search/label/template">Template</a></li>
<li><a href="http://blognyaipank.blogspot.com/search/label/software">Software</a></li> 
</ul>


<h3 class="headerbar"><a href="http://blognyaipank.blogspot.com/2009/07/pasang-iklan-murah.html">Advertise</a></h3>

<h3 class="headerbar"><a href="http://facebooktrik.blogspot.com/" target="window">Trik Facebook</a></h3>

</div>

Yang berwarna biru adalah kode menu utama sedangkan yang berwarna hijau adalah sub menu.
OK kawand, semoga bermanfaat yah tipsnya. baca juga ya cara buat widget tukeran link..
thanks! 

Artikel Terkait:

Blogger

• Cara Copy Paste Artikel Yang tidak bisa di Copy di Sebuah Blog ataupun Website
• Kenapa Blogspot.com berubah menjadi .co.id ‐ apa penyebabnya dan bagaimana mengatasinya?
• Cara Membuat Slideshow Pada Blogger
• Cara membuat chat box di blog & macam-macam chat box
• Cara Membuat Chat Box di Blogger
• Cara memasang radio online di blog
• CARA MEMBUAT RADIO STREAMING
• Membangun Radio Internet dengan Listen2MyRadio.Com
• Membangun Sendiri Radio Internet
• Radio Online
• Tampilan Baru Dasbor Blogger.com
• Membuat Label untuk Artikel Miniatur Hover
• Menambah Button Send ke Facebook
• Laporan berita sekilas dari w3spy.net
• Pengaturan Ukuran pada Kolom Komentar dan Postingan Lebih Fleksibel
• Membuat Web Hosting di Google Sites
• Google Code - Cara Membuat File Hosting di Google Code
• Tips Mendapatkan Banyak Follower di Twitter
• Membuat Artikel Terkait dengan Disertai Thumbnails
• Cara Merubah Blogger.com atau Draft.blogger.com Sebagai Default Dasbor Blogspot Anda
• Cara Memasang Widget SMS Gratis pada Blogger Blogspot
• Favicon Fitur Baru dari Blogger
• Menambahkan Gadget di Header
• Cara Membuat Menu dan Iklan Floating Bottom - Trik Menu dan Iklan Selalu ada di Layar
• Cara Membuat Iklan Melayang - Agar Iklan Tampil Setiap Halaman Blog Dikunjungi