Friday, September 28, 2012

Add Rollover Css Menubar For blogger

This is also nice menu-bar for blogger.Im using CSS and HTML for this menu-bar.It include nice hover effect.You can add it to your blog easily.Im include demo for figure-out easily.you can check my earlier menu-bar post post by clicking here

Demo

Rollover-Css-Menubar

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

#menu12 {
 position:relative; 
 display:block;
 width:350px;}
#menu12 ul {
 list-style-type: none;
 width: 800px;}
#menu12 ul li {
 display: block;
 float: left;
 width: 200px;
 height: 60px;}
#menu12 a, #menu a:visited {
 display: block;
 width:200px; 
 height:60px; 
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VqGL3Pa5FFA6UxZQQoGz0l95ibxPvlvmv_JNR4KwrJ8bU9Qf1IE-ImogMHDCIsHFDmqJiu_ITjqWwkLFWapQMoXUFKW8wAcHTD_ShWjJ6oiTs0BfJVALRFwo5zI84JRKE5GOQ5P8FMs/s1600/nav_block.jpg); 
 background-position:left top; 
 background-color:transparent; 
 text-align:center; 
 color:black; 
 line-height:60px; 
 text-decoration:none; 
 font-family:arial, sans-serif; 
 font-weight:bold; 
 margin-top:5px;
font-size:18px;}
#menu12 a:hover {
 background-position:left center; 
 line-height:60px; 
 overflow:hidden; 
 color:white;
}
#menu12 a#selected {
 background-position:left bottom; 
 line-height:60px; 
}
#menu12 a#selected:hover {
 color:white;
}

4. Go to blogger  Design > Page Element.

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<!--MenuBar Starts-->
<div id="menu12">
<ul>
<li><a href="#" id="selected">Home</a></li>
<li><a href="#">Menu Item </a></li>
<li><a href="#">Menu Item </a></li>
<li><a href="#">Menu Item </a></li>
</ul>
</div><!--MenuBar Ends--

Replace with your links.

7. Now save your HTML/Javascript'.

    You are done...

0 comments:

Post a Comment