21 January 2012

Blog Coding 101: Sidebar Button Code

You may have always wanted to add your blog button on your sidebar with a cool little copy-and-paste box for other bloggers to grab.  It may seem unreachable.  You may be awful at HTML.  Trust me, it's easy. :)

Adding a button to your sidebar with a code for other bloggers to copy is a simple combination of several different codes:

  • center code
  • image code
  • textbox code
  • link + image code
Easy peasy.

(And yes, I am going to make you do all the work.  So open up some type of text-editing platform like Word or TextEdit or Notepad.  Oh, and get comfortable.)

First, we're going to set our boundaries.  (Sounds scary?  It isn't.)  If you want your entire thing to be centered, start your code with: <center>.  Then skip two lines and add </center> so that you have a space in between the two.  You will be adding the rest of your code between these two tags.

  1. To have your image over your textbox, you'll simply use the general image code.  Like so: <img src="IMG LINK HERE">  Paste this below <center> and then put your image link in there where it's supposed to be.
  2. This takes care of your image.
Add a break "<br>" so that your textbox doesn't end up beside your image.  You can add two if you want even more space between your image and your textbox.


So far, you should have this:
<img src="IMG LINK HERE">
  1. To start your textbox, start with the opening tag: "<textarea>".
  2. The next line will be what you want other bloggers to copy.  This will be a combination of a link code and image code.  Essentially, you're "wrapping" the link code around the image code.  This will make clicking your image take you to your desired link.  So.
  3. <center><a href="BLOG LINK HERE"><img src="IMG LINK HERE"></a></center>
  4. Now you want to close off your textbox code with "</textarea>".
And that's it.  Oh, you expected it to be harder?  Welcome to the world of HTML.  I wouldn't get used to it. ;)


<img src="IMG LINK HERE">
<center><a href="BLOG LINK HERE"><img src="IMG LINK HERE"></a></center>



Navigate to your dashboard and click on the desired blog.  Go to Layout.  Click where you want your widget.  You'll want to paste your newly made code into a new HTML/Javascript widget.  Position as you see fit on your page, and witness your new creation. :)