Hello there. :) As requested, today I am going to help all you lovely bloggers out with making an accordion button.
An accordion button is when you have a series of titles or links and when you click one, it opens to reveal hidden content. o.o If you need a better example, just check out the bottom of my sidebar, and click on "Copyright", "Search", or "Sponsors". :)
Now to make this lovely little gadget, you'll need to:
1. Log into your blogger account.
2. Select the blog you'd like to add this button to.
3. Go to your blog's Layout, and click "Add a Gadget".
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<a href=BLOG LINK><div class="accordionButton">Home</div></a>
<div class="accordionContent"><p align="center">Put a little bio or something here. Just tell us about yourself. Customize to your pleasure.</p></div>
<div class="accordionContent">Contact information or links can go here. :)</div>
5. Save and view.
Tada! :) Now if you'd like to customize it:
#wrapper - Changing the CSS in here will change the overall accordion button.
.accordionButton - Changing this CSS will customize the title as well as the outer appearances of the buttons.
.accordionContent - Changing this CSS will control how the innards of the button will look. If you want your bio and contact information to have a red background when opened, you change "#fff" to "red".
BLOG LINK - This is just a simple home link. When someone clicks this, they'll be redirected to the home of your blog.
Button Titles - The text in the light blue tint are the titles of the button. Change these to change the titles.
Content - The text in the magenta is the content of the buttons. When the title is clicked, the button will open up to reveal these words.
I hope I didn't just confuse you further. If you need help, or have any questions, just ask me down below, in the comments. :)
Have a blessed day, and thank you for reading. <3