Cara Membuat Menu Vertikal Keren dan Cantik diblog

Cara Membuat Menu Vertikal Keren dan Cantik diblog

Cara Membuat Menu Vertikal Keren dan Cantik  - Kali ini saya akan share Cara Membuat Menu Vertikal Keren dan Cantik, menu vertikal accordion ini, dapat dijadikan sarana mempercantik blog. dengan desain yang simple, selain untuk memudahkan pengunjung dalam melihat postingan kita, menu vertikal ini kelihatan keren dan cantik untuk dipasang diblog sobat.

Jika sobat tertarik untuk membuat menu vertikal keren dan cantik seperti gambar diatas, silahkan ikuti tutorial dibawah ini:

1. Login bloger sobat.
2. pilih  Dasboard >> template >>  KLIK "Edit HTML"
3. agar lebih aman  Backup Template terlebih dahulu.
4. letakkan kode dibawah ini tepat di bawah kode </head>
   

<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>

5. kita lanjut sobat,,, sekarang letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

    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;
    }

6. kalau sudah selesai sekarang sobat save terlebih dahulu.
7. lalu sobat kembali ke dasbord blog sobat pilih Tata Letak --> Add Gadget --> Pilih HTML/JavaScript.


Masukkan kode dibawah ini kedalam kotak HTML/JavaScript.:

<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>

8. Jangan lupa ganti link dan juga title setiap link.
9. Setelah selesai save
10. Jangan lupa tigalkan pesan.

Sekian dulu cara membuat .Menu Vertikal Keren dan Cantik diblog. semoga bermanfaat. Good Luck. Sumber

Cara Membuat Menu Vertikal Keren dan Cantik diblog