Cara membuat Horizontal Menu dengan CSS di Blogger

Tweet

[ I ]

Horizontal Menu sangat mempengaruhi kecantikan Blog atau website, ini juga bisa disebut dengan mahkota suatu situs, dan ini adalah salah satu yang penting untuk di pasang dalam blog, kali ini kumpulan-tutorial.com akan memberikan beberapa tutorial untuk membuat menu tersebut. langsung saja nih tutorialnya:

1. Login ke blogger
2. Pilih tab Design > Edit HTML
3. Cari kode </head>
4. Kemudian copy kode script di bawah ini dan pastekan sebelum kode </head>

<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
6. Pilih tab Page Elemens > Add Gadget > HTML/Javascript
7. Copy kode di bawah ini dan pastekan pada ke dalam gadget

<div id='navmenu'><ul><li class='current_page_item'><a href='http://www.kumpulan-tutorial.com/'><span><span>Home</span></span></a></li> <li class='page_item page-item-1'><a href='#'><span><span>About</span></span></a></li><li class='page_item page-item-2'><a href='#'><span><span>Contact</span></span></a></li></ul></div>

Sekarang lihat hasilnya :)

Artikel Yang Mungkin Anda Suka: