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 www.mybloggertools.com -->
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);/*Menu CSS*/#cssmenu,#cssmenu >ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPHYba-tIAY_OJmMTgUyyjgL3WNl0BYaTyxQ4MTKMqd7aBcl7k3JCLeFFE8duEodPEp5bgdOya4o5j5Boqx46sdMvy4qCNL9wYXxYC-WotJ3pw2Rdd_huO5KTnNzMjjgXcd-GZq_YWFcc/s1600/MyBloggerToolsPattern012.png) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPHYba-tIAY_OJmMTgUyyjgL3WNl0BYaTyxQ4MTKMqd7aBcl7k3JCLeFFE8duEodPEp5bgdOya4o5j5Boqx46sdMvy4qCNL9wYXxYC-WotJ3pw2Rdd_huO5KTnNzMjjgXcd-GZq_YWFcc/s1600/MyBloggerToolsPattern012.png) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW_WpiiZIF06w-E_6XMUJ-6zs4YU3ll96tOWiKZNTaIugwiDXM6ZuPxdT2q_vz_tp5FTkwUXlrDc1NOi6TNSn5sUidflFW2P7ugglpfsJ8Yvv-vuWB5QumFqO5UI4hU9JBGK-ZF8zTDL0/s1600/MyBloggerToolsPattern013.png) 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 > li.active > a,#cssmenu > ul > li ></style><!--My Blogger Tools www.mybloggertools.com-->
<!-- customize your menus Links -->
<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="last"><a href="http://www.mybloggertools.com/"><span>Blogger Template</span></a>
<li class="last"><a href="http://www.mybloggertools.com/"><span>My Blogger Tools</span></a>
<li class="last"><a href="http://www.mybloggertools.com/"><span>SEO</span></a>
<li class="last"><a href="http://www.mybloggertools.com/"><span>Backlinks</span></a>
<li class="last"><a href="http://www.mybloggertools.com/"><span>Java Tools</span></a>
</li>
</li></li></li></li></ul>
</div>
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="http://www.mybloggertools.com/"><span>New Button</span></a>
How To Make Money Online ...:::: Earn Methods ::::...
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.
Related Posts: E-Mail Subscribe Box For Blogger
Awesome post with useful content thanks for sharing the much informative blog in this area.
ReplyDeleteBest Online Software Training Institute | HTML5 CSS3 Training
The IEEE NoSQL Domain projects enables final year CSE students with little or no experience to start developing the knowledge and skills necessary to become an NoSQL Security specialist. At WISEN we provide CSE students of final year with information and resources necessary to begin building a strong foundation toward “career readiness”.
ReplyDelete