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
Latest posts by Kendra @ Key Lime Digital Designs (see all)
- How to Add Horizontal Featured Posts in Blogger - April 30, 2013
- Parts of a Blog and Tutorial Roundup - March 12, 2013
- Customize Block Quotes in Blogger - February 14, 2013
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
I’m having the same kind of issue but I’m using blogger. I’m not sure what to do from here….When I click rich text it shows a broken image button not my blog button and there is nothing else. If you can help I would so appreciate it!
If yo are showing a broken image double check and make sure that you didn’t erase the quotation marks. You can also try re-uploading your photo to photo bucket and grabbing the direct url again.
Kendra @ Key Lime Digital Designs recently posted..Inspiration Translation
Oh … Just noticed that I forgot the = mark in the code. I have adjusted it now… So the code should be…
SO Sorry!!!
Kendra @ Key Lime Digital Designs recently posted..Inspiration Translation
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)
elizabeth recently posted..Summer Night Out Look
I had this problem. put a = right after img src. Then remove the / after the ” in your url. Did that make sense? That is what worked for me.
Connie recently posted..Dyed drop cloth rug
Thanks connie for noticing that and leaving a comment!
Glad you got it figured out!
Kendra @ Key Lime Digital Designs recently posted..Inspiration Translation
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
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?
Connie recently posted..Dyed drop cloth rug
You helped me so much! Thank you!!!
Glad this tutorial worked well for you Bekki! xoxo, Tauni
So helpful, thank you tons!
Kendra’s helpful tutorials really are the best…Thanks for leaving a comment!
xoxo, Tauni
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
Yay! So glad the tutorial worked for you Michelle!
xoxo, Tauni
Totally just tried this tutorial! Nailed it!
Jess@CoxsCorner recently posted..Just Begin-Weight Loss Update
Woot! Glad things worked for you Jess! Hope you’re having a great day! xoxo, Tauni
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!
You’re so welcome! Glad everything worked out okay!
xoxo, Tauni
Thank you so much for this tutorial!!! Worked perfectly on the first try!!!
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 recently posted..Jen Hatmaker’s "7" – Chapter Two – Clothes {Bloom Book Club}
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
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
I AM SOOOO EXCITED RIGHT NOW!! Oh Thank YOU SOO MUCH!! I just put my shiny new button up
Ellie Augustin recently posted..Studio Design Septemeber Sketch
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
Caroline, Glad this tutorial helped! We try to share at least on tech tip each week, hope you will pop by again soon! xoxo, Tauni
Thanks for this
Aimee, thanks for leaving a comment! Happy blogging!. xoxo Tauni
Thank you so much for this tutorial! It is the best I have seen! I created my blog button in 5 minutes!
So glad that the tutorial was helpful. Thanks for stopping and leaving a note! xoxo, Tauni
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!
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
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
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
vanessa recently posted..HelloTerriLowe – BOOT-iful giveaway
Vanessa, I have tried to replicate your problem a couple of times, but I can’t get the same problem to come up…I am sorry! Tauni
Thanks oodles! I got it to go through on the very first try! Thanks again!
Lisa recently posted..My First Blog Hop
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
OH MY GOODNESS!!!! Thank you so much sooo much!
Kristi Thetford recently posted..Super Tuesday
Kristi, Glad this worked for you! xoxo, T.
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
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
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
Jourdan recently posted..Ch-Ch-Changes!
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.
Great Traci! Glad you were able to get things working with your blog button. xoxo Tauni
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.
You have the easiest, quickest blog button tutorial ever! Thank you!
Tina F recently posted..Sneak Peek Saturday
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.
Mel Chesley recently posted..It’s Friday, I’m In Love…
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
Thank you a million! What an easy tutorial!!!! I am NOT HTML inclined at all. You really made this growing process fun and easy!
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!
CandyM recently posted..Review: A Most Civil Proposal by C. P. Odom
I am so glad that you found this tutorial and that it worked for you!
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
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.
Bames recently posted..Xylophone
Great! Glad you were able to get the blog button to work.