Sunday, February 10, 2013

Computer Tip-of-the-Week: Initial Blogger Setup and Blog Banner Size

Hi there!

Are you having problems getting your banner picture-size to fit the Blogger Header?  I know I did, and my friend just switched to Blogger and experienced a similar issue. 

The frustrating things is that Blogger books don't address the issue directly - and all of the forums and blogs we've checked don't really offer much advice beyond "just keep playing around with the size in Photoshop".  NOT helpful!!

We spent a great deal of time trying to troubleshoot this issue and thought that if we had this problem, maybe others out there in blogger-land might have similar issues.  So, here is what we came up with to deal with the banner-sizing issue.  This is a rather long posting - but it takes you pretty much step-by-step through how to find the size of your blog and how to size your banner picture.

First, I want to do a quick summary of initially setting up a blogger account because I don't want to assume what you do or don't know. 

The first thing you'll need to do is to get yourself a google account (you must have one in order to set up a Blogger blog).  Once you've done so, you'll need to follow Blogger's process for setting up a blog.  It's been streamlined a bit since I had set mine up, but basically, you'll be asked to provide or choose:
  • Your Google account logon and password
  • A Title for your blog (my example in the above printscreen is: MY NEW BLOG NAME
  • The web address you'd like to have listed with Blogger (In my printscreen above, I typed: MYBLOGNAME2).  In real life, my Re-Covered Treasure's blog address is  FYI, you can add a custom domain later (through Google) or point your own domain to your blog (which is what I do with my domain
  • Choose your Template (which means you can use the scrollbar to scroll through the general template styles available and then click on the one you like the best).  Don't worry, this can be changed easily later... just pick one that most closely resembles how you think you'd like your blog to look (you can personalize it with colors and backgrounds later - you really want to look at how the columns and main blog area appear).
  • Then click Create Blog
Printscreen of Blog Setup screen in Blogger
Now you have the basic blog ready to post to - which you might want to do.  Click the Posts tab on the left-side menu and then click the New Post button.   You might want to have a post titled something like  "Stayed Tuned For Our New Blog"  in the title and then something like "Our blog will be available soon, please check back with us or subscribe to our blog and you'll see each post as it arrives!" in the post body.  And then click the Publish button at the top.  Now your potential readers will have something to look at when they find your blog.

 Ok so now that you have a blog - you will want to personalize it.  There are two ways to do that: Layout and Template

Template is the original design you chose.  Template is how you'll fine-tune the look of your blog (meaning colors, layout style, font, background picture or where you can remove the background picture if you'd rather just have a plain background!).  This is also where I finally discovered the little trick of how to size your banner to your blog!

Layout is based on the template you choose but you don't personalize the colors and styles here.  Instead this is where you add (or remove) gadgets.
This is a printscreen of my layout for
Gadgets are the neat little features that let you add fun things to your blog (for instance a Facebook Icon and link, an Etsy Store Link, or a Flickr Photo Slide Show).  Your banner, blog posts, blog pages, and Navigation Bar are also considered gadgets here.  Usually your template will allow you to add quite a variety of gadgets but it already has gadgets that Blogger felt you should have... so here is where you'd remove gadgets or add new ones . 

Layout is also where you add in your Favicon (little thumbnail picture representing you or your company) and where you add your banner picture, title, and tagline.  THIS is where my friend and I experienced an incredible amount of frustration because you upload your banner picture to the banner gadget and it looks great and then you click "preview" and find out that your banner is totally messed up!  Too big, too small, cut in half, or totally pixilated or blurry, or a bazillion other problems.

So here is what we discovered about Banner Pictures created in Photoshop Elements
  • You can try resizing based on inches.  This is a great way to get your initial picture adjusted to a length and width that is appropriate for a banner.  I find that between 2-4 inches wide makes a nice-looking banner.  And your width can be anywhere from about 7 inches to 15 inches.  But inches can change from computer to computer, or web-browser to web-browser!  (we have found that Internet Explorer was harder to work with when dealing with Google products, and that Mozilla seemed more Google-friendly - but that is just a personal observation!!).
  • It is better to re-size your banner based on pixels! But how do you know what pixel size works best??  That's where you need to click on your Template.   When you click on Template.  A group of templates appear and at the top is a large thumbnail picture with the caption Live On Blog - which is your blog and how it currently appears.   Click the CUSTOMIZE button and it will take you to the screen where you get to play around with your colors, fonts, and styles etc.  Remember from here, NOTHING is saved until you click the Apply to Blog button!!