Monday, September 19, 2011

How to code your sponsor block in Blogger

Open your Blogger dashboard. I'm going to be demonstrating this using the new interface, so things might look a little different than you're used to. When you're following this tutorial I suggest you switch to the new interface, you can always switch back to the old one if you need to.

Open up your Blogger dashboard
Click on "Template" on the left navigation column.

Click "Customize" under the icon that shows your blog
Click "Layout" on the left hand navigation column

Make sure that your layout has an area for sponsors, usually a sidebar works best. Typically sponsor are on the right.
Click "Back to Blogger" at the top right corner of your screen.
Click "Layout" in the navigation column on the leftt
Click "Add Gadget" in the area you want your sponsor block to appear (don't worry you can drag them around anywhere within your layout)

A pop-up window will appear
Paste your sponsor's button code

Here's what the code means:
<a  this shows that there is a link coming up you'll close the link with this > and at the end of the button code you'll close it with </a> 
href="BLOG ADDRESS HERE"  this is the link 
target="_blank"  a very useful bit of code that opens the link up in a new tab or window
<img  this shows that there is an image to be displayed you'll close you image code with />
src="YOUR IMAGE URL HERE" this is the source url for your image - make sure that the address you paste here is the image source url and not a link to the image
width="000" height="000" this code tells the browser he dimensions the image should be displayed. I usually only use either the width or the height code, you don't need both to re-size the image. You want your images to have the same width in your sidebar for that tidy, unified look.
<div> this is one way to do a line break you can also use <br />

Below is the html code for you to copy and paste into your browser to get you started building your sponsor block.

Okay, that's it for today! If you'd be interested in seeing this tutorial for wordpress just let me know. 

Next Monday I'll show you how to code a grab button for your blog - so be sure to check back for that!!