Membuat Menu Horizontal Style di Blog

Nadia Naila

Wednesday, 4 May 2011

Trik Blogger kali ini share  membuat menu horizontal, dan langsung saja kita ikuti langkah berikut ini :

1.    Login ke blogger

2.    Pilih tab Design -->> Edit HTML

3.    Cari kode </head>

4.    Kemudian copas kode script di bawah ini sebelum kode tadi

<style type='text/css'>

div#navmenu { margin: 0 0 0 0px; padding: 0; height: 44px; float: left;overflow:hidden;background-color:#323232;width:100%; }
div#navmenu ul { display: block; margin: 0; padding: 0 0 0 2px; height: 44px; float: left; }
div#navmenu ul li { display: block; margin: 0; padding: 0 2px 0 0; float: left; height: 44px; }
div#navmenu ul li a, div#navmenu ul li a:visited {
display: block; margin: 0; padding: 5px 0 0 0; height: 39px; line-height: 39px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px; text-transform: uppercase;
color: #ffffff;float: left;
}
div#navmenu ul li a span, div#navmenu ul li a:visited span {
display: block; float: left; margin: 0; padding: 0 0 0 26px;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a span span, div#navmenu ul li a:visited span span {
display: block; float: left; margin: 0; padding: 0 26px 0 0;
height: 39px; line-height: 39px;
color: #ffffff;
}
div#navmenu ul li a:hover, div#navmenu ul li.current_page_item a, div#navmenu ul li.current_page a:visited {
color: #ff9600;
background: transparent url(&#39;http://i47.tinypic.com/23rq1vs.jpg&#39;) repeat-x scroll left bottom; text-decoration: none;
}
div#navmenu ul li a:hover span, div#navmenu ul li.current_page_item a span, div#navmenu ul li.current_page_item a:visited span {
background: transparent url(&#39;http://i49.tinypic.com/a4l7hi.jpg&#39;) no-repeat scroll left bottom; text-decoration: none;
color: #ff9600;
}
div#navmenu ul li a:hover span span, div#navmenu ul li.current_page_item a span span, div#navmenu ul li.current_page_item a:visited span span {
background: transparent url(&#39;http://i49.tinypic.com/2nqfle.jpg&#39;) no-repeat scroll right bottom; text-decoration: none;
color: #ff9600;
}

</style>

5.    Simpan template sobat

6.    Pilih tab Page Elemens -->> Add Gadget -->> HTML/Javascript

7.    Copi kode di bawah ini dan pastekan pada gadget sobat

<div id='navmenu'> <ul>

<li class='current_page_item'><a href='http://reaytkj.blogspot.com/'><span><span>Home</span></span></a></li>

<li class='page_item page-item-1'><a href='http;//raytkj.blogspot.com'><span><span>About</span></span></a></li>

<li class='page_item page-item-2'><a href='http;//raytkj.blogspot.com'<span><span>Contact</span></span></a></li> </ul> </div>

Simpan gadget sobat dan lihat hasilnya.

Selamat mencoba

Saya akan menjawab pertanyaan dari sobat jojo "gan log pengn nambahin menunya gmn crnya?

nih caranya. tambahkan kode dibawah ini 
</li> <li class='page_item page-item-1'><a href='http;//raytkj.blogspot.com'><span><span>About</span></span></a></li>
dan letakkan diantara kode </a></li>..dan..<li class='page_item page-item-2'>

jangan lupa ganti alamat url dan about/contact = sesuai keinginan anda.makasih

Tag : Tutorial