HOMEPAGE

Create something.

December 1, 2015

Create an Accordion Button for Your Blog


Hello there. :) Today is going to make the start of a new series on the blog entitled #TutorialTuesday! Not the most original, but I thought #NRDTutorialExtravaganza was just a little too wordy. ;)

The first tutorial I am going to with all you lovely bloggers is how to make an accordion button. Ready? Let's get started!

What's an accordion button?

An accordion button is when you have a series of titles or links that you can click on to reveal hidden content. Think of it like a storage bin. You want to use it so house content readers should have access to when they want it. :)

Now to make this lovely little gadget, you'll need to:

1. Log into your blogging dashboard.
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:

<center><style type="text/css">

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


Customization

#wrapper - Changing the red CSS under this declaration will adjust the accordion button as a whole. Play around with width and color to blend it with your theme.

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

NOTE: Changing the black text could result in a wild looking accordion button. For best results, leave all regular text intact!


If you need help or have any questions, ask me in the comments or contact me via email. :)


How will you style your accordion button? 

No comments

Post a Comment