Membuat Menu Vertikal

Sebelum ini aku pernah membuat posting tentang membuat menu horizontal, sekarang mari kita mencuba membuat menu vertikal. Menu vertikal ini sesuai kalau dipasang di sidebar karana bentuknya berjajar kebawah. Contohnya seperti gambar disebelah ini. Begini cara membuatnya :

1. Login ke blogger pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode </head>

<script src='http://blog.superinhost.com/vertical/verticalmenu.js' type='text/javascript'/>



3. Setelah itu masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . senang cerite ditaruk di dalam Barisan kode CSS la.

.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://blog.superinhost.com/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://blog.superinhost.com/vertical/blue2.gif');
}

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



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

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


dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');



Pilihan Warna menu vertikal :

blue1.gif

blue2.gif

green1.gif

green2.gif

red1.gif

red2.gif

pink1.gif

pink2.gif

black1.gif

black2.gif



4. Kemudian di save.
5. Kemudian pergi ke menu "Page Elements"
6. 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://myp4u.blogspot.com">Trik Blog</a></li>
<li><a href="http://myp4u.blogspot.com" >Free Template</a></li>
<li><a href="http://myp4u.blogspot.com">Free Ebook</a></li>
</li>
</ul>


Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang dipaparkan. Kalau nak menambahkan menu tingal buat lagi kode seperti yg berkelip2 dibawahnya.

Dah mcm 2 aja. senang kan????

Free Support Solehpolysas blog with add Solehpolysas Blog link at Your Blog/Web. TQ.

3 comments:

  1. to Ir.hydir ;
    menu yang macam mana 2? contoh?

    ReplyDelete
  2. owh menu literal, menu yang berada di bahagian tepi blog, apabila s=kita scroll ke bawah, menu itu ikut sekali.. emm, tahu.. tp buat masa ini tidak ada kesempatan nak post.

    sory yer.. bila senang2 nnt baru post artikel ni.

    kalau nak cepat, cari la di google search.. pasti jumpa..

    ReplyDelete

Blog ini telah menggunakan do follow untuk link komen anda. Link anda akan tersenarai di search engine.