How To Make A Blog Banner?

If you have a blog, it’s extremely important to have a “button / banner” for your blog. A “button’ can help spread the word about your blog, it’s like free advertising.

I’m going to show you an easy way to make your own button. You don’t have to have any design experience to do this. If you have your blog professionally designed a “button” is usually included.

We will start with a 125 x 125 button. This is the standard size for most blogs and their sidebars.

First you need to decide what background you want for your button. You can use a plain color or even crop a photo. Keep in mind that your background should be fairly light so your font shows up on it. You can get Free scrapbook pages on DigiScrap or Free photo’s online, just “Google” it and make sure it’s not copyrighted.

Once your found your desired background, save it and open Picknik. Picnik is a really easy photo editing program and best of all it’s free. Now upload your background to Picnik.

Now that your background is uploaded, click re-size and change the dimensions to 125 x 125. Increase the “zoom” percentage on the bottom right of your screen so you can see your background better. It may look blurry but it’s just because of this size.

You can now select the font and design your “button” with stickers or whatever you’d like.

Once you’ve designed your button the way you want it, save it as a .jpg.

Here’s how you get it on your blog:

First, you need to host your “button”. I recommend using the free hosting service PhotoBucket. Go to PhotoBucket (register if you don’t have an account) and upload your button. Once your button is uploaded, PhotoBucket will assign it an HTML code.

Here is what the coding needs to look like to make the “button” visible on your blog:

Replace the red text below with your information.

<center><a href="YOUR BLOG URL" target=”_blank”><img border="0" alt="YOUR BLOG NAME" src="HTML CODE FROM YOUR BUTTON ON PHOTOBUCKET"/></a></center>

This is how my button code looks:

<center><a href="http://www.christianclippers.com/"target=”_blank”><img border="0" alt="Christian Clippers" src="http://i847.photobucket.com/albums/ab35/christianclippers/Christian%20Clippers%20-%20Blog%20Stuff/CC-button.jpg"/></a></center>

Now that you have the html code, just copy and paste it into a widget on your blog. You now have a button!

If you want to create your button with code underneath, here’s how:

Replace the red text below with your information.

<center><a href="YOUR BLOG URL"><img border="0" alt="YOUR BLOG NAME" src="HTML CODE FROM YOUR BUTTON ON PHOTOBUCKET"/></a></center><center><textarea id="code-source" rows="4" cols="13" name="code-source"><center><a href="YOUR BLOG URL" target="_blank"><img border="0" alt="YOUR BLOG NAME" src="HTML CODE FROM YOUR BUTTON ON PHOTOBUCKET"/></a></center></textarea>

Just copy and paste this code into a widget on your blog and you will get this:

Banner Button

These are great because people can just copy and paste the code underneath into their own widget.

This awesome article is written by Apryl who blogs at ChristianClippers.Com and shares great discount coupons which help people save a lot of money.

Leave a Comment

{ 13 comments… read them below or add one }

Aaron July 21, 2010 at 11:52 AM

Thanks Christian. Another resource I like are the “free stock image” sites that are available. You can find several by just searching for the phrase on Google. It’s a great starting point for the background image of the banner.

Reply

Saksham Talwar July 21, 2010 at 9:53 PM

I will try free stock images. I heard about those but never searched for them. Will do that now!

Reply

Noela July 21, 2010 at 12:41 PM

Thanks for sharing! I will try this later I like to have this button on my blog hehehe!

Reply

Chris July 21, 2010 at 12:58 PM

Thanks for the great information. The difficulty I have faced while designing a banner is the availability of the nice images, almost all the images are copy righted.

Reply

Saksham Talwar July 21, 2010 at 9:54 PM

True! We should search for non-copyrighted images to be on a safer side.

Reply

Brian July 21, 2010 at 11:45 PM

I have some issues with some of the instructions. I really new to this blogging stuff. I am sorry. But I will try to check on this. I believe for beginners this is very helpful but for toddler (that is me in blogging)Then those words being used are like latin to me. :) But hey thank you so much. I like the thought of having blog banner.

Reply

Tricka July 22, 2010 at 2:25 PM

i use the services of banner fans , its free site

Reply

Shiva | Web Magazine July 22, 2010 at 5:33 PM

Hey their April, this is a Great idea of adding a blog banner code box because we can get free advertising this way. If somebody likes our blog, certainly some them may put a banner back :D

Reply

Saksham Talwar July 22, 2010 at 11:08 PM

Exactly! Free advertising is great! In fact anything for free is great!

Reply

limaj@harley handlebars August 19, 2010 at 12:55 PM
Banner Maker Software December 23, 2010 at 3:08 PM

Hi

it’s a good blog. Informative also.

i would like to visit here again.

KEEP WRITING!

Reply

Jaison December 10, 2011 at 4:11 PM

Nice tutorial. I’ve been searching for this. I am conducting a photo contest on my blog so I wanted to make a banner for it. That’s how I landed here.

Reply

Saksham Talwar December 12, 2011 at 6:21 PM

Hey thats nice. Once ready do show me the banner :)

Reply