Blogger9:- Add white tech naviagtion menu in blogger blog easily. 0

Hello friends now add white tech navigation menu in your blogger blog easily.

Follow simple and easy step to adding this best white tech navigation menu---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* 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>

#cat-menu { background:#fbfbfb url(http://www.freshthemes.com/demo/daily/wp-content/themes/daily/images/bg-menu.gif) repeat-x left top; height:39px; border-top:1px solid #e0e0e0; border-bottom:3px solid #326693; }
#catt-menu { background:#fbfbfb ;  border-bottom:1px solid #326693; height: 24px;}
/* category navigation */
.nav { z-index:99; float:left; margin:0px; padding:0px; list-style:none; line-height:1; height:39px; }
.nav a { position:relative; color:#444; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; }
.nav li a { background:url(http://www.freshthemes.com/demo/daily/wp-content/themes/daily/images/bg-nav-sep.png) no-repeat right 0; font-size:12px; font-weight:bold; padding:0 15px; text-decoration:none; border-bottom:3px solid #326693; line-height:39px; }
.nav li a:hover, .nav li a:active, .nav li.first a { background:#fff url(http://www.freshthemes.com/demo/daily/wp-content/themes/daily/images/bg-nav-sep.png) no-repeat right 0; color:#326693; line-height:39px; border-bottom:3px solid #A3bb43; }
.nav li a:hover { text-decoration:none; }
.nav li.current-cat a, .nav li.current-cat-parent a { background:#fff url(http://www.freshthemes.com/demo/daily/wp-content/themes/daily/images/bg-nav-sep.png) no-repeat right 0; line-height:39px; border-bottom:3px solid #A3bb43; }
.nav li.current-cat li a, .nav li li.current-cat a, .nav li.current-cat-parent li a { background:#fbfbfb; line-height:30px; border-bottom:none; }
.nav li a.sf-with-ul {  }
.nav li ul { background:#fbfbfb; position:absolute; left:-999em; width:178px; margin:0px 0px 0px -1px; border:1px solid #ECEDE8; border-width:1px 1px 0px; z-index:999; }
.nav li ul li { border-top:1px solid #fff; border-bottom:1px solid #ECEDE8; border-right:none; }
.nav li ul li a { background:#fbfbfb; width:147px; padding:0px 15px; color:#333; font-size:12px; font-weight:normal; border-bottom:none; line-height:30px; }
.nav li ul li a.sf-with-ul { padding:0 15px; }
.nav li ul li a:hover { background:#fbfbfb; color:#326693; text-decoration:underline; line-height:30px; border-bottom:none; }
.nav li ul ul { margin:-32px 0px 0px 177px; }
.nav li ul ul li a {  }
.nav li ul li ul li a {  }
.nav li:hover,.nav li.hover { position:static; }
.nav li:hover ul ul, .nav li.sfhover ul ul,
.nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
.nav li:hover ul, .nav li.sfhover ul,
.nav li li:hover ul, .nav li li.sfhover ul,
.nav li li li:hover ul, .nav li li li.sfhover ul,
.nav li li li li:hover ul, .nav li li li li.sfhover ul { left:auto; }
/* category navigation indicator */
.nav .sf-sub-indicator { display:none; }
.nav li ul .sf-sub-indicator { background:url(http://www.freshthemes.com/demo/daily/wp-content/themes/daily/images/ico-arrow.png) no-repeat; position:absolute; display:block; right:0.4em; top:0.9em; width:10px; height:10px; text-indent:-999em; overflow:hidden; }

* Now save your blogger Template.

* Again go to your blogger Dashboard and click in design tab.

* Now you are here--->>> Add new element.

* Click in add Gadget which is below blogger Header and when open new window click in HTML/Javascript from list.

* When open new blank box copy below code and paste in blank box.

<div id='cat-menu'>
<ul class='nav' id='cat-nav'>
<li>
<a dir='ltr' href='YOUR BLOG URL HERE'>HOME</a>
<ul class='children'>
<li>
<a dir='ltr' href='TAB1 URL HERE'>TAB1 TITLE HERE</a>

</li>
<li>
<a dir='ltr' href='SUB TAB1 URL HERE'>SUB TAB1 TITLE</a>
</li>
</ul>
</li>
<li>
<a dir='ltr' href='SUB TAB2 URL HERE'>SUB TAB1 TITLE</a>
</li>
<li>
<a dir='ltr' href='TAB2 URL'>TAB2 TITLE</a>
</li>
<li>
<a dir='ltr' href='TAB3 URL'> TAB3 TITLE</a>

</li>
<li>
<a dir='ltr' href='TAB4 URL'>TAB4 TITLE</a>
</li>
<li>
<a dir='ltr' href='TAB5 URL'>TAB5 TITLE </a>
</li>
<li>
<a dir='ltr' href='TAB6 URL'>TAB6 TITLE</a>
</li>
<li>
<a dir='ltr' href='TAB7 URL'>TAB7 TITLE</a>
</li>

</ul>
</div>

Note:- Change Highlighted text in above code with your own ok

* Now save your HTML/Javascript and you are done.

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: Blogger9:- Add white tech naviagtion menu in blogger blog easily. ~