email BlogLovin RSS Instagram Pinterest Goodreads Facebook Twitter

How to Make a Blog Button with Grab Code

Posted by on March 8, 2012

how-to-blog-button
When I first started blogging, everything seemed OH SO HARD. I never thought I’d make it past zero followers and my only views would be my own. Now, one and a half years later, I’ve gotten the hang of it all, though I’ll occasionally get overwhelmed. My newest goal? To make blogging easier for you.

If you didn’t know, I design blogs through my website at IceyDesigns. I’ve got detailed pricing, an easy to fill out form, my portfolio, and testimonials from satisfied clients.

But that’s not why you’re here, right??

Today, I’m bringing you a tutorial for a blogging essential. I’ll admit, when I first started blogging, I was baffled when I saw those nifty little buttons with codes beneath it to ‘grab’ and place anywhere you want.

Follow these easy steps and you’ll have a pretty little button with a super easy way to let your visitors snag it!

1. Make your button. This could be the hardest thing if you don’t know how to design. But I’ve got a surprise for you! Here are some free graphics that you can easily add your blog name to!

Designing your own? Average size? In my opinion, about 160×160. But you can choose to have it square, rectangle, or circle.

2. Upload your new button to an image host. Photobucket, Flickr, your webhost, or even a new post in Blogger would work. Get the URL of the image.

3. Now we’re going to make the grab box. This is the best part! Copy the following code and paste it in a new HTML gadget on your blog:

————————————-

<img src=”http://www.iceydesigns.com/id-graphics/id-button.jpg” /><div><textarea cols=”16″ name=”textarea” onclick=”this.focus();this.select()” rows=”1″ style=”height: 37px; overflow: hidden; width: 140px;”>&lt;a href=”http://www.iceydesigns.com“&gt;&lt;img border=”0″  src=”http://www.iceydesigns.com/id-graphics/id-button.jpg” /&gt;&lt;/a&gt;</textarea></div>

————————————-

And follow these instructions carefully, or you’ll have a mess you won’t know how to fix.

Replace the URL in RED with the URL of your image, which we got in step two.
Replace the URL in BLUE with your blog’s address.

That’s it! What do you think?
If you use the tutorial, leave me a link to your blog, so I can check it out!
And if there’s any tutorial you would love to see, drop me a comment or an email, or fill out this form and you might just see an explanation here!


The Icey Newsletter

Sign up for updates from IceyBooks and IceyDesigns, featuring books, blogging tips & tricks, design inspiration, exciting new happenings, and more!

73 comments

  1. Sadly the textarea tag isn't allowed in wordpress.com widgets :( I've just added my button there and people will have to sort the code out for themselves for the time being.
    Thanks for the lesson though :)

  2. I haven't tried it yet but I will!! Thank you so much for taking the time to do this! I don't have a button yet because I don't want to keeo asking people or even when they offer most of you awesome bloggers have done so much for me or others just starting out!! It's such an awesome community to be a part of!

  3. This is an awesome blog post! I'm sure it'll help out alot of bloggers. Me personally… I had to figure this one out on my own through google searches and such. Wasn't easy! This is definitely easier lol! :)

  4. I love your designs. My favorite thing about them is everything is so clean but still fun. You use such nice colors and fonts but everything looks put together and crisp. I have not seen any design of yours that is anything less than awesome! This grab code tutotrial is great! I'm adding the HTML to my blogging cheat sheet. I use a word doc to keep track of all the tips and tricks I have licked up over the past year.

    It is so nice that you made some blog button backgrounds for everyone to use. You rock! :)

    1. Hey Jess! I'm glad it was easy to follow.
      The reason why your image isn't showing up is because the link is broken. Try uploading your image to a new sample blog post. Go into the HTML part of your post and copy the URL of the image and use that instead of your Flickr one.

      Hope that helps!

  5. Thank you so much for this tutorial!! After looking through about a half dozen others that I could not get to work, yours finally gave me success!!!!

    THANK YOU THANK YOU THANK YOU!!

    :)

  6. Lovely! This is definitely my favourite tutorial on blogging goodies!! <3 I went with the nice 160x160 size, and designed mine based on the images already there from my pre-made template. ^_^ An owl button added to the sidebar!!

    Vivian @ Vivaciously, Vivian

  7. Lovely! This is definitely my favourite tutorial on blogging goodies!! <3 I went with the nice 160x160 size, and designed mine based on the images already there from my pre-made template. ^_^ An owl button added to the sidebar!!

    Vivian @ Vivaciously, Vivian

  8. Thank you SO much for this! After trying about 3 different tutorials, I was able to do this the 1st time with yours!!! Wish I had found you first…ha! THANK YOU!

  9. Thank you very much for your accurate tutorial. I spent several hours trying out different HTML codes from other blogs, and none of them worked. I was about to give up when I found yours through several google searches. It worked. At first my image was too big, but I used Microsoft Office Picture Manager to resize it, and I finally have a real button. I wish I had found your blog first. I really appreciate you sharing your information with us. You can check it out at http://thedomesticatedprincess.blogspot.com

  10. I tried a gajillion of these tutorials elsewhere but for some reason your code worked when others did not add the text box down below so thank you – have a great year and I am a new fan!

Post a new comment