Make a ‘Grab This Button’ Widget – Blog Better

November 3, 2009 separator Blogging

With the blog makeover came a new button, shop, banner, and so on. I had to redo my Grab This Button widget, which gave me the idea that you guys could probably benefit from having one as well. This tutorial may be a bit too basic for some experienced Bloggers, but I’m going to go step-by-step for the newbies!


Step 1. If you do not already have a button to use, then you’ll need to create one. I made mine in Microsoft Paint. You can adjust the size under Image -> Attributes.

Step 2. Upload your button to a photo hosting site. I recommend Photobucket. After uploading, grab the link to use for the next step.
 

Step 3. Copy the code from the box above.

Step 4. On your blog dashboard, click Layout. From your layout page, click Add a Gadget on whichever sidebar you want to put your new widget on. Select the HTML/Java Script option.

Step 5. Paste the code into the Content box. Where it says YOUR IMAGE URL, paste the link from your button on Photobucket. For YOUR SHOP/BLOG URL, type in the url address of the shop or blog that you would like your button to link to. Be sure to leave the quotation marks and replace only the text. Put whatever title you’d like for your widget. Click SAVE, drag the gadget to wherever you want it on your sidebar, and save the layout.

That’s all there is to it! If you need clarification on anything, just leave me a comment, and I’ll try to explain! I also love to know when anybody uses my tutorials, so please do tell me if you put this widget on your blog!!!

12 comments

  1. Ok forget it I just noticed this is a “Grab this Button” so it is working as it should. It’s my English which is not good enough, not your tutorial :S Do you have a tutorial about what I was telling you earlier? Thanks :)

  2. Hi Lindsay, thank you so much for this tutorial. I don’t know why but the code is not working right for me, it shows the image, then the code but you cannot click on it. I want to use images to link to each label on my new blog from the sidebar but don’t know what I’m doing wrong. HELP!

  3. I am missing a tag somewhere. Sorry guys, and thanks to somebody in my reader survey for bringing this to my attention!

  4. i can’t seem to get it to work. it shows sort of half on my blog, half cut off. and it only shows the code that someone else would copy and not the picture at all…your directions were great tho!!

  5. Hi! As a total newbie to blogging, I was pretty thrilled to make a button. But the link isn’t working; it’s linking to Photobucket. What am I doing wrong?

  6. The last step where it says to replace phrases (Shop, etc.) I don’t have that on my code from Photobucket… did I do something wrong?! Help!
    And in paint, there is no attributes. Your tutorial is so helpful and I can’t get it write. Boo :(

  7. Thanks for this! It inspired me to recreate my blog and make a button. I having problem getting the code to work, but at least I made the graphic. LOL!

  8. Thank you for doing this!! I can’t seem to get rid of that little blue box with the question mark though. It has happened on every code I have grabbed…

Leave a comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.