Tutorial: Accordion Button

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:

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

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

May I ask for your [honest] opinion?

via Alrighty. I recently just completed my one hundredth blog design order [insert celebratory balloons, glitter cannons, and thrown pies here]. ;} And I was talking to my mother about this in the car, to and from the store. Basically, what she said was; "You've been doing your designs for a long time, right? So why don't you start charging for your services?" This got me thinking, and in my eyes, I feel as though charging for my designs would probably make me feel like I'm getting cocky, and too proud of my work, yah know? But I wanted to ask you guys, my honest readers; do YOU think my services are worth spending money on? Like seriously. If you wanted a new design would you choose me, even if it cost you ten dollars? I know most of it is just a matter of opinion. Every designer has their own way of doing things. Their own unique style. It all depends on what the "order-er" wants. I'd like to know if I have the capabilities of giving s...

Wake Up, Darling.

Wake up darling, it's time to rise. Sit up, stretch your limbs, and put a smile on that tired face. Tomorrow is gone, and it's a new day. Wake up darling, open the blinds. Open the window if you have to, and stick your head out. Smell the air. Breathe. Let the morning sun hit your cheeks. Ahh. A fresh start. Are you awake, darling? Get dressed now. Put on your worn sweater, and jeans, or favorite graphic tee. Decided whether or not it's worth it to find the matching pair to your sock, and if you'd like attempt to untangle that mass of hair on your head. Whatever you'd like. Now darling. Are you ready? Because it's adventure time . + + + Thank you for reading. <3

Justin -- Fictional Character

Justin. Sarcastic. Opinionated. Hot. <-- Yep, I said it. •-• * * * Hello my lovely readers. Today I'd like to introduce you to my fave boy character whom I invented. His name is Justin. He's the main character in my first completed book, The Memory Keeper (read a sneak peek here ). I wanted to share Justin with you because, well, I did this a while back with Zarek , and I received so nice comments about him. :) So I thought what the hey, I may as well share another character with them . :} So, yes. This is Justin. He's rough and sarcastic on the outside. But his insides are like melted chocolate-- sweet, gooey, and totally amazing. O.o Here's a little Justin snippet. I hope you guys enjoy it. >.< * * * M uffled voices ring around my ears, gradually waking me up from my sleep. Someone laughs when I groan and I roll over, shying away from all the noise. When I get the courage, I open my eyes, surprised by how dark it is. The walls...

Self Known

Search This Blog