How To Add Horizontal CSS3 Chunky Menu to Blogger
Demo
1.Login to your blogger dashboard--> Design- -> Edit HTML
2.Scroll down to where you see ]]></b:skin> tag .
3.Copy below code and paste it just After ]]></b:skin> tag
4.Click on Save Template,
5.Now click on 'Add a Gadget' on the sidebar.
6.Select 'HTML/Javascript' and add the one of code given below
7. Now Click on Save "Html Java Script" and You are done..
Cheers
Source: zubeta.com
Demo
1.Login to your blogger dashboard--> Design- -> Edit HTML
2.Scroll down to where you see ]]></b:skin> tag .
3.Copy below code and paste it just After ]]></b:skin> tag
<style type='text/css'> #top_navigation { background : transparent; width: 800px; height : 77px; list-style : none; margin-top : 7px; margin-bottom : 11px; width : 100%; } ul.nav { background : transparent; width: 800px; height : 57px; line-height : 31px; list-style : none; padding : 0 10px; font-size : 14px; } ul.nav li { display : inline; padding : 0; background : transparent; } ul.nav a { background : transparent; height : 30px; font-size : 16px; color : #808080; float : left; padding : 11px 19px 11px 16px; text-decoration : none; border-top: 1px solid #252525; border-bottom : 4px solid #252525; border-left : 1px solid transparent; border-right : 1px solid transparent; border-radius : 4px; -moz-border-radius : 4px; -webkit-border-radius: 4px; } ul.nav a:hover { background : #252525; border-top : 1px solid #252525; border-bottom : 4px solid #000; border-left : 1px solid #252525; border-right : 1px solid #252525; color : #FFF; padding : 11px 19px 11px 16px; border-radius : 4px; -moz-border-radius : 4px; -webkit-border-radius: 4px; } </style>
4.Click on Save Template,
5.Now click on 'Add a Gadget' on the sidebar.
6.Select 'HTML/Javascript' and add the one of code given below
<div id="top_navigation"> <ul class="nav"> <li><a href="Url here 1"> Home </a></li> <li><a href="Url here 2"> Your Blog </a></li> <li><a href="Url here 3"> About You </a></li> <li><a href="Url here 4"> More stuff </a></li> <li><a href="Url here 5"> Contact </a></li></ul> </div>
7. Now Click on Save "Html Java Script" and You are done..
Cheers
Source: zubeta.com
No comments:
Post a Comment