Cara Membuat Blog Cantik dengan Menu Vertikal

Nie Gambar dari menu drop vertikal bila sobat ingin masang pada blog sobat Langsung ajah ke TKP hehehe :)

Blog yang sobat miliki sudah memiliki sudah memiliki Menu Drop Vertikal apa belum nih... Kali ini saya akan memberikan informasi untuk membuat Menu Vertikal Di Blog. Unuk Membuat Menu Vertikal Di Blog Sobat perlu lakukan langkah-langkah sebagai berikut:

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.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: #000 url('http://kendhin.890m.com/blog/vertical/blue1.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://kendhin.890m.com/blog/vertical/blue2.gif');
}

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

Untuk memilih warna menu, perhatikan kode2 yang berwarna Biru (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna Hijau maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/hijau1.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/hijau1.gif');

3. Kemudian di save.
4. Lalu pergi ke menu Page Elements/ Tata Letak
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://creatoragus.blogspot.com/2012/05/my-profil.html">My Profil</a></li>
<li><a href="http://creatoragus.blogspot.com/2012/05/kontak-rund-creators.html" >Kontak Blogger</a></li>
<li><a href="Tulis Url Sobat">Judul Url Sobat</a></li>
<li><a href="Tulis Url Sobat">Judul Url Sobat</a></li> 
</li>
</ul>

6.Simpan dan Lihat hasilnya :)
7.Semoga Bermanfaat

NB:
Url yang warna merah ganti dengan url sobat
Yang warna biru ganti dengan judul url sobat

Bila ada tulisan yang salah mohon di benerin ya sob.. makasi
jangan lupa kaasih saran :)


Sumber:http://kumpulan-trik2.blogspot.com/2012/05/cara-membuat-menu-vertikal-di-blog.html

Baca Juga di Bawah Ini :

ATTENTION PLEACE :
Buat semua pengunjung yang ingin copy-paste diperbolehkan asal mencantumkan..
URL:
http://creatoragus.blogspot.com/

Hal ini untuk menambah rasa pertemanan agar menjadi lebih akrab dan untuk menjaga solidaritas dari para blogger sejati yang ada di indonesia..
Dan apabila terjadi kerusakan pada postingan kami misalnya kode yang salah,Gambar yang tidak valid dll.Sobat dapat menghubungi kami disini
Salam:Run_D Creators