Friday, July 31, 2015

Navigation Menu Widget CSS And CSS3 For Blogger

The navigation menu is an essential part of any blog. This is the awesome green color (CSS) navigation menu which is built with pure CSS, HTML, CSS3 and images. This navigation menu good for visitors to easily get the required content the whole blog. So, lets get started, how to add a navigation menu in your blogger blog.

How To Add Navigation Bar To Your Blogger Blog

1: Go to Your >>> Blogger Account. >>> Click Dashboard and then go to (Layout)

2: Now click on Add a >>> Gadget link >>> (In The Header Area) 

3: After click on Add a >>> (Gadget link) A >>> (Pop-Up) box will open.

4: Now Click >>> (HTML/JavaScript)

5: After select (HTML/JavaScript)  add below code in this section and click Save.

<!-- My Blogger Tools -->
<style type="text/css">@import url(;/*Menu CSS*/#cssmenu,#cssmenu >ul{background:url( repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu{width:auto;zoom:1}#cssmenu > ul{background:url( repeat;margin:0;padding:0;position:relative}#cssmenu > ul li{margin:0;padding:0;list-style:none}#cssmenu > ul > li{float:left;position:relative}#cssmenu > ul > li >a{padding:14px 26px;display:block;color:white;font-size:14px;text-decoration:none;text-transform:uppercase;text-shadow:0 10px 0 #0d0d0d;text-shadow:0 1px 0 rgba(0,0,0,0.7);line-height:18px}#cssmenu>ul>li:hover>a{background:url( repeat;text-shadow:0 1px 0 #97321f;text-shadow:0 1px 0 rgba(122,42,26,0.64)}#cssmenu > ul > li > a > span{line-height:18px}#cssmenu > ul > > a,#cssmenu > ul > li ></style><!--My Blogger Tools>
<!-- customize your menus Links -->
<div id="cssmenu">
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="last"><a href=""><span>Blogger Template</span></a>
<li class="last"><a href=""><span>My Blogger Tools</span></a>
<li class="last"><a href=""><span>SEO</span></a>
<li class="last"><a href=""><span>Backlinks</span></a>
<li class="last"><a href=""><span>Java Tools</span></a>

6: After Save (JavaScript) code your navigation menu is ready to use.

Yellow color is your Navigation Bar Text and Red color is your blog link

Now you change some settings, simply changed above Red link to your blog URL, Home, Blogger Template, Blogger Tools, SEO, Backlinks, Java Tools, you also change icon name what you want to do. And if you and another "Icon Button Bar" just add below code to above </li>

<li class="last"><a href=""><span>New Button</span></a>

Save all settings and enjoy your beautiful green navigation bar. If you face any error to install above code to your blogger, comments below, I am very happy to solve your issue.

                          How To Posts HTML-CSS Code In Blogger
                     Popular Posts Widget For Blogger
Previous Post
Next Post


  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training in India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

  2. Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition.

    java training in bangalore

  3. Awesome post with useful content thanks for sharing the much informative blog in this area.
    Best Online Software Training Institute | HTML5 CSS3 Training