Cara Membuat Menu Horizontal Bercabang Pada Blogger

Kali ini saya membahas tentang cara membuat menu horizontal pada blogger dan kalau rekan-rekan cari di google search mungkin sudah banyak artikel tentang menu horizontal ini.
Tapi saya membahas ini mungkin rekan-rekan ada yang belum tahu caranya membuat menu horizontal bercabang ini, mari kita ikuti cara membuatnya.

Berikut ini gambar contoh dari menu horizontal bercabang

Cara Membuat menu Horizontal Bercabang

1.     Login ke account blogger anda
Pilih Rancangan -> Tataletak -> Edit HTML

cari kode berikut:

]]></b:skin>


2.     Di bagian atas kode tersebut masukkan kode berikut

/* Navbar */#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;opacity: 0.99; filter: alpha(opacity: 98);}#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}#menu ul{padding:0; margin:0;}#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}#menu ul li ul {display:none;}#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}.status-msg-wrap{display:none;}

4.     Klik tombol "Simpan Template"

5.     Buka halaman  "Elemen Halaman"

6.     Pada Elemen header , klik " Tambah Gadget"

7.     Pada kotak dialog html/javascrpit masukkan kode html berikut:

<div id='menu'><ul><li><a class='active' href='/'> Home</a></li><li><a href='#'>Menu 1</a></li><li><a href='#'>Menu 2</a><ul><li><a href='#'>Menu 2.1</a></li><li><a href='#'>Menu 2.2</a></li></ul></li><li><a href='#'>Menu 3</a><ul><li><a href='#'>Menu 3.1</a></li><li><a href='#'>Menu 3.2</a></li><li><a href='#'>Menu 3.3</a></li><li><a href='#'>Menu 3.4</a></li></ul></li><li><a href='#'>Menu 4</a></li><ul></ul></ul></div>

Lihat Demo

catatan:
Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
misalnya:
http://trik-blogger-andreas.blogspot.com
atau
http://trik-blogger-andreas.blogspot.com/2010/07/cara-memasang-signature-pada-setiap.html
teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.

9.     Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya

Selamat mencoba semoga berhasil.

Membuat Menu tombol menggunakan CSS3

Bagaimana cara membuat Menu tombol dengan CSS3 dengan efek berkilau..... untuk caranya yaitu sebagai berikut:
Hasil tampilannya seperti ini:

1. Login bloggger
2. Masuk ke rancangan lalu masuk ke menu edit html
3. Cari kode ]]></b:skin> (ctrl+F untuk mempermudah pencarian)dan taruh kode di bawah ini sebelum kode tersebut.

#bgmenu {
width:100%;
height:30px;
}
#menu a {
font:12px verdana;
font-weight:bold;
color:#000;
text-shadow:0px 2px 3px #fff;
text-decoration:none;
}
#menu a:hover {
color:#fff;
text-shadow:0px 2px 3px #000;
text-decoration:none;
}
#menu li {
margin-right:10px;
float: left;
list-style: none;
}
.abu{
text-align:center;
background:-moz-linear-gradient(top,  #999 , #666 );
width:80px;
padding:5px;
margin-bottom:10px;
-moz-border-radius:50px;
-moz-box-shadow:0px 5px 8px grey;
border:1px solid #0F0;
}
.kilau {
background:#fff ;
height:5px;
margin:-5px 0px 15px 0px;
padding:5px 5px 5px 5px;
color:000;
-moz-border-radius:20px;
-moz-box-shadow:0px 2px 6px #999;
opacity:0.6;
}
.text {
margin-top:-25px;
color:#000;
font:14px trebuchet ms;
font-weight:bold;
opacity:0.9;
}

.
Untuk selanjutnya Kemudian cari kode </head> , dan taruh kode di bawah ini setelah kode tersebut

<div id="bgmenu">
<ul id="menu">
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 1</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 2</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 3</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 4</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 5</a></div></div></li>
</ul></div>

yang berwarna biru (#, menu 1)silahkan kawa-kawan isi dengan alamat situs yang diinginkan dan juga Nama  menunya...........

Selamat Mencoba.....