Tutorial To Made Drop-Down Menu Widget

This Tutorial Will Help You To Create Your Own Style Drop-Down Menu In Blogger. Its Too Easy And Also You Can Customize it Anyway You Want. ...

This Tutorial Will Help You To Create Your Own Style Drop-Down Menu In Blogger.
Its Too Easy And Also You Can Customize it Anyway You Want.
It Will Look Like Mine.
undefined

It Works As An Widget so You Can Place It Any Where You Want
So Lets Began.................
.
Tools Needed:
Notepad++(Optional)
.
Step 1: Login to Blogger Dashboard and navigate to Layout > Edit Html And Click On Download Full Template



undefined
.
Step 2: Open The Downloaded Template With Notepad++.
.
Step 3: Now Find



Code:
</head>
and Replace It With


Code:
<!--jquery-DD-Menu-Starts--><style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#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: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).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>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->
.
Step 4: Now Let's Look On The Customizing.


undefined

Replace Those Codes With Your Desired Code.
You May Click Here To Find All HTML Color Code

Step 5: and go to "Layout" -> "Page Elements"
and click on "Add a Gadget", select it as "HTML/JavaScript" type



Code:
<!--BODY-CODE--><ul id="jsddm"><li><a href="http://trick-center.blogspot.com">Home</a></li><li><a href="http://trick-center.blogspot.com/search/label/PC">PC Stuff</a><ul><li><a href="http://trick-center.blogspot.com/search/label/PC%20Software">PC Software</a></li><li><a href="http://trick-center.blogspot.com/search/label/PC%20Tips">PC Tips</a></li></ul></li><li><a href="http://trick-center.blogspot.com/search/label/mobile">Mobile World</a><ul><li><a href="http://trick-center.blogspot.com/search/label/Java">Java</a></li><li><a href="http://trick-center.blogspot.com/search/label/Symbian">Symbian</a></li><li><a href="http://trick-center.blogspot.com/search/label/Android">Android</a></li></ul></li><li><a href="http://trick-center.blogspot.com/search/label/Tech">Tech News</a></li><li><a href="http://trick-center.blogspot.com/search/label/Blogger%20Tips">Blogger Tips</a></li><li><a href="http://www.pl*nder.com/reyad010">Free Download</a></li></ul>

.
Replace URLs And Texts Above In Your Desired Means.
.
Step 6: Now Save The Widget And "Drag And Drop" It Any-Where You Want to Show It. Save The Template and You Are Done.
An Working Demo Can Be Found Here



************************Source: Collected, Simplified By Me*******************************

No comments :

Post a Comment

Note: Only a member of this blog may post a comment.