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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhlVzq_BVHLj_P69R0s9BvRXP-m7-B9i6GV_SO8vrWmC3n5C7jpM6muvBtplRJA-I47YXIljkAzzqJ3lSRvceoT-bsw0ofOfjb29L-9ZkECvq60MBKzUJ_2Ajw_0UlWbq8ots6O553hTdG/') 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigp_jZ992btC2R5Sf_MGXv2wWTbSOSrF7m4Ny223BhK9UcKHxvgidGIC1ytKyO6rckJgFTo8JLHRfxHJ3H4d7anarH8PWkg5EjfBKfGGfTGZSan-kOCc1xO_wreZJkM9c0stQhnDTbxnqh/') 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRrAGJRVuDHnG_-8sw9dLnDOKYIS7OlNIn_cm-XakD3Mcz8mzSqlLA2dHdqhObmxItlRgBqbBAruR0Sg8niYWN5u6hbCp2srD-uzVRoU57rJqbQcAvqO1xe16W4LCk46PjIXaKqg77mGvU/') 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
Very well written write-up. I literally enjoyed the concept described in the post. Once again nice work indeed.
dissertation help