Add Rollover Css Menubar For blogger

Oleh Unknown

28 Eylül 2012 Cuma

Bagikan :

Tweet

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

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

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/AVvXsEgiQddJKPMQMC5ZtiRLxqUArt1L_1UXaYGNbme_csufQQEkLlDp3t4sE5dIAvK0kriXJTWVHOF5_R7s7lepXVWl-sFxa5TrpT9Gvg7_MKFSax9sGVKm2zPx9AEYmaH2av-C24KlAUermT4/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...

Tag : CSS, HTML, Menu bar