Cara Menciptakan Hidangan Vertikal Keren Dan Manis Diblog

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

Jika sahabat tertarik untuk menciptakan menu vertikal keren dan cantik menyerupai gambar diatas, silahkan ikuti tutorial dibawah ini:

1. Login bloger sobat.
2. pilih  Dasboard >> template >>  KLIK "Edit HTML"
3. supaya lebih aman  Backup Template terlebih dahulu.
4. letakkan arahan dibawah ini sempurna di bawah arahan </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,,, kini letakkan arahan dibawah ini sempurna di atas arahan ]]></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. jika sudah simpulan kini sahabat save terlebih dahulu.
7. kemudian sahabat kembali ke dasbord blog sahabat pilih Tata Letak --> Add Gadget --> Pilih HTML/JavaScript.


Masukkan arahan 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="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1b" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1c" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1d" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1e" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">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="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2b" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2c" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2d" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2e" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">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="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3b" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3c" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3d" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3e" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">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="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4b" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4c" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4d" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4e" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">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="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5b" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5c" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5d" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5e" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">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="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6b" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6c" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6d" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6e" title="Cara Membuat Menu Vertikal Keren dan Cantik diblog">Tuliskan Nama Link di sini!</a></li>
</ul>
</div>
</div>

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

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

Share this post