Add this nice css blue navigation menu with hover effect in your blogger blog easily .
Follow simple step to adding this cool navigation menu in your blogger blog now --->>>>
* First go to your blogger DASHBOARD.
* Now click in design tab and edit HTML now.
* Click in Small box to expand your blogger template.
* Now find this code ]]</b:skin> by CTRL+F key.
* Now copy below code and paste before ]]</b:skin>
Follow simple step to adding this cool navigation menu in your blogger blog now --->>>>
* First go to your blogger DASHBOARD.
* Now click in design tab and edit HTML now.
* Click in Small box to expand your blogger template.
* Now find this code ]]</b:skin> by CTRL+F key.
* Now copy below code and paste before ]]</b:skin>
#header_menu_div ul { display: block; margin: 0; padding: 0; position: relative; }
#header_menu_div ul li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; }
#header_menu_div ul a { display: block; text-decoration:none; }
#header_menu_div ul ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; }
* html #header_menu_div ul ul { line-height: 0; } /* IE6 "fix" */
#header_menu_div ul ul a { zoom: 1; } /* IE6/7 fix */
#header_menu_div ul ul li { float: none; }
#header_menu_div ul ul ul { top: 0; }
/* Essentials - configure this */
#header_menu_div ul ul { width: 130px; }
#header_menu_div ul ul ul { left: 130px; }
/* Everything else is theming */
#header_menu_div ul li { border-right:groove 2px #3f5381; }
#header_menu_div ul li li { border:none }
#header_menu_div ul { height: 32px; }
#header_menu_div ul *:hover { background: none; }
#header_menu_div ul a { color: #fff; font-size: 12px; font-weight:bold; padding: 10px 12px; line-height:1; text-shadow:1px 1px 1px black; }
#header_menu_div ul li.hover a { color:#3f5381; background:#fff; opacity:0.85; filter: alpha(opacity=85); text-shadow:none; }
#header_menu_div ul li a:hover { background:#728fd7; color:#fff; opacity:1; filter: alpha(opacity=100); }
#header_menu_div ul ul { top: 32px; }
#header_menu_div ul ul li a { background:#fff; color:#3f5381; margin:0; padding:6px 12px; text-shadow:none; font-weight:normal; }
#header_menu_div ul ul a.hover { }
#header_menu_div ul ul a { border-right: none; border-bottom:none; opacity:0.85; filter: alpha(opacity=85); }
#header_menu_div {
width:950px;
margin:0 auto;
background:#364976 url('http://i.imgur.com/kg8jQ.png');
background-position: left bottom;
background-repeat:repeat-x;
z-index:20;
text-align:left;
}
* Now save your blogger template.
* Now again go to your blogger Dashboard.
* And click in design tab and now you are here---->>> Page element.
* Now click in add gadget which is below header in your blog.
* When open new window click in HTML/javascript from list. .
* When open new blank box copy below code and paste in blank box.
<div class='menu-container clearfix' id='header_menu_div'><div class='menu-header'><ul class='menu' id='menu-header'><li class='menu-item menu-item-type-custom menu-item-home menu-item-736' id='menu-item-736'><a href='YOUR BLOG URL'>Home</a></li> <li class='menu-item menu-item-type-post_type menu-item-941' id='menu-item-941'><a href='URL1'>TAB1 TITLE</a> </li> <li class='menu-item menu-item-type-post_type menu-item-941' id='menu-item-941'><a href='URL2'>TAB2 TITLE</a> </li> <li class='menu-item menu-item-type-post_type menu-item-1109' id='menu-item-1109'><a href='URL3'>TAB3 TITLE</a></li> <li class='menu-item menu-item-type-post_type menu-item-1109' id='menu-item-1109'><a href='URL4'>TAB4 TITLE</a></li> <li class='menu-item menu-item-type-post_type current-menu-item page_item page-item-1170 current_page_item menu-item-1195' id='menu-item-1195'><a href='YOUR FEEDBURNER URL'>RSS Feed</a></li> <li class='menu-item menu-item-type-post_type current-menu-item page_item page-item-1170 current_page_item menu-item-1195' id='menu-item-1195'><a href='YOUR TWITTER URL'>Follow Me</a></li> <li class='menu-item menu-item-type-post_type current-menu-item page_item page-item-1170 current_page_item menu-item-1195' id='menu-item-1195'><a href='YOUR FEEDBURNER EMAIL SUBSCRIPTION URL'>Email Updates</a></li> </ul></div></div>
Note:- Change highlighted text in above code with your own ok.
* Now click to save your HTML/javascript and now yoy are done.
|
0 Responses So Far: