Add or make simple CSS Drop Down Menu like WordPress on Blogger Blogspot.If you want to put drop down menu on home page then this tutorial is very simple and easy to make drop down links which you want to show. Like if you have too much pages on home page like Blogger Widget, Blogger Tutorials, Boost Traffic or also you have embed some blogger tools like Adsense Converter, Color Code Generator/Picker then you can easily make pages behind this means make pages and hide it and make drop down menu manually to make your blogger beautiful and when visitors comes on your site or blog then they easily find which they want like if visitor comes on site and he/she find HTML Color Code Generator then he/she go to tools and simple find then Color Code Picker.
How I Can Write 100% Original Content For Blogger
How I Can Use Webmaster Tools Properly For Blogger
How I Can Boost Traffic With Targeted Country On Blogger
What Is The Advantages/Benefits To Add Drop Down Menu On Blogger:
By adding drop down menu on blogger your visitor is easily find which they want and which they want to do. It is a simple steps which is every one find first if they can not find then they also left the blog and go to another to find simple steps and not fell in complex means if you make the pages with beautiful heading and put good links then 100% visitor are stay on your site my suggestion is that every blogger should add this amazing working on your site or blog.
 |
| Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger |
Adding Drop Down Menu With Best Simple Blog Tricks:
Now we are going to add the drop down menu on your blog by hide the pages and make drop down using this pages.
Go to Blogger.com
Go to Template.
First Download your Full Template on your computer. Because if you make wrong changes then you can easily upload your full template and your blog come to again their position.
When you download your template.
Click On Edit HTML. Keep in mind There is New HTML Interface if you not working before this features then click this link and learn how to handle it.
How I Can Handle New Interface Of Blogger HTML Editor
When your in position to work it then according to above link tutorial click Ctrl+F to find below tag.
]]></b:skin>
When you find this tag then above/before it paste the below code.
/*----- TOB Drop Down Menu ----*/
#mbtnavbar {
background: #04B431;
width: 1000px;
color: #FE2E2E;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #FE2E2E;
height:45px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:45px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #190714;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #190714;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 234px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 136px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #FE2E2E;
width: 120px;
color: #190714;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #00BFFF;
color: #190714;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
Now Save your Template.
You have done.
How I Make My Blogger Good Looking Best Tricks
How To Make Website Like My Blogger Tricks To Get Best Alexa Rank
How Remove Photos/Images Border In Simple Or Awesome Inc Templates Blogger
Adding Links Of Pages In HTML/Javascript:
Now it turn to add links in of pages of drop down menu its very simple and customizable any time and add new links any time it you choose only template embed links then it has big disadvantage. Disadvantage is when ever you want to make new link then you will go to template it also effect the template files that's why i choose this type of drop down menu when you want to add then just go to layout and then gadget and go to HTML and do that what you want.
Copy the below code and replace # this Hash tag with your page or post links and also change the heading. Like Get Social Bookmarking Button with your desire heading.
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href="http://trickofblogging.blogspot.com/">Home</a></li>
<li>
<a href=" ######### ">Blogger Widget</a>
<ul>
<li><a href="#">Get Social Bookmarking Button</a></li>
<li><a href="#">Recent Post Code</a></li>
<li><a href="#">Page Navigation Code</a></li>
<li><a href="#">Facebook Like Button Code</a></li>
</ul>
<li>
<a href="#">Blogger Tutorials</a>
<ul>
<li><a href="#">Google Page Ranking 2</a></li>
<li><a href="#">Improve SEO</a></li>
<li><a href="#">Blogger Analytics</a></li>
<li><a href="#">Social Bookmarking Blogger</a></li>
</ul>
<li>
<a href="#">Blogger SEO</a>
<ul>
<li><a href="#">Boost Traffic</a></li>
</ul>
<li>
<a href=" ######### ">Blogger Tools</a>
<ul>
<li><a href="#">Google Adsense Converter</a></li>
<li><a href="#">Color Code Generator </a></li>
</ul>
</div>
When you put or add links then paste it by doing according to below tutorial.
Go to Blogger.com.
Go to Layout.
Go to Gadget.
Click Add A Gadget.
Go to HTML/JavaScript.
Paste the code in HTML box.
Save this box.
You have done correctly.
Now if you want to add drop down menu for blog post or between the post then follow the below link to add the drop down link menu in blog post.
Add A Simple Drop Down Menu To Blogger Blog
Now according to second code where i highlighted the text how to replace easily.
To change the Background Color of Drop Down Menu simply add your desire color code #04B431.
To change the Color replace the code #FE2E2E.
To change the Font of Drop Down Menu replace font:normal 12px Helvetica, sans-serif.
Now your work is complete if you face any problem then comment me without any hesitation.
To Generate The Color Code click go with this link. Color Code Generator Tool
Post a Comment
Thanks For Comment This Blog Post. Like It And Subscribe It.