Beautiful Menu Box for Blogger blog

Today, In this tutorial we learn How to Add Beautiful Menu box bar in blogger blog. You can very easily change the font size, color, and you put this gadget anyplace you need in your blog. This gadget use lite "HTML/JavaScript" if you utilize to your blog, they have never influenced your website or blog speed. So, Let’s see how to Add Beautiful Menu Box for Blogger blog.

Step # 1: Firstly login your blogger account and go to Template > Edit HTML

Step # 2: Now Press Ctrl + F and open search box

Step # 3: Search ]]></b:skin> Tag

Step # 4: Copy below code before  ]]></b:skin> 

///////****** bloggerandmoney.blogspot..com******//////{ list-style:none; margin:0px; padding:0px;}#menu4 { width: 200px; border-style: solid solid none solid; border-color: #ffffff; border-size: 5px; border-width: 0px; } #menu4 li a {   height: 32px;   voice-family: "\"}\"";    voice-family: inherit;   height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #ffffff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg4ZkgS22LKN2lvVRQ-AKIhqlzIe416aDGVQexN1_Ic05mr3CiJ6OBpSxplUoE5yKCj3igYwFR-r6xHqTM_J_7Z4K07NBy_jNqDmvJRQAQp9fOosDY4gDwQZRbgmRsWGGlzvtcsIrY8OE/s1600/MyBloggerToolsMenuBlue.gif); padding: 7px 0px 0px 30px; } #menu4 li a:hover { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg4ZkgS22LKN2lvVRQ-AKIhqlzIe416aDGVQexN1_Ic05mr3CiJ6OBpSxplUoE5yKCj3igYwFR-r6xHqTM_J_7Z4K07NBy_jNqDmvJRQAQp9fOosDY4gDwQZRbgmRsWGGlzvtcsIrY8OE/s1600/MyBloggerToolsMenuBlue.gif) 0 -32px; padding: 7px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg4ZkgS22LKN2lvVRQ-AKIhqlzIe416aDGVQexN1_Ic05mr3CiJ6OBpSxplUoE5yKCj3igYwFR-r6xHqTM_J_7Z4K07NBy_jNqDmvJRQAQp9fOosDY4gDwQZRbgmRsWGGlzvtcsIrY8OE/s1600/MyBloggerToolsMenuBlue.gif) 0 -64px; padding: 7px 0 0 30px; } ///////****** bloggerandmoney.blogspot.com******//////

Step # 5: Now Save Template

Step # 6: Now Go to Layout > Add a Gadget > HTML/Javascript

Step # 7: Copy the following code and paste into the HTML/Javascript

<div id="menu4"> <ul>   <li><a
href="http://www.yousitename.com/"
title="Home">Home</a></li>   <li><a
href="http://www.yousitename.com/" title="About Me">About Me</a></li>   <li><a
href="http://www.yousitename.com/" title="My Blogger Tools">My Blogger Tools</a></li>  
<li><a href="http://www.yousitename.com/" title="Blogger SEO">Blogger SEO</a></li>   <li>
<a href="http://www.yousitename.com/" title="Contact Us">Contact Us</a></li>    </ul></div>

 Customization:
1. Red color URL replace with your related URL
2. Replace Blue Color Worlds with your Title

Step # 8: Click on Save and enjoy

I hope this post are helpful for you. So, Please share with your friends.

Share on Google Plus

About Unknown

My Name is Usman Ali and i am SEO Consultant, Online Mentor who has been working since 2012. Blogging is my pession. I can help you in Make Money Online, Blogging, Teachnology, Tips and Tricks, How to and Specially SEO Related issues.