Attractive CSS Horizontal Menu For Blogger/Websites
CSS Horizontal Menu |
This is a another nice css horizontal menu for your blogspot blog or website.To add it to your site follow the steps below.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag.
<style type='text/css'> #nav { width:100%; margin-left:-40px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXJDZ6HCIRwTduMmTDbvBLBQLsxsF_YGYp0Uv_iqU5_KAXGvLIqiu39PJZudFi_i_I_-ZJ1CxyVzdVR6UZG2u4Yu18lkA6SWQKF33LmNE3v_htBMZKZzgKNOmiJa6sWH59oJIAzHyft4b/) repeat-x; } #nav li { float: left; display: block; } #nav li a { float: left; display: block; padding: 12px 18px 12px 18px; text-transform: uppercase; text-decoration:none; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0R1fcfETHVE9qvTQbeh1vX7SMaxHpzHzaDtT4uXCZjY9sNEsHoUm5NpOfDlQ80dKFHRbApzKRj4d3CrXNtENYnW5WybgxzDxuB3CRVXB8vb7S-Of7Ob1TH5qfue9i2Qj-e0s_488W3bU/) no-repeat top right; color:#ffffff; } #nav li a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0R1fcfETHVE9qvTQbeh1vX7SMaxHpzHzaDtT4uXCZjY9sNEsHoUm5NpOfDlQ80dKFHRbApzKRj4d3CrXNtENYnW5WybgxzDxuB3CRVXB8vb7S-Of7Ob1TH5qfue9i2Qj-e0s_488W3bU/) no-repeat right -40px; color:#ffffff; text-decoration:none; } ul#nav li.current_page_item a, ul#nav li.current-cat a { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0R1fcfETHVE9qvTQbeh1vX7SMaxHpzHzaDtT4uXCZjY9sNEsHoUm5NpOfDlQ80dKFHRbApzKRj4d3CrXNtENYnW5WybgxzDxuB3CRVXB8vb7S-Of7Ob1TH5qfue9i2Qj-e0s_488W3bU/) no-repeat right -80px; } #nav li ul { display: none; } </style>
Note : Host mainbg.jpg and navi-bg.jpg images yourself.
Attractive CSS |
4.Now save your template.
5.Go to Layout-->Page Elements and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.
<ul id="nav"> <li class="current_page_item"><a href="#">Home</a></li> <li><a href="#" title="#">HTML</a></li> <li><a href="#" title="#">CSS</a></li> <li><a href="#" title="#">PHP</a></li> <li><a href="#" title="#">MySQL</a></li> <li><a href="#" title="#">About</a></li> <li><a href="#" title="#">Contact</a></li> </ul> <div class="clear"></div>
You are done.
don't forget to comment ya..
Comments
Post a Comment
Please Leave Your Comments