So you have your pretty blog button, but how do you go about getting it onto your sidebar along with the little code that people can copy and paste below it? It can be a little confusing for those not familiar with HTML coding, but let’s go through the coding and learn how to do it step by step!
Here is what we’re trying to accomplish:
The first step is to have somewhere to place your button and code. For Blogger users, create a new HTML/Javascript gadget. For WordPress users, drag over a new “Text” widget to your sidebar.
Here is the full code for the above:
Now let’s break down the above code a bit so we can understand what’s going on and what needs to be edited. First, let’s work on the coding to display your button graphic.
To start off, this coding centers your content, which in this case is your button graphic. You can also use
This next piece of coding is what the button will link to (i.e your website). Please replace my website url with your own.
The above displays your actual button graphic. You will need to obtain the image url to your button graphic. This should be simple for WordPress users by going to their Media Libraries. Blogger users can use an image uploading service such as Photobucket or Flickr, and grab an image url from there. You will know it is an image url because it will end in either of the following extensions: .jpg, .jpeg, .png, .gif, .bmp. Replace my image url above with your own. The next portion of this code refers to the size of your button. Mine is set to 200. Usually around 150 to 250 are good button sizes. If your button graphic is already sized appropriately as it is, feel free to delete the entire width=”200″ portion of the code.
The above simply closes our previous tags.
Now onto your textarea!
Same as above, we would like our textarea to be centered.
Finally, we need to close our previous textarea and div tags.
That should be it! Feel free to test out your new grab code by copying and pasting the coding in your textarea into a new HTML or Text widget.
