How to Make a Blog Button with Grab Box

Hey there! Hope everyone is having a great summer! It seems to be flying by doesn’t it?¬†Today I am going to show you how to make a blog button grab box.

You know, the kind that looks like this….

To make your own blog button with a grab code box the first thing you will need to do is make the actual image for the button. There are a lot of ways to do this, photoshop, gimp, paint, etc…

If you don’t have any of these programs or don’t have a lot of training in graphics/computers you can always go to Pic Monkey¬†and make a blog button with a photo you have taken. Pic Monkey is really easy to use. Just open your photo (one that best represents your blog) and then add your blog title on top of the photo.

Once you have your button image ready, save it as a .jpg.

Next you will need to go to Photobucket and upload your image. Copy the direct link URL to your image.

Now login to your Blogger dashboard (or WordPress) and go to the Layout tab. Click on “Add a New Gadget”.

Add a new “HTML” Gadget.

Now add this code into the box ::

(replace the orange with your direct image url)

<center><img src=”YOUR DIRECT IMAGE URL“/></center>

So my code looks like this…

Once you have that code in the box click “RICH TEXT” in the right hand corner. Your blog button image should show up.

Now click on your button so it is highlighted (or has sizing handles around the outside) and click the hyperlink button. It is the icon that looks like a little chain link. A new window will pop up. Enter the URL of the webpage that you would like your blog button to go to and then click okay.

Now click back to “EDIT HTML”. Copy all the code that you see.

Then put your cursor at the end of the code and press ENTER (start a new line).

Type this ::

<center><textarea>

Then PASTE the code that you copied.

Then continue and type ::

</textarea></center>

It should look like this ….

To double check if you did everything correctly click “RICH TEXT” and see if your blog button looks right.

And there you have it! Blog buttons are great when you’re working on a contest or group project. They’re also an excellent way for others to support your site!

What other sorts of things would you like to learn how to do on your blogger site?

 

Kendra @ Key Lime Digital Designs

Kendra @ Key Lime Digital Designs

Kendra is a wife and mom, based in Hawaii. She specializes in digital website design. Pick up additional web design tips and check out her design skills at Key Lime Digital Designs.
Kendra @ Key Lime Digital Designs
Kendra @ Key Lime Digital Designs
Kendra @ Key Lime Digital Designs

Latest posts by Kendra @ Key Lime Digital Designs (see all)

Comments

  1. Hi I’m trying this out but on WordPress I’ve chosen the widget “Text/Arbitrary HTML” there isn’t just a HTML widget (that I can find anyway)

    WIth that I don’t see an option to choose “Rich text” to see my image within the widget. So I’m stuck here. Any pointers??

    • Melinda -
      You are right, there isn’t a rich text editor in the “text” gadget. Here is what you should do. Just start a brand new post and follow the same directions above except for do it in a new post. That way you have HTML and rich text view. Once you have the code ready in the post then just copy and paste it into the text widget. Make sense?

      Just a hea

  2. I can’t stop playing with this and trying to get it to work. I finally got a code up but their is no image that shows just a blank broken image box when I hit rich text. Help, this is driving me crazy! :O)

  3. This was fantastic! Thank you for this tutorial. The only thing I had to do differently using Picasa was using the code that looks like HTML in your example with the < on each end. When I used that code it worked perfectly. Thank you, thank you, thank you!!! Now I'm going to play around and possibly change the size a little. But I'm so happy to have it!
    Catherine Denton

    • Catherine, Glad the tutorial worked out for you. The key to success with these things is definitely to play around with the code a bit and tweak it until it is perfect for you. Good luck! xoxo, Tauni

  4. I am having such problems with this tutorial. Please help. First I had to add an = and remove a / to make the very first step work. Otherwise it would show nothing and revert my html to” img alt” and delte the url to the image. Don’t know why but if I remove the / before right after the ” from my url it works. ok fine but now everytime I put the tag textarea, and then go look at it, it removes the opening and closing text area tags and just shows two copies of the image. I am doing this in wp. I can use the textarea tag on it’s own and just write a sentence and it works but in relation to putting an image, it just removes textarea. Any Idea what is going on? Did I make any sense?

  5. You helped me so much! Thank you!!!

  6. So helpful, thank you tons!

  7. Thank you soooo much!!! I have been working on my grab box button almost all day and was about to cry out of frustration from coding. Your tutorial made everything simple as pie! THANK YOU!!!

    ~Michelle

  8. Totally just tried this tutorial! Nailed it!

  9. Thank you so much for giving a great tutorial on how to make a Blog Badge. I love how you put photos of every step along the way. I have been looking over numerous blogs to figure out how to do this and your was the only one that was able to get me the results! I will definitely be following you! Hope you will follow me!
    Thanks!

  10. Thank you so much for this tutorial!!! Worked perfectly on the first try!!!

  11. Hi!

    Love your tutorial. I figured out how to do all of it, but my button is HUGE! How do I change the size of the picture to make it button size?

    Thanks!
    Christie

    • Christie, You can resize your photo with any photo editing software or online program. I would recommend using Picmonkey.com. It’s free! The option to resize is on the bottom left of the first set of options. Good luck! xoxo, Tauni

  12. Thank you so much! I was having so much trouble with this and then I came across your page and was super easy! Thank you again!

    • I am glad we could help Nicole! I try to post blogging tips and tricks about once a week. I hope you will come back and check a few more out when you have the time! xoxo, Tauni

  13. I AM SOOOO EXCITED RIGHT NOW!! Oh Thank YOU SOO MUCH!! I just put my shiny new button up

  14. Thank you so much for this post! I am so excited to have a new button for my blog… these directions were INCREDIBLY easy! I will definitely be back to the site :)

  15. Thanks for this :D

  16. Thank you so much for this tutorial! It is the best I have seen! I created my blog button in 5 minutes!

  17. I just made a grab button for my blog with your tutorial! After a few tries (fails) with other tutorials, this was so very easy! Thanks for putting this out there!

  18. Just a quick note to say THANKS! I did a google search for making blog buttons and chose your site from the options. And it was terrific! No trouble at all. Thank you so much!!!

    • Charity, Thanks for following the tutorial. Glad it worked! We share blogging tips and tutorials once a week. Hope you will come back again soon! xoxo, Tauni

  19. hi, I’ve made my image on photoshop and then uploaded it into photobucket but I can’t find the screen that you’ve show above where you paste your direct adress into, how do I find this on photobucket?

    vanessa xxx

  20. I found what I was describing above, but now when I press rich text to view my image it just comes up as a red x ? can u help
    vanessa xxx

  21. Thanks oodles! I got it to go through on the very first try! Thanks again!

    • So glad this worked for you Lisa! We try to share blogging tips and tutorials once a week. Hope you will stop by and visit again! xoxo, Tauni

  22. OH MY GOODNESS!!!! Thank you so much sooo much!

  23. Kendra,
    I am a new blogger and was having so much trouble making a button. After hours of frustration, I came across your tutorial. What a lifesaver! I feel like instead of just copying and pasting that I actually learned something. It took me a bit to catch on, but with your tutorial, I think now I could make tons of buttons! I hope you don’t mind, but I put a link to your post in my blog to send other people to your blog if they need to know how to make a button. I am not about to pretend that I did that all by myself. THANK YOU for ending my frustration and helping me make a button I am proud of!

    • Rhiannon, Thank you so very much for your super-sweet comment. I will make sure that Kendra (one of my contributors sees it!). Isn’t she the best?! I love that we’re able to feature such easy tutorials on the site…We try to have some sort of blogging tip each week, so I hope you will come back.

      Thanks for linking to us! Tauni

  24. Rhiannon-
    Thanks so much for your sweet comment! I am so glad I was able to help you learn something! I am going to check out your button right now! :)
    Kendra

  25. Hey Kendra!

    Thanks for the tutorial! I was so happy when I came across it on Pinterest. I have WordPess and I cannot, for the life of me, figure it out. I was reading through the comments to see if anyone had the same problem as me, and I saw the first one.. I did what you told her to do, as in post it in a code.. So I did that, but when I switch to the “Visual” tab to see if it worked, it shows a broken pic. I’ve tried it like six or seven times.. Any tips?!

    Thanks so much.

    Jourdan

  26. Thank you so much for the step by step instructions; I have been trying to create my button for weeks. Several directions did not work out. After 2 tries (user error on my part) I got this to work.

  27. Have tried all day to get this to work, to no avail.
    I have copied and pasted til I am blue in the face and it still won’t go. Broken link keeps coming up.
    I have also made all the other suggested changes, from your other commenters.
    Wish it was easier. Any other suggestions to get it done?
    I should of been outside in this winter sunshine, but here I sits with nothing to show for 4 hours.

  28. You have the easiest, quickest blog button tutorial ever! Thank you!

  29. I know you posted this up over a year ago, but THANK YOU! This was by far the easiest instruction I found. It worked great. Thanks. :D

    • Wonderful Mel! I am glad it worked well for you! We post blog and social media tutorials about once a week. Hope you will come back! xoxo, Tauni

  30. Thank you a million! What an easy tutorial!!!! I am NOT HTML inclined at all. You really made this growing process fun and easy!

  31. Thank you! Thank you!! I’ve been working on this so long, trying different tutorials and code generators. Then I found your blog post, and it WORKS!! YES! Thank you!

  32. you are a LIFESAVER!! i was just about to give up on this whole blog button thing when I found your post and it worked first time after spending 3 hours trying everything possible! I LOVE YOU!! thanks you =D x

  33. Thanks a ton for the tips. I had been having trouble with my blog button and could not make it work. I followed your instructions and it worked perfectly.

  34. This is the second tutorial I tried, and I’m still having trouble. I get the image and box to come up, but the grab box is empty. Help!

    • Jessica, this means your image cannot be found. Try looking over your widget and code again, with these tips in mind.

      *Are you using an HTML/Javascript widget?
      *Is your beginning tag closed before your text starts?
      *Is the code in your text correct?

      Good luck!
      xoxo Tauni

Leave a Reply

Read previous post:
Feature Friday: Not Just a Housewife & The Shabby Nest

This week you get to meet not just one, but two bloggers whom I was fortunate enough to travel to...

Close