Monday, October 3, 2011

Tutorial Monday: Blogger Buttons & Sponsor Blocks for WordPress

I am a Blogger platform blogger 100%  it's the only thing I've ever really used. However just about every "pro" blogger seems to say that WordPress is awesome and amazing and so much better than Blogger - so I have a free WordPress blog, that I set up one day to experiment with but haven't really done much with since. Hopefully this tutorial will help with anyone who has a self-hosted WordPress blog.

So we'll start this tutorial with a screen shot of my (rather pathetic) WordPress dashboard:

I'm going to click on "Widgets" in the sidebar (above) and then scroll down and select the "Text" option (below).

I'm going to drag the "Text" widget into the sidebar of my layout. I'll copy and paste the button code into the box, hit "Save" and then I'm done!

And this is what it looks like on the blog:

Now in order to keep things tidy in your sponsor box you'll need to understand what that code means.

The <a and </a> represent the opening and closing of your link href="" represents where the link should take you. target="_blank" opens the link in a new tab or window. Close this bit of code with a > and start the image code.

(With the image code you can either put the width and/or height either before the source code. Same with the target code it can go before the link source url or after, it won't change the outcome. Example: <img= width="150" src="http://yourimagehere.jpg" />  is the same as <img src="http://yourimagehere.jpg" width="150" /> and will appear and behave exactly the same)

<img starts your image code then you'll add a source src="http://yourimageurl.jpg" then you can give height and or width this really helps keep things tidy and in line. If you have a collection of rectangular buttons all you have to do is insert "width="150" and into every image code and you'll have a very tidy and uniform line of buttons.

You don't have to put both width= and height= if you enter one it will automatically re-size for the other. I usually do the "width" code for buttons that I want to align vertically - like a sponsor block, but I'll use height= if I want to align the buttons horizontally - like all together at the bottom of a blog post. This tiny bit of code really helps. And like I said - you really only need one or the other.

Here is an example of the buttons with different width codes:
above is the example of the code with different widths and below is an example of what that looks like.

You can also change the sizes to match up different sized buttons for example here are two 150 square and a 150 square + 150 square with a 300 underneath it.
above is the code, below is the result
 O you can create a 300 square feature on top, a 300 rectangle and then two 150 squares below that.

above is the code, below is the result
Everything is nice and tidy and neat - just the way it should be.

Any questions?

Next week I'll be doing more of a design-oriented blog post. Any of you blog designers who want to guest post and build on my very basic tips would be most welcome!