Cara Membuat Menu Vertikal di Blog

Hi, sobat, kali ini saya akan berbagi kepada sobat tentang cara membuat menu vertikal. Menu ini sangat cocok sobat taruh pada begian side bar , sesuai dengan bentuknya yang memanjang. Tanpa basa-basi lagi, mari kita lihat cara pemasangannya di blog.....

1. log in di blogger
2. Buka Rancangan>Edit HTML

3. Cari kode ]]></b:skin> untuk permudah pencarian, sobat tekan CTRL+F dari keyboard
4. Jika sudah dapat, letakkan kode dibah tepat di atas kode  ]]></b:skin>
.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://kendhin.890m.com/blog/vertical/red1.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/red2.gif');
}

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


sobat dapat mengganti kode berwarna merah dengan warna lain. Misalnya, sobat ingin menggantinya dengan warna biru, maka, kode red1 sobat ganti dengan blue1 , dan red2 sobat ganti dengan blue2 .
Warna-warna yang dapat sobat gunakan:
- red1 , red2
- blue1 , blue2
- green1 , green2
- pink1 , pink2
- black 1 , black2

5. Jika sudah, Klik Simpan.
6. Selanjutnya sobat pergi ke Rancangan > Elemen Laman
7. Tambah Gadget > HTML/Java script
8. Masukkan kode di bawah:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://krisantipsdantrik.blogspot.com">Tips dan Trik</a></li>
<li><a href="http://blogger.com" >Blogger</a></li>
<li><a href="http://facebook.com/krisan.paulino">MY FACEBOOK</a></li>
</li>
</ul>

kode bewarna  ungu merupakan link dan kode biru adalah tulisan yang akan muncul. Untuk menambah menu, tambahkan saja kode
<li><a href="Masukkan URL">Tulisan yang muncul</a></li>
</li>
</ul>
kode merah ganti dengan url sobat, sedangkan biru ganti dengan tulisan yang sobat inginkan.
9. Klik Simpan dan Lihat hasilnya.......

Comments

  1. kalau yg horizontalnya gan??

    ReplyDelete
  2. Agan coba tolong liatin blog ane deh gan, masa warna font yang di menu vertikalnya biru gitu ya, ga warna putih?
    wahyoemsc.blogspot.com
    Makasih gan :)

    ReplyDelete
    Replies
    1. coba lihat kode ini:
      .glossymenu li a:hover{
      background-image: url('http://kendhin.890m.com/blog/vertical/red2.gif');

      di bagian background-image: kamu tambah kode ini '#ffffff'

      Delete
  3. kalau bikin menu sebelah kanan tuh gmn yah...? share dong kodenya :) (newby

    ReplyDelete
  4. mantap bos, terima kasih banyak :D

    ReplyDelete
  5. kyak mna nih cara pindain posting kita ke dalam menu tab nya??

    ReplyDelete
    Replies
    1. bukan mindahin postingan, tp memasukan link postingan...

      Delete
  6. langsung praktek , terima kasih ya kk informasinya , di tunggu kunjungannya http://gieproject-course.blogspot.com/

    ReplyDelete

Post a Comment