Creating your own banner for a blog or website...

Okay, branding is a HUGE thing when it comes to business, charities or even people. If I show you a yellow smiley face, what do you think? WalMart? Yeah, me too. So why? Well, because they know how to brand! Now it's your turn. Once you have a blog or website set up your next step is to create a banner that you can exchange with other, similar blogs or websites - or with forums or anyone else that will post it... But how do you do it??  It's much easier than is sounds - I promise!

Step One - Creating Your Banner
If you have a logo for your company, business or site, you don't need to worry about creation, but you do need to make sure it's the right size.

If you don't have a logo already, you can easily make one. Start by taking a photo or finding a picture that will go with the theme of your site or blog. You can easily do an image search on most search engines or you can look on Photobucket.

Once you find one that you like, right click and choose "Save Image As..." on the menu that pops up. Make sure you know where you save it and what you call it. - just makes things easier...

Open the file in your Paint (or comparable) program and use the "Letter" option to put the title of your site or blog on to it. Once that's done, resize your logo to 125 X 125 pixels.

Your Button is now complete!

Step Two - Creating an HTML code for your Button
Upload your Button to Photobucket. If you don't have a Photobucket account, open one.

Once you have uploaded your Button to Photobucket you will see a number of choices for Sharing it. Choose the one labeled HTML code and copy it.

Open a Note Pad, NoteBook or other word processing program and paste it there so you can make changes to it. It should look something like this:

<a href="http://s608.photobucket.com/albums/tt169/SabrinaMBowen/?action=view&amp;current=Banner-1.jpg" target="_blank"><img src="http://i608.photobucket.com/albums/tt169/SabrinaMBowen/Banner-1.jpg" border="0" alt="Photobucket"></a>

Now you simply need to change a few things and you'll be good to go.
First, remove the current Photobucket web address and replace it with your own.

BEFORE:
<a href="http://s608.photobucket.com/albums/tt169/SabrinaMBowen/?action=view&amp;current=Banner-1.jpg" target="_blank"><img src="http://i608.photobucket.com/albums/tt169/SabrinaMBowen/Banner-1.jpg" border="0" alt="Photobucket"></a>

AFTER:

<a href="http://howyoucanchangeyourlife.blogspot.com" target="_blank"><img src="http://i608.photobucket.com/albums/tt169/SabrinaMBowen/Banner-1.jpg" border="0" alt="Photobucket"></a>

Next you just need to change the title from Photobucket to the name of your site or blog.

BEFORE:

<a href="http://howyoucanchangeyourlife.blogspot.com" target="_blank"><img src="http://i608.photobucket.com/albums/tt169/SabrinaMBowen/Banner-1.jpg" border="0" alt="Photobucket"></a>

AFTER:

<a href="http://howyoucanchangeyourlife.blogspot.com" target="_blank"><img src="http://i608.photobucket.com/albums/tt169/SabrinaMBowen/Banner-1.jpg" border="0" alt="Financial Fitness"></a>

And you're done! You now have your HTML code for your button! Remember to save it so you can give it to banner exchange sites or use it as an ad.

Step Three - Creating a Code Box  (so others can snag and share your button)

In that same NotePad/Word processor page where you have your Button Code, skip down a few lines and copy and pastes the following:

<textarea cols=”15″ rows=”4″ wrap=”VIRTUAL”>YOUR BUTTONCODE HERE</textarea>

 

Now, simply copy and paste the Button Code your created before in to it.

BEFORE:

<textarea cols=”15″ rows=”4″ wrap=”VIRTUAL”>YOUR BUTTONCODE HERE</textarea>

 

AFTER:

<textarea cols=”15″ rows=”4″ wrap=”VIRTUAL”><a href="http://howyoucanchangeyourlife.blogspot.com" target="_blank"><img src="http://i608.photobucket.com/albums/tt169/SabrinaMBowen/Banner-1.jpg" border="0" alt="Financial Fitness"></a></textarea>

 

Save this code, and the Button Code together (this under that) in your word document for future use.

 

Here is an example of what it will look like when finished and saved together:
(note, this is for this blog if you should choose to - take and use it!)

<a href="http://howyoucanchangeyourlife.blogspot.com" target="_blank"><img src="http://i608.photobucket.com/albums/tt169/SabrinaMBowen/Banner-1.jpg" border="0" alt="Financial Fitness"></a>

<textarea cols=”15″ rows=”4″ wrap=”VIRTUAL”><a href="http://howyoucanchangeyourlife.blogspot.com" target="_blank"><img src="http://i608.photobucket.com/albums/tt169/SabrinaMBowen/Banner-1.jpg" border="0" alt="Financial Fitness"></a></textarea>

Final Step - Using your codes!

Now that you have your codes you cam use the HTML "Gadget" option on Blogger or your website to add this to your blog or site. When you visit other blogs or sites similar to your own, contact the owner and offer to exchange buttons! Now you're reaching not only your readers, but theirs as well!

**NOTE: If you use WordPress.com, you will not be able to display the codebox. WordPress.com does not recognize the code! To get around this I recommend doing a blog post announcing your new badge and providing the code to your readers that way. Then you could create a widget on your sidebar, linking to that post.

 

AND YOU'RE DONE!!!