Ad Code

Responsive Advertisement

Ticker

6/recent/ticker-posts

New Cool And Awesome Navigation Or Tabs Menu For Blogger?


Hello Visitors,Hope you are always enjoying my small blog.Now a days without navigation or tabs menu difficult to manage our blog.Putting this menu widget we can easily go to another categories.This widget is color is Shining blue, and texts are white.This widget looks is simple and clean.This widget can attract your visitors easily.So, readers without wasting your time kindly add this tab menu on your blog.You can easily put on your blogger/blog.Just follow our easy steps and you are done;

                                                          LIVE PREVIEW

How To Add It On Your Blogger/Blog?

  • Log In To Blogger.com
  • Go To Your Blogger Dashboard
  • Navigate To Layout And Add A Gadget 
  • Select HTML/JavaScript And Paste The Given Below Code Inside The HTML Box.
<style>
#TechBlogGuide_menu {
background:url(http://4.bp.blogspot.com/-WyslXaanikQ/UcL6VyoDHiI/AAAAAAAABkc/DIL15rqZMVs/s1600/menu_TBG.png) no-repeat;
height:50px;
width:960px;
line-height:50px;
list-style:none;
margin-top:10px;
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
overflow:hidden;
}
#TechBlogGuide_menu li {
float:left;
border-right:1px solid #809FFE;
border-left:1px solid#809FFE;
}
#TechBlogGuide_menu li:first-child {
border-left:none;
}
#TechBlogGuide_menu li:last-child {
border-right:none;
}
#TechBlogGuide_menu li a{
text-decoration:none;
float:left;
display:block;
height:50px;
padding:0 20px;
color:#FFF;
}
#TechBlogGuide_menu li a.current, #TechBlogGuide_menu li a:hover, #TechBlogGuide_menu li a.tool:hover {
color:#622900;
text-shadow:1px 1px 0px #00477D;
}
#TechBlogGuide_menu li a.tool{
color:#000;
text-shadow:1px 1px 0px #00477D;
}
</style>

<ul id='TechBlogGuide_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='http://www.techblogguide.blogspot.com/'>GET>></a></li>
</ul>

  • Replace All The Highlighted Text(#) With Your Link.
  • That's All 

Post a Comment

0 Comments