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.

Directions

 Upload your button/ badge to your image hosting platform

 Install the code

           WordPress

              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

         Blogger

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

Share →

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge
Scroll To Top