Add hover box effect navigation menu in blogger blog. ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

Hi friends now add this stylish box effect hover style navigation menu in blogger.

PREVIEW:-

Follow simple and easy step to adding this special menu in blogger---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* CLick in small box to expand your blogger template.

* Find this code ]]</b:skin> by CTRL+F key.

* Copy below code and paste before ]]</b:skin>

.navcontainer
{
height: 20px;
width: 970px;
float: left;
}
#nav1
{
height: 20px;
}
#nav1, #nav1 ul
{
line-height: 1;
list-style-image: none;
list-style-type: none;
margin: 0;
padding: 0;
}
#nav1 ul
{
float: left;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
}
#nav1 li
{
float: left;
font-size: 0.9em;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
}
#nav1 ul li
{
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
}
#nav1 a
{
color: #FFF;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#nav1 li
{
color: #ffffff;
float: left;
line-height: 30px;
font-weight: normal;
font-size: 10px;
text-transform: uppercase;
}
#nav1 li a:hover
{
border-style: dotted;
border-width: thin;
background: none;
text-decoration: none;
color: #FF5050;
background-color: #333333;
}
#nav1 li:hover, #nav1 li.sfhover
{
position: static;
}
#nav1 li ul ul
{
margin: -29px 0 0 15em;
border-top: 1px solid #dedbd1;
}
#nav-left
{
float: left;
display: inline;
width: 600px;
}

* Now click to save your blogger template.

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

* Now you are here ---->>>> Page Element.

* Click in Add gadget which is below your blogger header.

* 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='navcontainer'>
<div id='nav-left'>
<ul id='nav1'>
<li>
<a href='YOUR BLOG URL HERE' title='Home'>Home</a>

</li>
<li>
<a href='TAB1 URL HERE'>TAB1 TITLE HERE</a>
</li>
<li>
<a href='TAB2 URL HERE'>TAB2 TITLE HERE</a>
</li>
<li>
<a href='TAB3 URL HERE'>TAB3 TITLE HERE</a>
</li>
<li>
<a href='TAB4 URL HERE'>TAB4 TITLE HERE</a>
</li>

</ul>
</div>
<div style='margin-top: 5px; text-align:right;'>
<a href='YOUR_BLOG_URL_HERE/feeds/posts/default' rel='_self'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4UlZJPn8ODwwEU3A0aIAy2Bgm4xepbb-l4Fkw9B1V9yLk5Or2fWld393CtaJaLTtFamzF4Fnlc6hLqn0Hwo_9Yys5WK6w2LkKmHyDcNaO-skUzywW1OXYRASZ9CkJc46V9LAmOPplaTg/' style='margin:0 4px 0 0;' title='Post Feeds'/>
</a>
<a href='YOUR_TWITTER_URL_HERE' rel='follow' title='Follow me on Twitter!'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxcaqoF1k9ZU_TF6FWdmuNj0pRfrgEmogmSc4pqlRRHWENMwc7zMwjNMdBNw6H8qgVp-rdtZ_GzQ5d_qGcYw1qr30P5fua03cVGaHqXPJpFZG1ogZBoQxw5IhcxsAjgf-bTYtcrPQq_IQ/' style='margin:0 4px 0 0; ' title='Follow me on Twitter!'/>
</a>
</div>
</div>