Customizing Your Blogger Header

Blogger For A Business Website? A 3-post series for considering Blogger.com instead of building a traditional website.

Julie and I got together again in another web training session. This time we worked together on helping her bring some of the design elements of what she loved about her traditional website (the one where she had very little control or the tools/skills to make changes she wanted) into her new web presence at Blogger, customizing her Blogger’s look
and feel.

Psychology, Intention, Values

Design elements are the colors, pictures or imagery, and the feeling you get when you visit a website. Yes, there is psychology in creating a web presence. There is the intention of the web presence creator (you) and then understanding the people who visit your website (prospective clients/customers or partners).

Design (and its inherent psychology) is a very important aspect for web presence creators because our businesses are a reflection of our own values, hopes and dreams. Some of my ideal clients come to me, as Julie did, with an existing web presence. Being able to capture and leverage what is already working for Julie with her existing design becomes a natural starting point for questions like, “Is my other website a waste if I transfer it over to Blogger?” or “But I really do love parts of my website, I just don’t like XYZ (that I have to pay for changes to my website, that I don’t know how to make the changes to my website, that I have to wait for my webmaster to make the changes to my website).”

When I started with Julie, she had a whole list of things she wanted to do with her web presence; preserving some aspects of her existing design elements was just one thing that was important to her. So we wrote that down, along with several other things (like getting paid online using Paypal and allowing her clients to book appointments online) and began to chip away at each one.

Content Will Always Be King

I’ve noticed when I’m working with a client, we usually save the “custom look and feel” part for later sessions, even though those may be some of the first considerations you have when thinking about creating a web presence using Blogger. The reason we wait until the 3rd or 4th session to “do” the custom look & feel part is because what most web presence creators discover is that content will always be king. The most important piece in the web presence creation process is actually related to content.

Have you prepared your message? Who are you exactly and what are you doing on the web? The more time you’ve spent in getting to know yourself (translating your special value or gifts you use into a destination picture for your clients) the more your design will reflect that clarity and the more your ideal customers will “see” you; in your words and in your design. This is a form of resonance, the type that takes the icky out of selling your wares and makes it feel natural, effortless, genuine. For more about this idea of destinations and resonance, you’ll definitely want to visit Mark Silver & Heart of Business, Inc.

Soooo, Got Content?

The “do I have content” questions by themselves can present some challenges, especially if you’ve only thought about them (or maybe this is the first time you’ve thought about them). I see the pattern of being afraid of not knowing how to do the technology thing show up this way over and over. Thinking about the scary technology part can easily overwhelm us and get us focused on less than productive stuff. When in fact, the place to begin with creating a web presence is with your message and creating compelling content that relays your personal and/or business intentions in an authentic, heart-felt way.

I can help you express your creativity using technology, and support you with content development and getting clear on your message and business intentions (if you need that also). One place you might like to begin is with my post that answers the question “If you teach a technology workshop and help women find their own tech savviness, why do you begin with core values and not the technology stuff?“

Got Existing Design Elements?

Shifting gears back toward technology and your design elements, I’d like to share how Julie and I adopted what was working from her traditional web design to her Blogger web presence. In the end, Julie was able to leverage what she defined from an earlier creative process, introduce it using technology and practice allowing more of her creativity to shine through. Here’s how we did that.

Creating a Custom Header in Blogger

One of the easiest ways to apply customization to your templated Blogger web presence is to create a custom header image.

Fixed Width or Fluid Template?

The first thing you’ll need to know is how wide the custom header image will need to be. Blogger templates come two ways: fixed width and fluid. Fixed width means there will be some white space on either side of the main content area. A fluid template fills up the entire web browsing screen. Blogger provides several templates of each type that, with a few tricks, can be modified with a creative flare that turns your standard template into a custom one.

Julie chose a fixed width template. The standard header image width for most fixed width templates is 760 pixels. The height of your custom header image is more flexible and can be adjusted according to what feels right for you.

The good news was that Julie’s old website had an existing header image that was just a tad too wide (850 pixels) to fit nicely in the Blogger template. So using a favorite image editing software program (I like Photoshop), I simply resized the image, making it smaller. (TIP: re-sizing to make an image larger causes distortion in the original artwork and is never recommended.)

Getting Your Custom Image Uploaded Into Your Blogger Template

post_customHeader1

Click the edit link from Header section.

post_customHeader2

From Configure Header popup under Image, select “From your computer.” Browse to your image and upload.

post_customHeader3

Select “Instead of title and description” and Save.

post_customHeader3a

That’s it! Your Blogger web presence now is custom. You may want to consider changing the background color to match the colors in your custom header and you can do that using your Blogger Dashboard under
Layout > Fonts and Colors.