Dynamic Mega Drop Down Menu For Blogger

How to install a dynamic mega drop down menu bar into your blogger blog - In my previous article I already shared with you a responsive mega drop down menu for your blog ( You can find that article here - Ajax mega drop down menu for blogger), But today I'm going to share with you a new and dynamic mega menu bar for your dynamic blog. You know guys the actual advantage of having a mega menu bar is that it keeps the things together in one place, so your visitors won't have to spend much time in searching for a specific category of their interest. So today I'm going to show you how you can easily set up this dynamic mega menu bar into your blogger blog without any problems. (First, take a look of the navigation bar (mega menu) by clicking on the below demo links.)

• DEMO

Now if you like this navigation bar and want to add into your own blog then follow the below steps.

How To Setup Navigation Menu Bar?

First go to your blogger dashboard - Login

Now go to "Template" section and then click on "Edit html" button.

In template editor find the below code by pressing "Ctrl + F" key together from your keyboard.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BxB51PrIeBaiRUhWMGRFSkVPNzA" />

Now, once again find the below code with the help of the search box.

</body>

After that, copy the below JavaScript code and paste it just before </body>

<script src='https://googledrive.com/host/0BxB51PrIeBaidk1vbDU4aXdLaXc' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $('#megamenuid').megaBloggerMenu({
  postsNumber:4,noThumbnail:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi3Grd9BT9eFqbOZS0iNmYlU2iFWP54Xb97y8A81ImnE-v2aivnaiRx5_y1Q5I-5AzLW6UGeH4Qizw5pvBH0EO4L7qM2Ax3k7lruH3P6pvDyeVB6sozFLBVJmmOasq1-_hMJWIAtOUrE8/s1600/no_image_available.png'})});
$(function(){$('.search-here').submit(function(e){if($('.search-box.search-field').val().length==0){$('.search-box.search-alert').fadeIn().css('display','inline-block');e.preventDefault()}})});
</script>

Now copy the below HTML code and paste it in your html editor where you want to show this navigation bar.

<ul class='megamenu' id='megamenuid'>
    <li><a href='/'>HOME</a></li>   
<li>
<a href="#">Webtools</a>
<ul>
<li><a href="#">Rooting Sony</a></li>
<li><a href="#">Rooting Lava</a></li>
<li><a href="#">Rooting LG</a></li>
<li><a href="#">Rooting Nokia</a></li>
</ul>
</li>
<li>
<a href="#">Android</a>
<ul>
<li><a href="#">Rooting HTC</a></li>
<li><a href="#">Rooting Motorola</a></li>
<li><a href="#">Rooting Micromax</a></li>
</ul>
</li>
<li>
<a href="#">Tutorials</a>
<ul>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Earning</a></li>
<li><a href="#">Domain Finder</a></li>
</ul>
</li>
<li><a href="#">Password Maker</a></li>
  <li><a href="#">Contact</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
  <p class='search-alert'>Search form is empty!</p>
</li>    
</ul>
<div class='clear'/>    
<div class='clear'/>

After that, click on the orange save template button to apply the changes.

If you are facing any kind of problem, then feel free to ask me via the comment section.

That's it! I hope you like this navigation menu! Stay tuned for more blogger widgets! Thanks for reading @Prince

Share this

Tweet

Share

Share

Share

Share

RELATED ARTICLES