How to Create a Drop Down List in Blogger



Thinking of organizing your blog topics into submenus? Then you might want to consider designing your blog by creating a drop down list or menu. Creating a drop down list will help you achieve a more organized and neat looking blog. These steps were made simple for your convenience and to save your time searching for another sites.


Below are very simple steps on how to create a drop down list on your blogger:

Step 1. Go to your "Layout" settings.





Step 2. Click "Add a Gadget".





Step 3. Choose the "HTML/JavaScript".





Step 4. Copy and Paste the code below, and click "Save".



Code:

<ul id="Dropdown">
<li><a href="#">Home</a></li>

<li><a href="#">Dropdown 1</a>
<ul><li><a href="#">Dropdown</a>
</li><br />
<li><a href="#">Dropdown</a></li><br />
</ul>
</li>

<li><a href="#">Dropdown 2</a>
<ul><li><a href="#">Dropdown</a>
</li><br />
<li><a href="#">Dropdown</a></li><br />
<li><a href="#">Dropdown</a></li><br />
</ul>

</ul>



Step 5. Now you have saved your code, click on "Template" settings.





Step 6. Select "Edit HTML".




Step 7. You will be prompted by a message to edit your HTML code. Just click on "Proceed", it is also practical to back up your template.



Step 8. Find the highlighted word with special characters. You may also hold on ctrl+f and find "skin". Above the highlighted word, Copy and Paste the code below:



Code:


#Dropdown,
#Dropdown ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#Dropdown {
float: left;
}
#Dropdown > li {
float: left;
}
#Dropdown li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#Dropdown ul {
position: absolute;
display: none;
z-index: 999;
}
#Dropdown ul li a {
width: 88px;
}
#Dropdown li:hover ul {
display: block;

}

Step 9. It should look like this. Make sure to put the code above the ]]><b:skin>.




Step 10. Save your template by clicking "Save Template" on the lower right corner of the screen. That's all, you have successfully added a drop down list on your blogger.

See the result:



Just change the '#' with your link.

This code is responsible for the drop down list.

<ul><li><a href="#">Dropdown</a>
</li><br />
<li><a href="#">Dropdown</a></li><br />
<li><a href="#">Dropdown</a></li><br />
</ul>







Note: If you have any suggestions regarding in what to post or problems you have encountered related in my topics, feel to contact me at my email listed in "Contact us" tab. I will make sure to reply with your concern within 24 hours.



5 comments:

Christian Abalo said...

Yes of course, you can add color on the page. Just need to add these codes:

You may also edit the code or background color according to your taste. :)

#dropdown li li a {
background: #C70D0D;
width: 120px;
color: #FFFFFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;

}

#dropdown li li a:hover {
background: #060505;
color: #FFFFFF;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;

}

also add

( background: #060505; ) on the first part

#Dropdown ul {

background: #C70D0D;
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;

}

Mel said...

Thanks a million!!

Mel said...

Works fine after clearing everything under "tabs" section. Can you make it another colour besides transparent?

Pablo said...

Please help me i don't know where to use this codes to change the color....http://rangoprocamps.blogspot.com/

Christian Abalo said...

You can add that new code just below the Code: #Dropdown li:hover ul { display: block;}
And under #Dropdown ul {
add these: "background: #C70D0D;"

Also please capitalize the letter D on #dropdown.

Should be #Dropdown.

 
Copyright © . Zakyri Tricks - Posts · Comments
Theme Template by BTDesigner · Powered by Blogger