Your Ad Here

 Iseng search dengan kata kunci Membuat Horisontal Menu CSS di Blogger, eh nemu satu tutor yang lumayan bagus juga. Bila ada temen2 blogger yang pengen bikin menu horisontal sendiri silakan dicoba.
Berikut Langkah Membuat Horisontal Menu CSS di Blogger :
  • Login ke Akun blogger kamu, dari halaman dashboard pilih tata letak kemudian pilih edit html.
  •  Cari kode </head>.
  • Kemudian copy kode dibawah ini, dan simpan setelah 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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhlVzq_BVHLj_P69R0s9BvRXP-m7-B9i6GV_SO8vrWmC3n5C7jpM6muvBtplRJA-I47YXIljkAzzqJ3lSRvceoT-bsw0ofOfjb29L-9ZkECvq60MBKzUJ_2Ajw_0UlWbq8ots6O553hTdG/&#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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigp_jZ992btC2R5Sf_MGXv2wWTbSOSrF7m4Ny223BhK9UcKHxvgidGIC1ytKyO6rckJgFTo8JLHRfxHJ3H4d7anarH8PWkg5EjfBKfGGfTGZSan-kOCc1xO_wreZJkM9c0stQhnDTbxnqh/&#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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRrAGJRVuDHnG_-8sw9dLnDOKYIS7OlNIn_cm-XakD3Mcz8mzSqlLA2dHdqhObmxItlRgBqbBAruR0Sg8niYWN5u6hbCp2srD-uzVRoU57rJqbQcAvqO1xe16W4LCk46PjIXaKqg77mGvU/&#39;) no-repeat scroll right bottom; text-decoration: none;
color: #ff9600;
}


</style> 

Catatan : script yang berwarna biru bisa kamu ganti dengan url gambar kamu.
  • Simpan template kamu.
  • Sekarang pergi ke Tata Letak - Dalam page element pilih add widget atau tambah widget - Kemudian pilih HTML / JAVASCRIPT. Lalu masukan kode scrript di bawah ini.
<div id='navmenu'>
<ul>

<li class='current_page_item'><a href='#'><span><span>Home</span></span></a></li>

<li class='page_item page-item-2'><a href='#' title='HTML Tutorials'><span><span>HTML</span></span></a></li>

<li class='page_item page-item-3'><a href='#' title='CSS Tutorials'><span><span>CSS</span></span></a></li>

<li class='page_item page-item-4'><a href='#' title='JS Tutorials'><span><span>Java Script</span></span></a></li>

<li class='page_item page-item-5'><a href='#' title='About us'><span><span>About</span></span></a></li>

<li class='page_item page-item-6'><a href='#' title='Contact us'><span><span>Contact</span></span></a></li>

</ul>
</div> 

selesai sekarang lihat hasilnya,,,

Contoh Horisontal Menu CSS di Blogger