How to add a dynamic drop down mega menu navigation bar into your blogger blog - As you already know that, the navigation menu (Drop down menu) is coming with every blogger templates. However, some premium templates are coming with a dynamic mega menu navigation bar. And the best part of this navigation bar is that it's looking more attractive, comparing to the other menu bar. So don't worry friend, I'm here with a new ajax mega menu bar and today I'm going to show you how you can easily set up this mega navigation menu bar into your blogger blog without any problems.(First, take a look at the navigation bar (mega menu) by clicking on the below demo links.)
Now if you like this navigation bar and want to setup into your own blog then follow the below instruction.
First go to your blogger dashboard, Now go to the "Template" section and then click on the"Edit HTML" button.
In the template, the editor finds the below code by pressing "Ctrl + F" key together from your keyboard.
<head>
After that, copy the below code and paste it just after <head>
<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/0B-AYvC9Y1riaOEdZNHloT3k2ZUE" />
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/0B-AYvC9Y1riaMm5kMkxNS1ByR0k' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){$('#adajaxmenu').ajaxBloggerMenu({numPosts:4,defaultImg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjov1zddJ7eHoZdC7JKEwPx3ZnubgglnY_TGmWYszktX3bMAir2iQ6seRJaEirsGG9TsWh835SMY3wFEYeG5iX7Vsb6BxlwOtRSOdE4OYHCtJjfal-hEQp_RJ2zii62QfP-8OJSdnDXB5w/s1600/no_image_available.png'})});$(function(){$('.searchblog').submit(function(e){if($('.search-form .searchbar').val().length==0){$('.search-form .search-alert').fadeIn().css('display','inline-block');e.preventDefault()}})});
</script>
Now copy the HTML code from below and paste it into your header section of blog.
<ul id="adajaxmenu" class="admenus">
<li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>
<li>
<a href="#">Webtools</a>
<ul>
<li><a href="Label Link Here">Tricks</a></li>
<li><a href="Label Link Here">AD Convertor</a></li>
<li><a href="Label Link Here">HTML Editor</a></li>
<li><a href="Label Link Here">Code Encode</a></li>
</ul>
</li>
<li>
<a href="#">Widgets</a>
<ul>
<li><a href="Label Link Here">Widgets</a></li>
<li><a href="Label Link Here">SEO</a></li>
<li><a href="Label Link Here">CSS</a></li>
</ul>
</li>
<li>
<a href="#">Tutorials</a>
<ul>
<li><a href="Label Link Here">Tutorials</a></li>
<li><a href="Label Link Here">Blogger</a></li>
<li><a href="Label Link Here">WordPress</a></li>
<li><a href="Label Link Here">Earning</a></li>
<li><a href="Label Link Here">Domain Finder</a></li>
</ul>
</li>
<li><a href="Label Link Here">Password Maker</a></li>
<li><a href="Label Link Here">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>
Replace the highlighted text with your own URL and Title. 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!
0 comments:
Post a Comment