“Add This Button” Techie Guest Post

11 Comments

Melissa is in the process of scoring some extra Penelope time this evening by having me do her blogging for her. Apparently there’s some interest in how to create the little “Add This Button” widget on the right-hand side of this blog, and since I made the widget . . .

Step 1: Upload your image to the web. You can post it to WordPress or put it on Flickr or whatever. You just need to get it up on the web and copy/paste the image’s URL into your code. Right-click on your image and select “Copy Image Address” to copy the URL to your clipboard.  Then paste the image URL somewhere easy to find.  I use a mac, so I the like to paste my URLs into a mac sticky note in the Dashboard.

Step 2: Find the page you want link to. Your button has to lead somewhere, so find the URL for the page you want to link to and copy/paste it a few lines below your image URL.

Step 3: Create your widget code. Take the full URLs for the image and the page you’re linking to and copy them into the following code snippets, making sure to copy over the bold text with the appropriate URLs.

Button Code

<div align=”center”><a href=”http://PAGE-URL” ><img src=”http://IMAGE-URL“/></a></div>

Text Box Code

<div align=”center”> <textarea cols=”19″ rows=”9″><a href=”http://PAGE-URL“><img src=”http://IMAGE-URL“></a> </textarea> </div>

Step 4: Drop each code snippet into a WordPress Text Widget. Go into the widget editor in WordPress and add two new text widgets.  Put the button code in the first and the text box code in the second.  Make sure to click the “Done” button after editing each widget and then click “Save Changes”.  If you don’t click “Done” and “Save Changes” you won’t see any results on your blog.

Wordpress Admin

Click to Enlarge

Step 5: Tweak your layout. I can’t give clear instructions on this, but you’ll probably need to play with the spacing for your widgets. You’ll notice in the text box code the <textarea cols=”19″ rows=”9″> tag. The bigger the numbers, the larger the text box.  So if you need a slightly smaller text box to fit your blog, experiment with fewer columns or rows. You might try  <textarea cols=”10″ rows=”5″>. Just make sure that the code is easy to copy/paste for your users.  For instance, if the text box isn’t big enough to fit all of your code, you may want to make it bigger or use a URL shortening website like Bit.ly to shrink your URLs down to size.

Please post any questions or criticisms to the comments.  If you would like to see more HTML or CSS tutorials, just ask and I’ll see what I can do.

view or add a comment
  • Categories
    1. summer says:

      i feel techy just for knowing the term widget. this is a whole ‘nother realm. thanks for the great instructions! i’ll be back when i’m brave enough to try this.

    2. AmberLee says:

      okay. I think you may have just solved my most frustrating issue on my blog for the last few months. this is a great tutorial. thank you thank you thank you.

    3. Nancy says:

      Wow! Thank you! I’ve been secretly wondering this for a while now. That’s very nice of you to share.

    4. First of all I just have to say thanks to Chris for taking the time to help us out!
      Question Chris: I have a blogspot blog and I thought your instructions might work the same in blogger. I tried adding text gadgets and HTML gadgets and had no success.
      Is there one part of your instructions that you could tweak in order to make this lesson applicable to blogger blogs or are blogger blogs a whole other game park?

      Thanks,
      CK

    5. Chris says:

      Carrie,

      Try using a picture gadget for the button and an html gadget for the code box. Blogspot is really picky about which kind of gadget you use.

      Chris

    6. Chris, I got it to work! I used a text gadget for the button and an html gadget for the code box. But I had to type in every part of the code button by button (including my picture url)… no copying and pasting! For some reason that worked and I am so grateful to you and Melissa for responding to our questions!

      Thanks,
      CK

    7. Chris says:

      The problem with copy/paste is bizarre, but it goes to show that enough messing around solves problems. Glad to hear you got it figured out!

      Chris

    8. Xonynofg says:

      I was born in Australia but grew up in England http://idygienohy.de.tl lingerie model boards i cant really watch girl on girl shit for too long but this right here is legendary…what dreams are made of

    mobile site