Today I will give you new tips to my friend about how to create a horizontal navigation menu with css menu in blogspot (blue sprite version) so we can blog look neater and more beautiful.:)
Navigation menu by default is not available in blogspot template. Version of the blue horizontal navigation menu sprite is a variant of the previous navigation menus such massive blue navigation menu using css script. For more details, you can see the image below:
To make it do the following procedure:
1. Log in to your blogger
Select the Dashboard - Layout - Edit HTML
Find the following code:
]]></b:skin>
2. At the top of the code enter the following code
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
float:left;
margin:0;
}
For More Clearly, you can see the image below:
3. Click the "Save Templete"
4. Open the page "Design / Layout -> Page Element"
5. In the header element, click the "Add Gadget "
Note: If you use the default template (default) blogger then the "Add gadgets" does not appear in the header, to display it can see my post on how to display the "Add Gadget Header / add the gadget header" in the header
6. Select the gadget html / javascript
enter the following script:
<ul id="menu">
<li class="button"><a class="current" href="http://www.rizaltips.com">Home</a></li>
<li class="button"><a href="http://www.rizaltips.com">Blogger Tips</a></li>
<li class="button"><a href="http://www.rizaltips.com">SEO</a></li>
<li class="button"><a href="http://www.rizaltips.com">F.A.Qs</a></li>
<li class="button"><a href="http://www.rizaltips.com" target="_blank">Contact Me</a></li>
</ul>
</div><!-- End of Nav Div -->
Note:
In the script above, http://www.rizaltips.com Replace all signs at href = "http://www.rizaltips.com" with the target url or destination url.
for example: http://rizalblogmaster.blogspot.com/
such as: Home, Blogger Tips, SEO Tips ..., replaced with the text to be displayed in the menu to your liking.
In order for the script to function properly, then it should be copied to a notepad or word pad kemdian your blog edited as needed.
Hopefully my posts useful to you all. Have a nice blogging.:)
0 Comment:
Post a Comment