24 March 2016

How To Add Awesome jQuery Drop-Down Menu in Blogger Blogs

Now this time, i'm showing you to how to add a beautiful and awesome jQuery drop-down menu in blogger blogs. I'm making it more stylish but simple. The main benefits is to make is so simple so your blog don't load more.I'm adding some jQuery effects and some simple and awesome styles so make it a good widget for blogger blogs. You can also change its style according to your need using CSS styles. You can change, colors, backgrounds, images, size etc.

How To Add Awesome jQuery Drop-Down Menu in Blogger Blogs

Also See : How To Add Popular Posts Widget into Blogger Blogs
Also See : How To Add Recent Comment Widget into Blogger Blogs

Here is the complete guide of how to add this jQuery effects drop down menu in any blogger blogspot blogs in an easy way hope you can understand . Simply follow below guide.

Add a Beautiful jQuery Drop-Down Menu in Blogspot Blogs


Step 1 : Simply go to your Blogger dashboard and now select your blog and go to "Template" and then click on "Edit HTML" button.

How To Add Awesome jQuery Drop-Down Menu in Blogger Blogs

Step 2 : When you click on Edit HTML button you go to the code area, here you can click on anywhere and simply click CNTRL + F , then a search box is appear in the upper right corner .

How To Add Awesome jQuery Drop-Down Menu in Blogger Blogs


Step 3 : Now copy below code and paste it into the search box and then Enter for find this code.

]]></b:skin>
Step 4 : Now copy below CSS code and paste it just above this tag. 

#jsddm {
height: 40px;
margin: 0;
overflow: visible;
z-index: 2;
padding: 15px;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}
Step 5 : After this save your template. Now find below piece of code.
</head>
Step 6 : Now copy below code and paste just above this tag. 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>
Step 7 : Now click on "Save Template" button.

Step 8 : Go to your blog Layout area and click on "Add a Gadget" button.

How To Add Awesome jQuery Drop-Down Menu in Blogger Blogs

Step 9 : After clicking on Add a Gadget button find HTML / JavaScript gadget and click on it.

How To Add Awesome jQuery Drop-Down Menu in Blogger Blogs

Step 10 : After click on HTML/JavaScript button a empty box appears, now copy below piece of code and simply paste in this empty box and hit on save button.

<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</li></ul>
Step 11 : Now simply click on Save Template button and view you blog. Hope you like this widget for blogger blogs. If you have any question then feel free to comment below this post.



Previous Post
Next Post

I'm Aamir Saleem, a professional blogger and SEO Consultant. I loves to write on blogging, SEO, Internet Marketing, Business, Social Media and Make Money Online. Connect Me Via !!!