CARA MEMBUAT MENU HORIZONTAL DI BLOG AGAR TAMPIL CANTIK

Hai sahabat-sahabat Blogger sekalian, kali ini saya akan bagikan trik atau cara membuat menu horizontal pada blog agar blog tampil cantik dan menarik, kadang kita sering masuk ke dalam blog teman yang masih banyak yang belum dipasang Menu Horizontal terutama Blogger2 pemula yang belum tau caranya, Kali ini sobat-sobat Blogger khususnya pemula, saya bagikan cara membuat menu horizontal di blog agar blog tampil cantik dan menarik.

Pertama yang harus anda lakukan adalah :

1. Masuk atau Login ke Blogger atau klik disini

2. Setelah anda login ke Blogger akan diarahkan ke Dashbord Blog, kemudian klik Template - Edit HTML -   Lanjutkan . 

3. Centang Tanda Expand Template Widget. 

4. Lalu carilah kode Script [[> </ b: skin>  ( untuk lebih cepatnya tekan CTRL + F, Copy kode  [[> </ b: skin> dan pastekan kedalam kolom pencarian . 

6. Jika kode sudah ketemu, Copy paste kode berikut dan letakkan tepat dibawah kode {{></b: skin> 

menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Arial", Arial;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

font-size:14px;

font-weight:bold;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;

}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}

7. Setelah selesai memasukan kode tersebut, klik Save Template

8. Selanjutnya Klik Tata letak ( Layout ) - Tambah Gadget ( Add Gadget ) - Klik HTML Javascript. 

9. Masukan kode berikut di dalam HTML Javascript yang tersedia.

<div class="menu"><ul><li><a href="#"> Nama Menu </a></li><li><a href=" # "> Nama Menu </a><ul><li><a href=" # "> Nama Menu </a></li><li><a href=" # "> Nama Menu </a></li><li><a href=" # "> Nama Menu </a></li><li><a href=" # "> Nama Menu </a></li></ul></li><li><a href="#"> Nama Menu </a><ul><li><a href="#"> Nama Menu </a></li><li><a href="#"> Nama Menu </a></li></ul></li><li><a href="#"> Nama Menu </a></li></ul></div>

10. Ganti kode # dengan URL Yang akan anda tuju, dan ganti Nama menu dengan nama yang akan anda tampilkan dalam menu blog anda.

11. Selanjutnya Simpan dan lihat hasilnya,