Cara Membuat Menu Vertikal

Saya pernah  mengulas cara membuat menu (horisontal). tapi jika blog anda tidak memungkinkan untuk menggunakan menu horisontal alangkah baiknya jika anda menggunakan menu blog yang vertikal. atau bisa lihat seperti ini

Ok jika anda tertarik untuk membuat menu blog vertikal,
tutorialnya...!
 

1. Login ke Blogger, klik -->> Layout -->> Edit HTML -->> download Full Templates (jika diperlukan buat jaga2 jika terjadi kesalahan edit) 
2. Cari kode seperti  ini   ]]></b:skin>
3. Copy n paste script dibawah ini diatas kode no 2

 .glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://i580.photobucket.com/albums/ss241/nobhita/green1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://i580.photobucket.com/albums/ss241/nobhita/green2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Jika anda merasa menu vertikal diatas warnanya tidak cocok dengan template blog yang anda pakai, so ganti kode warna menu diatas yg saya kasih warna kuning atau ini kodenya green1.gif dan green1.gif ganti dengan kode pilihan warna dibawah ini

PILIHAN WARNA MENU VERTIKAL UNTUK BLOG

black1.gif black2.gif

 

blue1.gif blue2.gif

red1.gif red2.gif

 

pink1.gif pink2.gif
 
green1.gif green2.gif 







4. Save Template
5. Klik --->> Layout --->> Page Elements -->> Add a Gadget -->> pilih HTML/JavaScript
6. copy / paste kode dibawah ini kedalam gadget yg tadi telah ditambahkan

<ul id="vertical menu Edit By antok" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://URL MENU">Ganti dgn judul Menu</a></li>
<li><a href="http://URL MENU" >Ganti dgn judul menu</a></li>
<li><a href="http://akur.co.cc">Ganti Dgn Judul Menu</a></li>
</li>
</ul>

Jika Anda ingin menambahkan sub menu sampai beberapa menu lagi anda tinggal copy paste aja kode yang saya cetak miring diatas diatas,

»»  READMORE...

Cara membuat Menu Vertical with Descriptions :

Vertical menu ini mampu menghadirkan deskripsi menu dengan mempunyai lebar dan tinggi ruang deskripsi yang dapat di atur. Memungkinkan kamu untuk menyampaikan beberapa hal yang diharapkan membuat pengunjung blog penasaran sehingga tergelitik untuk mengetahui isi menu tersebut.

Letakkan KODE CSS di bawah ini di bagian head di atas ]]></b:skin>, kemudian CHTML di letakkan di bagian body atau kamu bisa menggunakan :Edit HTML --> Elemen Laman -->
Tambah Gadget --> Javascript/HTML
Letakkan Kode Css/script diantara <hsad> dan </hsad>
Kode CSS

ul#bgsGRverdescript {
margin : 5px;
list-style-type : none;
font-size : 90%;
}
ul#bgsGRverdescript li {
margin-bottom : 5px;
}
ul#bgsGRverdescript a {
opacity:0.7;
-moz-opacity:0.7;
filter:alpha(opacity=70);
position : relative;
text-align:center;
width : 145px;
height : 40px;
display : block;
padding : 5px;
padding-right : 0;
border : 2px solid #669900;
background : #ddd url(http://i50.tinypic.com/25g42gg.gif) repeat-x;
color: #FFFF66;
text-decoration : none;
font-weight : bold;
cursor : pointer;
}
ul#bgsGRverdescript a span {
z-index:1; border:8px solid #3399FF;
position : absolute;
top : -9000px;
left : -9000px;
display : block;
width : 300%;
height :100px;
background : #fafafa url(http://snook.ca/technical/jquery-bg/bg3.jpg);
border: 4px solid #663300;
border-left : 0;
padding : 5px;
padding-left : 23px;
text-indent : -17px;
cursor : pointer;
color: #000;
}
ul#bgsGRverdescript a:hover, ul#bgsGRverdescript a:focus,
ul#bgsGRverdescript a:active {
background : url(http://i49.tinypic.com/1079ef7.gif);
color: #CC0000;
opacity:1.0;
-moz-opacity:1.0;
filter:alpha(opacity=100);
}
ul#bgsGRverdescript a:hover span, ul#bgsGRverdescript a:focus span,
ul#bgsGRverdescript a:active span {
top : -1px; opacity:0.9;-moz-opacity:0.9;filter:alpha(opacity=90);
left :70px;
}
letakan Kode Berikut di antara tag <body> dan </body>

Contoh Htlm Untuk Menu

<ul id="bgsGRverdescript">

<li><a href="#"><strong>Pulau<br /> Bali</strong>

<span>&rarr; Sebuah pulau kecil yang sangat Indah. Tempat wisata budaya terbaik di Indonesia. Masyarakat Bali berbeda dengan pada umumnya masyarakat di Indonesia .....</span></a></li>

<li><a href="#"><strong>Pulau <br />Papua</strong>

<span>&rarr; Sebuah daerah yang kaya raya dengan sumber kekayaan alam tiada batas tetapi sangat kontradiktif dengan kondisi sosial masyarakatnya .....</span></a></li>

<li><a href="#"><strong>Pulau<br /> Kalimantan</strong>

<span>&rarr; Dari ribuan pulau yang menjadi bagian Negara Republik Indonesia, inilah pulau terbesar yang hingga saat ini ......</span></a></li>

</ul>

Catatan:

Tanda # pada CHTML adalah URL Link Menu.

Pulau Bali, Papua dan Kalimantan merupakan nama Menu

Background, warna, jenis font dan ukuran tinggi serta lebar bisa kamu sesuaikan sendiri

»»  READMORE...