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](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vs5JLht-LMtbq-c0beh84h_nh1gaFcE2sA2TGyrwmJ6iAoF_IDGtcZcLHQ_OULSP-u9iy7tL1CNlVIcuvcgDOHDw-YYJLLIO2BLFx82s5dWXOEd7TMI76TFO9NYHnHgXi4Jp7t_AJu4O0ZPIePc7qlXnXxw_k8VsJMAgIG2g=s0-d)
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](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v6po3TIHW-k0-G5pVWbNfzhiFUpHxQJXoBIDJVGu9uHN0ice6zbanB3hWGK4z0ReqOzrpyBz06Rxiz5RkUSJziDvD39tNN207G0slFL4hrW6EwFLRtOq6xPOh0Vs3u8UWeZ0ECB6ZJvQUUPoNEgOvJ5T1tfhwfulSuXe21l24=s0-d)
.
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](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sCFJZ9Otv9BYL8dTF4lBZ69UG3iR_upzp94QZmk0CPGbreMCB-5O5BvKPy0e30iVKcIkJRpqrCxK-i6h-8WxssUQyq8VG7JBlC9hVPzpNAGj6BzTlRV1HybfaFb0HJOdLBwG0DneTVJZR7gptLI569TswY5-BYMFS9czF8Sg=s0-d)
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.