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.

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.