How to Make a Blog Button with a Grab Box {simple step-by-step tutorial}

Apr 7, 2012

Recently I have been ad swapping with lots of other amazing bloggers.
It has been a lot of fun meeting new awesome people like you!
Ad swapping with each blog means a different sized button each time I swap! That means re-doing computer HTML every time.

(If you are unfamiliar with HTML, basically its like computer language. If you type in certain symbols and codes, the computer translates it into spaces, bold-ing words, letter size, font, etc.)

When I first started blogging, I couldn't figure out how to make a blog button. It seemed like everyone had them! I had tried numerous times, using online guides and websites to help me. It. didn't. work!

I'm hoping this method will be helpful to you and other bloggers who think:
"How in the world does this work?"

-----------------------------------------
Start by creating your button. Here's a simple tutorial using Pic Monkey, an online photo editing site that is just like Picnik.
 Start by uploading a blank square to PicMonkey (or Paint, or Photoshop, or whatever digital program you use)

 Decorate with shapes and words.


 Save it!

 Go to Photo Bucket and click 'upload' (green button at top of page).

Upload your photo and copy the HTML CODE (drag mouse over the photo for copy options).
Please ignore my very odd photos and others' buttons. ;)

This is how to get your code. Fill in the red fill-in-the-blanks:

<a href="YOUR BLOG URL HERE"><img src="YOUR HTML HERE

It may look weird, and you might be tempted to add that extra quotation mark at the end ["]. Don't. I promise the code above is exactly how it should be. 

Example<a href="http://acreativecookie.blogspot.com"><img src="<a href="http://s1108.photobucket.com/albums/h402/shinyaqua98/?action=view&amp;current=blogbutton-2.jpg" target="_blank"><img src="http://i1108.photobucket.com/albums/h402/shinyaqua98/blogbutton-2.jpg" border="0" alt="Photobucket"></a>

Make sure your blog URL has http:// before it.

Now you have your code!

 To get the button on your blog, go to blogger dashboard>layout>add a gadget>HTML/JavaScript

Insert your code under the HTML section (the little button on the top right of the text box will either say "Rich Text" or "Edit HTML". Click "Edit HTML"

Now click the "Rich Text" button and check out your button! Click save and view your blog.

Say hello to your new button!

Pretty cool, huh? 
Every time you make a new button, you can use the same code, just change the HTML code grabbed from Photobucket.
------------------------------------------------------------------------------------------
Now for part 2 of this post - how to add a grab box underneath your button so others can grab your shiny new button!


Go back to Photobucket. Now, copy the "Direct link" when you scroll over the photo.

Insert all your info into this code below:

<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL"> 
YOUR FIRST CODE HERE
</textarea>

---------------------------------------------------

Example: 

<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL"> 
<a href="http://acreativecookie.blogspot.com"><img src="<a href="http://s1108.photobucket.com/albums/h402/shinyaqua98/?action=view&amp;current=blogbutton-2.jpg" target="_blank"><img src="http://i1108.photobucket.com/albums/h402/shinyaqua98/blogbutton-2.jpg" border="0" alt="Photobucket"></a> 
</textarea>

You can customize the size of the grab box by changing "cols=40" and "rows=4" to whatever size you want.

Now add that code right underneath your first code and insert that into the HTML gadget. It's a lot of code!


Sometimes you will see a little extra photo icon (or an extra bracket or some other symbol) next to your button. Simply highlight it and delete it.
 Click 'Save'
(screenshot)

Ta Da!!!

You have a beautiful button that all your friends can grab!

I hope this helped you with creating your own button. Once you make yours, I'd love to swap with you! Find the info HERE.

Thanks to Smilemonsters' post with very helpful tips and EBlogger Tricks for the info on the grab box.
They really are the ones who should be thanked!


Happy creating!

xo. Kate

39 comments:

Holly @ A Baker's House said...

Thank you so much for this tutorial. I have been wanting to learn about this and have read a few blog posts that give directions. I think the part that has been holding me back was the first step-- uploading a blank square first. I hadn't thought of that and wasn't sure how to get a blank canvas into the photo progams. I am going to try this out this weekend. Will let you know how it goes. Thanks again!

Lina - Fancy Frugal Life said...

I haven't made a button in a while...thanks for the refresh..I need to try that pic monkey asap!
Thanks!
Lina

katy said...

Thank you for sharing, you are so kind.

╰☆╮ Barb ╰☆╮ said...

Wow - I am so dense that I can't figure out how to 'upload a blank square'. Can you tell me how? Thanks so much!

seniorpal said...

WOW ! Thanks. Im a newbiesenior with no camera to get a blog etc.
You need to have a blog and to ad photos?? Im so interested I can survive. Its a lot of work having a blog isnt it? Need to keep adding inf. etc. to it? Im a little dence on how & what to click. Your a sweet person to give all this info. out. Thanks
HAPPY EASTER

Kate @ A Creative Cookie said...

Hi seniorpal! Having a blog is a lot of work, it definitely takes lots of dedication and time. You can make a blog with blogger.com for free and use a simple template they have for you. You can upload as many photos as you'd like! Most blogs take photos of crafts, life, etc. but it is not necessary to have photos to have a good blog. Good luck! :]

Holly @ A Baker's House said...

Oh gosh, I am so close to finally getting this with your help!! I've created a file in PicMonkey (at least 5 times) and ever time I hit SAVE, I get the error message that Internet Explorer is not responding and the site shuts down. Boo hoo! Have you ever had this problem? I am going to try again in the morning and hope that my computer wakes up in a more agreeable mood! Thanks again for these tips. What a huge help.

Christine said...

Thanks for this tutorial! I was looking for one that didn't use photoshop

Christine @ Projectsaroundthehouse.blogspot.com

Holly @ A Baker's House said...

Oh my gosh, sorry to be a bother to leave so many comments...but here is one more! I found the answer to my problem that I wrote about last time. Apparently Internet Explorer sometimes doesn't get along with PicMonkey. If you open a different browser (I tried Google Chrome), it works without a hitch. Now I have the button ready to go but the size is way off. The button is too big on the side of my blog. I've deleted it for now but will work on figuring it out. It's so much fun to make some progress, thanks again for sharing all of your tips and screen shots, it's fantastic!

Brian, Michelle, Teagan and Isla said...

This is awesome! I just pinned this as I've been wondering if I used the best method to make my blog button and had no idea how to make different shapes. Great tutorial. Would love if you'd link this up and join my Tuesday Destination: Inspiration linky party on Teagan's Travels!

http://teaganstravels.blogspot.com/2012/04/destination-inspiration-linky-party-10.html

Have a great day, Michelle

creativejewishmom/sara said...

boy do I ever need this.....two years plus into Craft schooling sunday and I have yet to make one! thanks so much for sharing on Craft Schooling Sunday!

Linda said...

Thanks for this. I pinned this so that I can get back to it. Linda

Blythe said...

Eternally grateful for the thorough tutorial. I have started a few times in an attempt to make a blog button and given up right away. Will try again now! Found you on Sugar & Dots.
Blythe
www.thedesperatecraftwives.blogspot.com

Delle said...

Thanks very much for this!!! I was playing around with PicMonkey {too much fun!} but I can't figure out how to upload a blank square. Can anyone tell me how to do this???

Kate @ A Creative Cookie said...

Hi Delle! To get a blank square, you should first make it in Paint (or another software that should come with your computer). I just save a blank square and then upload it to PicMonkey. From there you can resize it to any size you want. :]

Winnie said...

Thanks so much for the tutorial !

Our Delightful Home said...

This is such a informative post. I would love for you to link up to my Linky Party via: http://ourdelightfulhome.blogspot.com/2012/04/show-me-what-you-got-linky-party-9.html

Mrs. Delightful
www.ourdelightfulhome.blogspot.com

Sarah A. said...

Wow! Thank you so much! I just made a button! I'm still playing around with it, but I made one!!! I have been trying to figure out how for at least a week now!! Thanks so much.

Sarah Carletti said...

Thank you and congrats. You are the first person to help me get that darn badge into my site. You rock!!!! http://www.theeaseoffreeze.com

Christine said...

Great tutorial Kate!

Thanks for sharing this at The DIY Dreamer.. From Dream To Reality!

Proverbial Homemaker said...

Extremely helpful. Thanks!

Alison @ Oopsey Daisy said...

This is a great tutorial! I always struggle with the grab box. Thanks for sharing at oopsey daisy!

Samantha said...

Best. tutorial. ever.

I even used it to feature in my newest Monday feature! http://www.thepeanutsgang.com/2012/04/yo-gabba-gabba-birthday.html

Thank you SO SO much for your help. GREAT tutorial!

Jenny @ The NY Melrose Family said...

You did such an amazing job with this tutorial! I wasn't familiar with PicMonkey yet and now I feel like I can start using that, rather than relying on Microsoft PowerPoint. Thanks so much for sharing at Whimsy Wednesdays!

Skylar Magazine said...

Wow! This is an awesome tutorial! I'm definitely going to have a lot of fun with this! Thank you so much for sharing this with us!

Sarah
http://skylarinc.blogspot.com/

Onna said...

Awesome tutorial! Thanks for the tips! :]

Jacki O. said...

Thank you, thank you, thank you for this--I've been trying to figure it out! You rock :) Jacki@redheadedmommy.com

Natasha in Oz said...

You are so clever! I wish I'd found this post last year when I was experimenting with buttons and HTML codes! This is such a great tutorial-thanks for posting it!

I just want to invite you to join in with my weekly Say G’day Linky Party which started on the weekend. I would be so thrilled if you could join in and link up this wonderfully helpful post!

Best wishes for a fabulous week!
Natasha in Oz

Jennie Louise said...

I soooooo would LOVE you to link this on my blog as I'm hosting a TUTORIAL link up party especially for photographers. This would be ideal for the link up.. would you possibly consider??? As i was gonna do a similar post but yours is ace so I would like to showcase this one instead at: http://www.snapdragonshots.com/2012/04/sunday-school-linky-party.html
But yes picmonkey is a great alternative to Picnik.. so sad when the news came it was closing.
Jennie. x

Jillian @ Hi! It's Jilly said...

Thanks! You're awesome! Now my blog has a shiny, new button. :)

Brian, Michelle, Teagan and Isla said...

Thank you so much for this! I am off to make a button for a new linky party! Thanks for posting this on Teagan's Travels. I hope you can join us again for this week's party going on now.

http://teaganstravels.blogspot.com/2012/04/destination-inspiration-linky-party-11.html

Thanks, Michelle @ Teagan's Travels

The Thrifty Picker - Rachael said...

Thanks a ton for posting this tutorial. I have tried to figure this out before and it ended in much frustration and time wasted. I followed your instructions and was able to make a few test buttons!
For those using paint, just open up a document and save it as a jpeg file. You don't even need to create a box. Upload the blank jpeg file to pic monkey and you can resize the box there. Otherwise, if you create a box in paint and uplaoad to picmonkey you will have a box within a box.

Sherri Mitchell said...

BEST tutorial ever made. So easy to understand, and your steps are so easy to get through.
Thank you so very much, I have always wanted to do this myself! I cannot wait to make some ~ Hope you have a great day, your blog is too cool!!

Holly @ abakershouse.com said...

I've read this post SO many times. Finally pinned it so I have it at my fingertips when I need it again. Thanks a lot!

Florence Kang said...

Yea! I have been looking for this! Thanks for sharing your knowledge!

If you have some time, please check out my new blog!

www.madebyfirenze.blogspot.com

Sarah Carletti said...

Kate, I have used your tutorial before with success. Now the picture shows an empty photobucket box saying that I moved the pic. Do you know what this means? Thanks for your help!

Sherry Thompson said...

how do you make one without the grab box? when I search for how to make buttons i only get the ones with the grab box cause everyone's into that now.

Megan said...

Help! My button is gigantic! What did I do or how do I fix it?
Science is Inquisitive

website design said...

Hey there! I simply want to offer you a big thumbs up for the excellent information you have here on this post. I am coming back to your site for more soon.
website design