cara menambahkan menu pada blog

Cara Membuat menu vertikal di blog
Posted on 9 Juni 2009 by darahbiroe


emarin saya telah mengulas cara membuat menu (horisontal) atau jika anda belum tau anda bisa mereview nya disini tapi jika blog anda tidak memungkinkan untuk menggunakan menu horisontal alangkah baiknya jika anda menggunakan menu blog yang vertikal. atau bisa lihat seperti gambar dibawah ini :


Ok jika anda tertarik untuk membuat menu blog vertikal, Sok atuh dipelototin tutorialnya…!

1. Login ke Blogger, klik –>> Layout –>> Edit HTML –>> download Full Templates (jika diperlukan buat jaga2 jika terjadi kesalahan edit)
2. Cari kode seperti dibawah ini

]]>

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%; }

** Ketrangan

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 n paste kode dibawah ini kedalam gadget yg tadi telah ditambahkan

• Home


• Ganti dgn judul Menu


• Ganti dgn judul menu


• Ganti Dgn Judul Menu

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

langkah terakhir membuat menu vertikal Save dan untuk menu horisontal klik disini

Tengkyu Tips-Trick.blog