Scribd
Upload
74 views

Drop Down Menu For Blog

The document provides instructions for adding a drop down menu to a blog hosted on Blogger. It involves 3 steps: 1) Adding CSS code to style the menu, 2) Adding JavaScript code to make the menu function as a drop down, and 3) Adding HTML code to insert the menu content and structure. When followed, it allows the user to create a navigational drop down menu for their blog.

Uploaded by

Tiam Chye
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
74 views

Drop Down Menu For Blog

The document provides instructions for adding a drop down menu to a blog hosted on Blogger. It involves 3 steps: 1) Adding CSS code to style the menu, 2) Adding JavaScript code to make the menu function as a drop down, and 3) Adding HTML code to insert the menu content and structure. When followed, it allows the user to create a navigational drop down menu for their blog.

Uploaded by

Tiam Chye
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Drop Down Menu For Blog

1. Add The Menu CSS


Go to your blogger account, Navigate to Dashboard >> Design >> Edit Html > And find the following code,

]]></b:skin>
And before it, add the following css code,

#jsddm { margin: 0; padding: 15px; z-index:1000000000; 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; }

2. Adding the Java codes


At the same page, find the next code,

</head>
Then add this code exactly before it,

<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>

3. Adding The Menu To Your Blog


Now Go to your Dashboard >> Design >> And on your page elements page, click on Add A Gadget any where on the screen, And choose HTML / JavaScript , Leave the title empty, ant at the content area, paste the following code,

<ul id="jsddm"> <li><a href="#">Home</a> <li><a href="#">Menu 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="#">Menu 2</a> <ul> <li><a href="#">Drop 2-1</a></li> <li><a href="#">Drop 2-2</a></li> </ul> </li>

<li><a href="#">Menu 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="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">AllBlogTools</a></li> </li></ul>


And click Save Now, its important to move the new gadget from the current place to the top of your page, if it was on the sidebar, or footer, just drag it to your page header or above your posts area, and click And click Save again, Now go to view your blog and enjoy your new blogger drop-down menu. Note : In step 3, you must change the menu titles and replace all # letters by the right menu url.

You might also like