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".
4. Select the "HTML/JavaScript" gadget, and paste the following code into it:
#wrapper {
width: 250px;
margin-left: 50;
margin-right: 50;
border-top: 0;
border-bottom: 0;
padding: 5px;
background: #bbb;
}
.accordionButton {
width: 250px;
float: none;
cursor: pointer;
color: #000000;
text-align:center;
padding:0px;
margin-bottom:2px;
padding: 5px;
}
.accordionContent {
width: 250px;
float: none;
display: none;
background: #fff;
color: #000;
padding: 5px;
}
</style>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="http://hrpblogdesigns.webs.com/Accordion%20Menu/javascript.js"> </script>
<div id="wrapper">
<a href=BLOG LINK><div class="accordionButton">Home</div></a>
<div class="accordionButton">About</div>
<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="accordionButton">Contact</div>
<div class="accordionContent">Contact information or links can go here. :)</div>
</div></!doctype></center>
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
Awesome Rosie! Thanks for sharing, I've been wondering how to do this for a while. :) By the way, how did you learn HTML/CSS? I'm working on learning them (does that make sense? :) ) and was wondering if you have any advice. :)
ReplyDeletexx
Awesome! Thanks for doing this tutorial!- Jollygirl from http://reflectionsofajollygirl.blogspot.com/
ReplyDeleteWow, this helps a lot! Hopefully my Web Design class will help with things like this. Also, I nominated you for the Sunshine Award - questions are on my blog: http://endlessvariations.blogspot.com/
ReplyDeleteRosie I can't copy the text...
ReplyDeleteThank you SO much for this, so helpful! xx
ReplyDelete