[Latest News][6]

Add Meta Keywords
AdSense alternative to earn money
Article in 60 minutes
best blog niche
best ptc sites with high pay
blog
blog seo
blog traffic
Blogger
blogging
blogging for seo success
blogging tips
Business
Create Stellar Content
critical error start menu 2018
critical error start menu isn't working
disable windows 10 update registry
Download Logo for Free
DropDown Menu in Blogger Blog
earn Money only for watching Videos Online
Earn Through Videos
eBay
Free Logo Design
Free Logo Mocup
Freelancers
Freelancing Websites
google search results ranking
grow organic search traffic
How to grow organic search traffic
how to improve google search ranking
how to increase blog traffic fast
how to increase blog traffic for free
how to rank youtube videos on first page of google
how to remove YouTube logo
how to remove youtube logo from embedded video 2018
how to stop windows 10 update assistant
how to stop windows 10 update in progress
How to Use WordPress – Full Guide Step By Step
image optimization seo
increase blog traffic 2017
increase website traffic fast
internet search engines
Logo PSD file for Free
Make Money
make money blogging 2018
Make Money Online
make money online from internet
Make money with Affiliate Marketing
Make Money With Google AdSense
Make Money With Infolinks
Make Money with Youtube and Dailymoton
microsoft windows 10 upgrade
Profitable Business to Invest
remove YouTube logo
search engine list
SEO
seo youtube meaning
Successful Affiliate Marketing
tactics for writing First-Class Article
Twitter
Twitter Followers
Twitter Unfollow Script
Ways to make money from Internet
Ways To Make Your Blog Popular
what is image optimization
what is youtube seo
windows 10 critical error your start menu isn't working
windows 10 free upgrade 2018
windows 10 free upgrade download
windows 10 home disable automatic updates
windows 10 start menumerror
windows 10 update permanently?
windows 8.1 to windows 10 upgrade free download full version
windows10 start menu critical error 2018
WordPress. WordPress – Full Guide Step By Step
Youtube
youtube seo 2017
youtube seo 2018
youtube seo software
youtube seo tool
youtube seo tutorial

Add Simple DropDown Menu in Blogger Blog


Add Simple DropDown Menu in Blogger Blog
Add Drop down Menu In Your blog Its very easy And Simple just Follow the instruction A drop down menu is really essential tool or widget for any blog. It gives real feel or great look of the template or blog. Drop down menu lets users easily navigate through different parts of the blog. In this tutorial i will tell you how to add simple navigation menu or Drop down menu on your blog. The good thing about this widget is that it requires no jquery and is coded completely in Html and CSS. So it loads really fast. Lets Start

1. Go to Blogger Dashboard and click on Layout.
2.Click on Add Gadget (Below Header not on sidebar) and Choose Html/Javascript Widget.
3. Now Paste below code into it. 
      <div id='mbwnavbar'>      <ul id='mbwnav'>        <li>          <a href='#'>Home</a>        </li>        <li>          <a href='#'>About</a>       </li>        <li>          <a href='#'>Contact</a>        </li>         <li>           <a href='#'>Sitemap</a>            <ul>                <li><a href='#'>Sub Category #1</a></li>                <li><a href='#'>Sub Category#2</a></li>            </ul>        </li>      </ul>    </div>
 4. Now Change the text in Bold with appropriate label and also replace the url highlighted in Green color (#).

5. To add another tab to the drop down menu then add below code before </ul>. or delete that code from above code to remove any menu.

<li>       <a href='#'>Contact</a> </li>


6. Now we will add CSS, Go to Blogger Dashboard and click on Template and click on Edit Html. First Backup your template before doing this.


Click Anyware of Template The Click Ctrl F and Find This>>>


]]></b:skin>



    8. Paste this code above the code you have searched this ONE


                #mbwnavbar {
                    background: #464849;
                    width: 960px;
                    color: #FFF;
                    margin: 0px;
                    padding: 0;
                    position: relative;
   border-top:0px solid #960100;    height:35px;}#mbwnav {    margin: 0;    padding: 0;}#mbwnav ul {    float: left;    list-style: none;    margin: 0;    padding: 0;}#mbwnav li {    list-style: none;    margin: 0;    padding: 0;    border-left:1px solid #333;    border-right:1px solid #333;    height:35px;}#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {   color: #FFF;   display: block;   font:normal 12px Helvetica, sans-serif;    margin: 0;    padding: 9px 12px 10px 12px;    text-decoration: none;      }#mbwnav li a:hover, #mbwnav li a:active {    background: #028490;    color: #FFF;    display: block;    text-decoration: none;    margin: 0;    padding: 9px 12px 10px 12px;              }#mbwnav li {    float: left;    padding: 0;}#mbwnav li ul {    z-index: 9999;    position: absolute;    left: -999em;    height: auto;    width: 160px;    margin: 0;    padding: 0;}#mbwnav li ul a {    width: 140px;}#mbwnav li ul ul {    margin: -25px 0 0 161px;}#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul {    left: -999em;}#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {    left: auto;}#mbwnav li:hover, #mbwnav li.sfhover {    position: static;}#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {    background: #028490;    width: 120px;    color: #FFF;    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;  }#mbwnav li li a:hover, #mbwnavli li a:active {    background: #70b6bd;    color: #FFF;    display: block;     margin: 0;    padding: 9px 12px 10px 12px;    text-decoration: none;}


9. Now Save the template and you will have drop down menu added to your blog enjoy.

If the colour not match with your blog Templates you can change listed below.Change #464849 to change background color of navigation bar which is currently dark grey.Change #028490 to change the color of tab on mouse hover.Change #028490 to change the color of Drop down menuChange #70b6bd to change the color of Drop down on mouse hover

If you are facing any problem concerning this the article you can comment below . If You Like Please Share It

CK

Its me Ck a full time blogger and Internet Researcher, I love to research on internet and discover new hacks and then share them with my aweosme viewers

Start typing and press Enter to search