How To Make A Grab Button For Your Blog

Spread the love

A great way to add advertisement for your website is to create a button that visitors can grab and paste to their own sites.  I wanted to make one for people who have been featured or submitted an article for a link to their site.  At the same time, I figured I might as well create a fan button.  Here I show how to make a grab button using Photoshop.

If you don’t have Adobe Photoshop software, you can use Photobucket which works perfectly well and is totally free to set up an account.

How To Make A Grab Button

Here are the step by step instructions using Adobe:

  1. Open Adobe Photoshop and click on edit (versus create).
  2. Click on file… document….blank document
  3. You will get a pop up box for inputting the document size.  Use the drop down menu to put the measurement at pixels.  I like to make badges at 100×100 pixels.  You can make the width and height whatever size you would like but a 100 – 150 pixel square is the norm.
  4. Now you have a canvas to work from and you can pick a background, objects and text to fit in the box.  These options are found to the right of the screen under edit.  Click on content to get background and object choices.  When you find a background/object you like, click on it and then click on apply.  The desired background will show up on your canvas.
  5. When you are ready for your text, you have options at the top of the screen for font style, color and size.
  6. After you complete your button, save it as a jpeg image.  If you have a WordPress site, you will want to upload your image to your media file so that you can get the URL for the image.  For other sites such as Blogger, you need to upload the image to a photo hosting site such as Photobucket so that it gets assigned a direct link.  If you started out using Photobucket to create your square image, then you are all set.

grab button

Now you have the image, you need to get it on your site with a code box so visitors can grab it.  Since I use WordPress, I can give you the instructions and code below that I know work.  I have provided a link to the instructions for Blogger at the end of this post.

WordPress instructions and code:

Open a new text widget and insert the following html code:

[div align=”center”][a href=”” target=”_blank”][img src=”http://YOURIMAGEURL“][/a][/div]

[div align=”center”][form][textarea rows=”3″ cols=”19″ readonly=”readonly”][a href=”” target=”_blank”][img src=”http://YOURIMAGEURL“][/textarea][/form][/div]


****All of the brackets that you see in the code ( [ and  ] ) need to be replaced with ( < and > ).  Substitute the URL of your blog for YOURBLOG and the URL of your image from the Photobucket direct link or WordPress media library  URL for YOURIMAGEURL

Save and close the widget and check out your home page or whatever page you are placing the code to see how it looks!

For Blogger, you can get the instructions and code here.


Check out more tips for bloggers to make the most out of your blog!

I'm addicted to crafting and decorating my downtown urban loft and up north rustic cabin. Read more about me.

Leave a Reply