Saturday, May 7, 2011

Graphics: Banner

I've been experimenting with HTML and coding and pictures and all this crazy blog stuff lately (if those are even the appropriate terms). It's caused multiple super late nights but also brought about the buttons on my sidebar and my "Hockey Crush" feature banner. But since this has caused so much confusion and slight frustration for myself I thought I might let you in on some of my new secrets.

I first realized that everyone has these buttons to advertise and share their blog, so I decided to first experiment with banners and buttons. After making a few buttons for click-through labels (i.e. Hockey Crush and Lists) they were too small, didn't fit well with the look of my blog and I hated them. So then I decided to try to make a banner for my Hockey Crush feature. And this is how it went:

1. First I picked a background. For me I wanted to keep it simple so I just googled a colour and dragged it over to the desktop.

2. Edit it in whatever picture edited application you like, I just use Picnik. Here is where I resized the banner to whatever dimensions I liked, threw in some cool text and added a border.

3. Next you have to post the image to a image hosting site. This could be Flickr, Photobucket, Picasa (maybe). For this particular image I was using Flickr.

4. In Flickr if you then click the picture and hit the little arrow beside the Twitter button a few options will appear.

5. You want to click "Grab the HTML/BB Code"

6. Here you will see crazy numbers and letters and symbols lying all over the place. Copy the code that you see. For example:

<a href="" title="blue banner by DeeBrockmann23, on Flickr"><img src="" width="100" height="19" alt="blue banner"></a>

7. Paste the code either into a HTML gadget on your homepage or within a post by clicking "Edit HTML"

8. You then want to change what I have bolded below to the site you want the banner to direct readers to. Make sure that the QUOTATION MARKS are still in the code!

<a href="" title="blue banner by DeeBrockmann23, on Flickr"><img src="" width="100" height="19" alt="blue banner"></a>

9. You can preview the image and see if it is to your likeness, if you don't like the size you can go back to step #5 and below the code you will see you can click down a few different size options.

And there you have it, how I made my banner and my ordeal with buttons will be posted at a later date. Here is the code just a little more simplified:

<a href="The URL where you would like the image to direct your readers"><img src="The URL that is hosting your image"></a>


  1. It would appear that you have way too much time on your hands... any thought of yard work, or other house tasks????

  2. Well I mean the blog and yard work are pretty much the same right? Unpaid work?

  3. Hahahaha best response ever!!! Well played!!