About   All Tips   Tips by Category   Tips by Ability   Help!

How To Make A Grab Box For Your Button - Advanced

Easy Blog Tips!


This tutorial will show you how to put your button on your blog as well as create and install an HTML scrollbox so that others can put it on their blogs. These instructions assume that you already know how to create button-sized images. There are no risks to your template, but it is a tricky tutorial. It was not written for the beginning blogger, but for those who feel comfortable working with html gadgets.

Follow these directions exactly. The first time I did this it took me well over a frustration-filled hour and I had to take several sanity breaks. Be patient and persistent. You will get this!

I am sure there is an easier way to do this. This is what works for me:

Making your image link back to you

1. Create your button as a small square image.

2. Upload it to Photobucket or another photo storage site.

3. Copy its html code. Click here for help getting an html code for your button.

4. Alter your code by looking at my new code below and replacing the colored portions with your own information:
<center><a href="http://sneakymommablogdesign.blogspot.com" target="_blank"><img src="http://i409.photobucket.com/albums/pp178/sneakymommablogdesign/smbuttonblk.jpg" border="0" alt="Sneaky Momma Blog Design"></a></center>

Red: where you want your button to link back to
Green: what you want the text to say when someone hovers over your button
Blue: add this to automatically center your button in the sidebar (optional)
Purple: your photo bucket URL- you won't change this in this step

5. Test your finished code by adding it as an HTML gadget in your practice blog's sidebar.

6. If all looks well, proceed to making the HTML box. If not, go back and follow the above instructions exactly the way they are written. It will probably take you a few tries before you get it right. It took me several tries the first time I did it. DO NOT PROCEED UNTIL YOU GET YOUR BUTTON LOOKING EXACTLY AS YOU WANT IT.

Making the nifty HTML scroll box to put on your blog
1. Copy the following code and paste it into Word or Notepad so you can alter it to include your own information, just like in step 4 above:

<center><textarea rows="4" cols="13" name="Sneaky Momma Blog Design" readonly="readonly"><center><a href="http://sneakymommablogdesign.blogspot.com" target="_blank"><img border="0" alt="Sneaky Momma Blog Design" src="http://i409.photobucket.com/albums/pp178/sneakymommablogdesign/smbuttonblk.jpg"/></a></center></textarea></center>

2. Go to your practice blog’s layout page.

3. Select add a gadget (HTML/JavaScript) in your sidebar.

4. Copy and paste your new code into the box. Hit save. Preview.

5. If the HTML scrollbox shows up and looks good, woooo hoooo. If not, go back and try again. This may take you several tries and several minutes, if not days. DO NOT PROCEED UNTIL YOUR HTML SCROLLBOX SHOWS UP IN YOUR PRACTICE BLOG’S SIDEBAR AND LOOKS GOOD.

Putting your button on your blog
1. Copy the code from the HTML scroll box that you created. Add another HTML gadget to your sidebar and paste this code in it. Save. Preview. It should appear all nice and centered above your HTML scroll box.

2. Go back and check your work. Make sure that when you hover over your image that the right words appear. Check that when you click on your image that it takes you to your ‘real blog’. If all things are good, proceed. If not, go back and do it again.

When everything is exactly as you want it, open your real blog in a new window. Create new HTML/JavaScript gadgets and copy and paste your newly created codes in. Hold your breath and preview your blog. You should see your new beautifully created button atop a perfect little scroll box.

Enjoy your new button! If you’re like me, it took you forever.

For more help, visit Tips For New Bloggers. I’ve found that for some reason, I can’t always understand one set of instructions, but that two sets tend to fill in the blanks. If you have trouble, take a good long break and come back to it.

Related Posts:
Get An HTML Code For Your Button
How To Add A Button To Your Sidebar
How To Center A Button
Align The Buttons In Your Sidebar

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

ALL CONTENT © SNEAKY MOMMA BLOG DESIGN 
Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)

46 comments:

CornFedMama said...

Nice job! You are very kind to share that tip!

Hootin' Anni said...

I had something similar to this a few weeks ago. It's always great to have someone like you share their expertise on something others can use!!! Great job.

Thanks for such a wonderful comment you left me today! Always love having you visit with me! Happy Tuesday.

He And Me + 3 said...

I always wanted to know this. Thanks so much!

Beth in NC said...

Wow, you are awesome! Thanks for sharing this!

Beth

amanda said...

this frustrated me too until i figured it out. you did a nice job of explaining it to everyone! :0)

Kalei said...

OHHHHHhhhhhh! I can't wait to try this later. I sooooooooooooo appreciate you posting this Fab Tip....I will be sending people your way today (I don't have as many readers as you)...you will probably see 1 more person =) . Thanks Again!

Rebecca said...

Great information!

Happy Tuesday!
:)
Becki@BlogMommas

3 Bay B Chicks said...

You, my friend, are the absolute best. I was just thinking yesterday that I should call our web designer back to make a button for us. Your timing is amazing!

Question: What are you using to create a small square image (in step 1)? I am not sure where to start.

Thank you, again!

-Francesca

Lane said...

Can't wait to get to get my 'Sneaky Daddy' button going!!!

pam said...

Thanks for taking the time to put this up.

Kalei said...

It totally worked! Thanks so much for the Tip! It did take a few (thousand) tries...actually 3 tries as you were so great with your explanation....which by the way makes you a great consultant! I am so indebted to you! Thanks a million times over!

Courtney and the Boys said...

You are so wonderful to take the time to share these tips, my friend! :)

Courtney

Sheryl said...

I have been thinking about doing this but didn't even know how to get started. Thanks so much for sharing.

Carin said...

You explained it wonderfully! i just finished (on my new practice blog). Thank you so much!!!

Danita said...

Thank you so much!! I've been looking all over the place to find out how to do this!

Kristen said...

Thank you! I made my first button...a "happy one month blogaversary to me" gift. I also used your tip to make my twitter button! You Rock!!! I was done with both in 20 minutes (not counting the photoshop work).

Jenilee said...

It took FOREVER but I got it! THANK YOU!

Christine said...

Thank you, thank you, thank you! You are the best! IT WORKED LIKE A CHARM!

hotpants™ said...

I got it on the first try, but I'm familiar with HTML. Thanks for this great tip!

Screamin' Mama said...

Thank you so much for the tutorial!! I've done this myself but never knew the technical aspects of it.

Kelli said...

Oh my goodness!! Thank you so much for this tutorial!! I made my button a few days ago, but wasn't sure about how to make the html box!! You are great at step by step instructions! I think I got the box right on the first step...which makes up for the fact that I had to load my button onto photobucket a million times to get it the right size!! Thanks again!!

Eudae-Mamia said...

OH you so rock!!!

Thank you - if only I can figure out how to create a button in scrapblog and make it look clear through photobucket. Urg.

My left hand for my mac and Photoshop of olden days!!

Thanks - Em

The Pittsburgh Hites said...

Thanks to you I just made a button with the code box in under half an hour! Thanks so much for this fabulous tutorial! Wanna see? www.thepittsburghhites.blogspot.com
I made the button at the top right for my Photography wesbite. The button down below I had made for a friend a few weeks ago and had NO clue how to post the code for others. If they wanted it they took the initiative to get it though!!
So thank you, i'm now a faithful follower!!
-Ginger

Aunt of 14 said...

WOOHOO! Thank you so much! I was successful making my own button but not the area below it to share the code... I WORSHIP THE GROUND YOU WALK ON for this tutorial! :)

The "J" Flamly said...

bless your patient, kind, sweet, soul!

The "J" Flamly said...

I was successful, check it out at http://ladygaladrielkj.blogspot.com/

Beady pretty said...

Thanksssssss very Muchhhhh!! I have added you to my blog , You are awesome!! thanks for ur post.
Help a lot .
RB

Reb said...

Again, you have reached Rock Star Status for me. Thank you for our time in posting this.

Emii said...

I have tried this in a few different tutorials -- but haven't been able to figure it out. Guess what -- with this one, it worked my first try! Thanks SO much!

Tierra said...

THANK YOU!!!! I have been trying to figure this out for a while. A great tutorial.

Tierra
pebblesandpoppys.blogspot.com

Lisa said...

THANK YOU! I only had to do it twice and did get irritated but you are so sweet to do this. :)Lisa

Trish said...

Thanks so much you are amazing!!!!

It took me two tries!

Shanty 2 Chic said...

You are the BEST!! I found your link from another lady and FINALLY made a scroll bar... THANK YOU! I have saved you as a favorite and will pass on your amazing help to others... thanks again!
~Whitney

2 Toddlers and Me said...

Thanks so much for this. I have been all over the web trying to figure out how to make a Grab Button. It kept coming with extra characters and boxes with red "x's." Thanks to you it looks perfect now. I was so pleased with this and your other tips, I wrote a short post about how great your blog is. I will grab your button too, of course.
Thanks again!

Dawn Farias said...

You have put together a great and helpful site. I will be putting your button on my blog: Always Undecided Designs

Dawn Farias said...

OK - I'm back (and thanks for leaving a sweet comment on my blog!) I was following your instructions for putting a button on and I wanted to draw your attention to something:

"alt=" is the description used if the image is not working
"title=" is for the hover text

Check out more here.

Hope that helps!!

Becca said...

Jill, Is there a correct size I should make this image for a button?
Becca frontdoorjunkin@q.com

Randa said...

THANKYOUTHANKYOUTHANKYOU for taking the time to post this...and all your other helpful posts. My entire blog "look" is thanks to you! Your button is in my sidebar (though I only have one reader currently...I'm just a baby blogger) and will stay there!!

I think its time to try and create my own button and html box....everyone brace yourselves...I'm going in.

http://randakaye.blogspot.com/

Tiffany said...

I am so HAPPY I could cry and pee my pants at the same time!! I have searched and attempted to add a box to share my button code MANY times. I spent hours reading people's instructions and NEVER got it...and I find myself to be pretty computer/blog savy! Your instructions are perfect...got it on the 1st try!!!! THANK YOU!!!!!

Em said...

Borrowed this again. THANK YOU!!!!!!

"J" Flamly mom said...

I've used this again, your tutorial is so simple I didn't curse or pull my hair out. I made two buttons in less than a half hour :)

Kristin said...

awesome THANKS!!!

Santa and Minnie said...

Thanks for sharing. You are so generous. I did it but I didn't want it centralized. I did a button for my pet, Santa's blog. Once again, thank you.

Christina @ theDIYlifestyle said...

Thank you so much for this information. I am still working on it but I feel confident that I will finally get my button working great. I added your button to my site and started following you too! Thanks!!!

http://livingthediylifestyle.blogspot.com/

Lisa W said...

I too am in awe! Great blog, great tips and instructions! I added your button to my blog to help pass on the goodness! Thanks bunches!
2thelessons.blogspot.com

Kim said...

I did everything as you said and it went great. But when i copied the scroll box html and pasted it in my test blog post, a slim rectangular box shows up with a question mark but no button. Is this normal?
Thanks, Kim

BTW, This worked like a charm