How to Design Your Own Blog Banner
What's a blog banner? It's the (usually rectangular) graphic and text area at the top of a weblog that identifies the blog's title (and sometimes the URL). Depending on the blogging platform (Wordpress, Movable Type, Blogger, and more), blog designs typically come with their own banners created by a Web designer. But, to personalize your site and set it apart from other blogs, you can make your own blog banner on your home computer in a few simple steps.
Other People Are Reading
Things You'll Need
- Computer
- Internet access
- File-uploading software (such as Filezilla or CuteFTP)
- Photo-editing or graphic-design program
Instructions
-
-
1
Determine the desired blog banner size (in pixels). If you're replacing an existing blog banner (sometimes called a header), look at your blog template's style sheet (a .css file) to determine the width and height.
-
2
Open a photo-editing or graphic-design program (such as Adobe Photoshop), and create a new file that has the correct banner size (in pixels).
-
-
3
Add images, text, graphics, photos, and more by using your software's editing features.
-
4
Save your file when you're finished by clicking "Save" and typing in a file name, then choosing the .jpg file extension.
-
5
Upload your blog banner to the directory where your webpage files are located using a file-transfer program.
-
6
Find the name of your old blog banner in your blog's "style.css" file and replace it with the path to your new file (example: http://yoururlhere.com/graphics/newbanner.jpg).
-
1
Tips & Warnings
Don't mix and match too many fonts in your blog banner, which could create confusion and difficulty in readability for your blog readers. Coordinate the font in your blog banner with the style and feel of your blog. If you have any problems replacing an old blog banner or uploading files to your server, contact your Internet service provider for help.
Text your blog banner in different Web browsers (Google Chrome, Internet Explorer, Mozilla Firefox, and more), because different browsers display Web pages in different ways. If you use someone else's images, make sure to follow all copyright laws.
References
Resources
- Photo Credit Christopher Robbins/Photodisc/Getty Images
