Latest Dropdown Menu for blogger with Jquery. 5

Latest Dropdown Menu for blogger with Jquery.

Follow simple and easy step to adding this menu to your blogger blog--->>>

* First go to your blogger dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code </head> by CTRL+F key.

* Copy below code and paste before </head>

<script src='http://blogger9.googlecode.com/files/menujquery.js' type='text/javascript'></script>
<link type='text/css' rel='stylesheet' href='https://4636338866364619332-a-1802744773732722657-s-sites.googlegroups.com/site/mauganj1/stylesheet.css' />
<script type="text/javascript">
$(document).ready(function () {
 $("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
 $('ul.menu_body').slideToggle('medium');
    });
 $('ul.menu_body li a').mouseover(function () {
 $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
 $('ul.menu_body li a').mouseout(function () {
 $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>

* Now click to save your blogger Template.

* Again go to your blogger Dashboard and click in design tab.

* Now you Are here --->>> Page Element.

* Click in Add Gadget which is at your blogger sidebar.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank  box.

<div class="container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXoKizSkvMZGoiAc9pwMa9mqk0KWRSWAlnWogMaAtqcIb3MLb8q3weyamejg3ao_l8ZECAbfwXdqTqltbgp0-kmvVQW5QLWcsM_Pbu14DH7IJGaSMamLctO1R0kZIrib6e-p5qtCaqKejO/h80/navigate.png" width="184" height="32" class="menu_head" />

<ul class="menu_body">
<li><a href="TAB1 URL HERE">TAB1 TITLE HERE</a></li>
<li><a href="TAB2 URL HERE">TAB2 TITLE HERE</a></li>
<li><a href="TAB3 URL HERE">TAB3 TITLE HERE</a></li>
<li><a href="TAB4 URL HERE">TAB4 TITLE HERE</a></li>
<li><a href="TAB5 URL HERE">TAB5 TITLE HERE</a></li>
<li><a href="TAB6 URL HERE">TAB6 TITLE HERE</a></li>
<li><a href="TAB7 URL HERE">TAB7 TITLE HERE</a></li>
</ul>
</div>

NOTE:- Remove Highlighted Text from above code with your own ok.

* Now click to save your HTML/Javascript   and you are done.

CHEERS

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: Latest Dropdown Menu for blogger with Jquery. ~