Tutorial: Snag My Button

While redesigning Beautiful Imperfection, I decided to put a snag box below my button.

I had no idea how difficult It would be to find the information to do this.

In fact, I had to go several places and combine the information.

I then got on a roll, and created one for this blog as well.

Because I had such a difficult time with this, I am sharing my own tutorial with you!

Hopefully my frustration, and almost giving up will be beneficial to other bloggers in the blogosphere!

What you will need:

1. A button. You can create one yourself, or find one ready to use on sites that share blog backgrounds and headers.

2. URL to your blog

3. Image hosting platform (such as photobucket). You will need access to the direct link for the image.


 Upload your button/ badge to your image hosting platform

 Install the code


              1.   In your dashboard, under Appearance, click on Widget

              2.   Select the [TEXT- arbitrary text or html]  widget, and place 

              3.   Insert the following code:

[a href=”your blog url”][img src=”your image url” width=”125″ height=”125″ alt=”My Button” style=”border:none;” /][/a] [div style=”border:1px solid rgb(221,221,221);background:#ffffff none repeat scroll 0 0; width:130px;overflow:auto;height:120px;line-height:1.5em;margin:auto;padding:5px 10px;”]<a href=”your blog url/” title=”blog title”> <img src=”your image url” width=”125″ height=”125″ alt=”My Button” style=”border:none;” /></a> [/div]
              4.  Find and replace the following:
                           [] with <>   (note: i had to change these, otherwise it would have shown up with the button and scroll box)
                           your blog url   with your actual blog url
                           your image url with your actual image url
                            Blog Title with your actual blog title
             5.  Save


1. Under your design tab, in page elements, click add a gadget

2. Scroll down and select ADD HTML

3. Insert the following code:

[img src="your image url" alt="" /]
[br /][textarea cols="20" rows="3"][a href="your blog url"][img src="your image url" alt="   "
width="125" height="125" /][/a][/textarea]
 4. Find and replace the following:
                                 [] with <>
                                 your image url with  your actual image url (from photobucket, etc)
                                 your blog url with your actual blog url
             5. Save

View your new button and enjoy… LET THE LINK LOVE BEGIN

I would truly appreciate it if you would let me know if this tutorial worked, as it is my first real tutorial. If it didn’t work for someone, I will gladly tweak it!

Also, Share my button on your blog if you like.

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine

About NighLon

MARKETER, SAHM, wife, graphic designer, web designer, tweek (twitter addict), blogger, and self proclaimed social media guru.

Posted on October 7, 2011, in Blog Bling, Blogging Tips and tagged , , , , , , , . Bookmark the permalink. 2 Comments.

  1. UUUG I cant get it to work 😦

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: