How To Create A “Grab Button” For Your Art Blog’s Sidebar

Published Jun. 24th 2010

An easy way to get others to spread the word about your blog is to create a “grab button” that fits in the sidebar of their blog. (This allows other bloggers to grab your logo or image and link to your blog, just by coping and pasting some text.)

For the purpose of this tutorial, I am going to show you how to create a simple, no-frills button using your blog’s current logo. Of course, you can create something far more elaborate if you’d like, based upon your photo editing skills.

I used Corel Paint Shop Pro X2 but you can use whatever photo editing program you’re most comfortable with, like Adobe Photoshop, Picasa, or GIMP.

Step 1: Design your button

Go to the homepage of your blog or website. Scroll up or down to the part of your blog’s design that you’d like to use in your grab button then click on the “Print Screen” key on your keyboard.

Open up your photo editing program and “paste” in your screen image.

grabutton1

Select the crop tool, resize the tool around the part you’d like to use as the “grab button”, then select the “apply the crop” (in my case the green check).

grabutton2

On the toolbar, click on “image” then “resize."

A pop-up window will open asking you what you want to resize your image to. Under “pixel dimension” choose 125 for width then click “ok”. (It could be that another size would work better for your blog, but 125 is what I chose.)

grabutton3

At this point you can add text to your button, or if you just cut out part of your logo as I did, you can simply save your grab button. (i.e. mygrabbutton.jpg)

Step 2: Upload your button to the web

Log into your favorite photo sharing site, like Flickr (www.flickr.com ), and go to the “upload photos” area.

grabutton5

Upload your grab button, and select “public” under the privacy settings.

grabutton6

Once the grab button is uploaded, go to your gallery page and click on the image of the button.

grabutton7

Click on the “all sizes” link above the image, click the appropriate image size, then scroll down to grab the photo’s url destination. You will need the URL later so keep this page open.

grabutton8

Step 3: Place your grab button on your blog

Log into your blogger account and click on the “design” link.

grabutton9

Once you click on the “design” link, you’ll be taken to the “elements” page:

grabutton10

On the “elements page” click on the “Add a gadget” link in the upper right corner of the page. Clicking on the link will open a pop-up window asking you to select a gadget. Choose “html/javascript”.

grabutton11

Choosing “html/javascript” will take you to the following page.

grabutton12

This is where you’ll add the information needed to create your grab button.

In the title area, write “Grab This Button." Then, in the large box, include the following html code:

<center><img src=”http://flickr.com/grabbutton.jpg”><textarea style=”width: 75%; height: 100px” name=”textfield”><center><a title=”Blog Name” href=”http://blogurl.com”><img border=”0? src=”http://flickr.com/grabbutton.jpg”></a></center></textarea></center>

PLEASE NOTE: You must place your own blog’s information where necessary in the paragraph above. In other words, http://blogurl.com should actually be YOUR blog’s web address.

You’ll also need the location of your photo on Flickr, so go back to Flickr, copy the URL, then replace the url addresses and titles in the HTML code with your own information before clicking "save."

grabutton13

Once you click “save” the pop-up window will close and you’ll see your grab button listed on the right side of the page.

grabutton14

If you don’t want your button to show up at the top of your sidebar, just click and drag the button to where you want it placed on your sidebar, as shown below.

grabutton15

Voila! You’ve just added a grab button to your blog! It should look something like this (but with your own logo, of course):

grabutton16

And honestly, if you follow the steps above, it’s not as difficult as it might seem. :) Good luck!

Did you like this article?
Please stumble it so others will find it or check out the related posts below.
Finally, my "big project" is finished! It’s been a crazy day with a lot going on, but foliotwist.com is finally live and online! Since I’ve kept it a complete secret up until launch, here’s a quick (mostly visual) overview of what it does. . .read more
Although I love the idea of composing my posts directly in Blogger’s interface and, with a single click, having my photographs appear and my links become linked, there's something to be said about knowing how to use a little HTML code in order to enhance a blog post. When you use HTML code in . . . read more
Back in 2010 Blogger launched a template designer that promised to make changing one's overall blog design effortless and pain-free. I, however, was a little skeptical and a bit terrified that using the template would cause a loss of data. Boy were my worries unfounded! Today I am going to sho. . . read more
Have you ever visited an art blog where the basic comment tagline was replaced with something cute like, "12 Birdies Tweeted" or "5 Painters Said" or "7 Lovely Readers Wrote" and wondered how they did that? Below are 4 simple steps for personalizing your comment tagline. Step 1: Sign into your. . . read more
Besides adding a Twitter widget to your art blog—or setting up your blog to automatically tweet about your most recent posts—you can also take advantage of Twitter's promotional power through the use of a "Tweet This" button or link. Having a "Tweet This" button allows your readers to easily s. . . read more
Stay current.
Subscribe to EmptyEasel's free weekly newsletter for artists. Sign up today!
CanvasFlyer
Art Contests
EE Writers
Alyice Edrich Cassie Behle Karen Middleton Aletta de Wal Luke Montgomery

Want to be a writer for EmptyEasel? Paid positions are available, and the perks are great! Contact us to apply