This Page

has been moved to new address

Tutorial- How to Make a Grab Button

Sorry for inconvenience...

Redirection provided by Blogger to WordPress Migration Service
Sprinkles in Springs: Tutorial- How to Make a Grab Button

Monday, March 28, 2011

Tutorial- How to Make a Grab Button

Taking a detour from my usual posting topics, I'll address a technical issue momentarily...

Kai recently pointed out that a great number of bloggers don't have buttons for people to grab and stick on their blogs. I never made it a point to make a one because I don't put other people's buttons on my blog (so why would they want mine?). But it is a good idea to make one for the 'blog button grabbers' even if you don't partake in button sharing.  Anything that promotes your blog is a good thing, right?

I found that making a grab button isn't as easy as plugging in your information to one of the 'blogger gadgets' (or at least I didn't see any availabe). So here is a (hopefully) easy and quick tutorial on how to make a grab button.

Grab Button- an image of your button with a corresponding text box containing 
the button's html code that users will copy and paste onto their website.

1. Make your button image and upload it to an image hosting site, like photobucket. (For reference, my image is 220 wide x 116 tall.)
2. From the Blogger dashboard, go into the "Design" tab and click "add a gadget" on your sidebar then choose the "HTML/JavaScript" one.
3. Enter the code below, changing the sample info in blue to your info:
Copy the code here:

(and add the "textarea" bit on the end as shown on the image)

  •  The direct link to your image (from photobucket) will be entered twice. Once as the actual image that shows up, and then second in the text box in the form of an html code.
  • After the "a href" is where your website url goes.
  • After the "alt=" is the unique name you give to the button. (From this, you're supposed to be able to track (on google) who picks up your button and uses it.)
  • If your image is the same size as mine, you can leave everything else how it is. Otherwise, go ahead and change the 'width' and 'height' size to match your image, also the 'cols' and 'rows'. ('Cols' is how many characters wide the text box is, and 'rows' is how many lines of text you have showing in the box.)

4. After you make the code and enter it into the "HTML/JavaScript" gadget, save it and make sure everything is working. You're done!


Hopefully I helped at least one person (and didn't confuse you terribly)!  
Let me know in the comments if I left anything out or if you need more clarification.
xx Kara

Labels: , ,


At March 28, 2011 at 9:13 AM , Blogger indie.electronic.alternative. said...

THIS IS VERY HELPFUL! i'm new to blogging so i'm still working out all the kinks with stuff like this! i had no idea how to do it, so thank you!

At March 28, 2011 at 11:46 AM , Blogger Kai.Mercado. said...

haha way to make me sound like some button bully :) but yay! I will be adding your button fo sho

At March 28, 2011 at 2:41 PM , Blogger Oh to Be a Muse said...

yea i have a grab button on my blog. i don't remember what i made it with, but i do know it was really easy and straightforward. thanks for the tutorial.

At March 28, 2011 at 4:46 PM , Blogger Pop Champagne said...

haha I was JUST thinking of making a grab button today! this is awesome turorial, I'm bookmarking your post :) thanks hun

At March 28, 2011 at 11:31 PM , Anonymous Sarah Ashley said...

Hello Kara! Just returning some wonderful commenting love to you! Thanks for taking a peek at my blog... I have to say that I've been enjoying going through yours as well... I really found the above post interesting.. Although I'm still trying to figure out if I want to create a grab button gor my blog or not... It already has too many martinis on it... I don't want my blog to get TOO tipsy or anything... Rofl.
Keep in touch!
xx Sarah Ashley

At April 29, 2011 at 3:09 PM , Anonymous Anita said...

Thanks! This helped me sooo much!


Post a Comment

I love to see any and all comments!
PS-Leave a link and I'll visit your blog.

twitter, bloglovin', google

Subscribe to Post Comments [Atom]

<< Home