Customizing and Creating Blogger Templates

From ThemesWiki

Jump to: navigation, search
Blogger
Official Page
Project Documentation
Download
Source Book
Blogger: Beyond the Basics
Blogger: Beyond the Basics
ISBN 978-1-847193-17-9
Publisher Packt Publishing
Author(s) Lee Jordan


Contents

[edit] Changing Blogger Templates without Code

Let's meet Georgia, the owner of Fruit for All a company specializing in shipping high quality fruits and southern hospitality.

Georgia wants immediate changes made to her blog. She wants to experiment with fonts and colors to narrow down what she wants to use on the custom blog.

"This reminds me of the time I bought a bunch of generic shipping supplies when my printer messed up my custom order", she tells us as she logs into her blog, "My shipments of fruits looked nice, but I missed the custom colors and designs".

There are many changes that can be made to a blog without code. Let's see what we can do to make changes to Georgia's blog right away. We will edit the page elements, experiment with moving them around, and make changes to the basic fonts and colors of the blog.

[edit] Use the Test Blog

Let's create a new blog (http://fruitforalltest.blogspot.com/) to test the template changes before we apply them to our live blog. It's always a good idea to have a test site. Even though Blogger has many places to preview changes, it is better to work on a test site so that changes aren't made accidentally and go, live on a production site.

[edit] Customizing Page Elements

The exact same template of TicTac by Dan Cederholm, is on the test site. Georgia clicks the Customize link on the Blogger navigation bar at the top of her screen to bring up the Page Elements section under the Layout tab.

"Can I drag my Blog Archive and About Me page elements to the left side as I can't seem to do it on this screen?", asks Georgia.

The current template Georgia is using only allows page elements to be added to the footer or to the righthand side of the layout. Choosing a default template with a sidebar on the left hand side will allow her to add page elements on the left. If she wants the ability to add page elements to either side of the blog on the Page Elements screen, she will need a three-column template. We will create a three-column template later on in this tutorial. You can see the Page Elements screen in the following screenshot, which displays all the areas where page elements can be added to the blog. The navbar and header page elements at the top are static. Adding widgets to the footer section of the blog is done by clicking the Add a Page Element link in the Page Elements block at the bottom of the layout.

We can see that the Blog Archive and About Me page elements have already been added by default to the right side of the template layout. The elements can be dragged and dropped, up and down, to change their order. The Blog Posts page element is another static page element. The Blog Posts element can be configured by clicking the Edit button. It cannot be moved to a different area of the layout without altering the template.

Each blog has a default layout. Most Blogger templates have page elements on either the left or the right side of the Blog Posts page element. These left and right columns are commonly called sidebars. Hopefully, in the future, they will change it so that all default blog templates allow you to rearrange the page elements exactly where you want them.

"Well, I chose this template originally since the sidebar is on the righthand side. What other things can I do here?" asks Georgia.

[edit] Managing Page Elements

We can edit the page elements we already have, add more, and remove the ones we don't want. All the page elements are managed the same way. To edit or remove a page element, first click the Edit link on that element. Elements are added by clicking the Add a Page Element link in one of the layout blocks. We can see the Add a Page Element block on the right sidebar and one at the bottom of the layout area for the blog footer.

[edit] Time for Action! Editing the Navbar Page Element

The navbar is the top page element. You may have noticed it above your blog and the blogs of other people who use Blogger. The color of the navbar can be changed to any one of the four color schemes: Blue (the default), Tan, Black, or Silver.

  1. Log in to Blogger (http://www.blogger.com) and click the Layout link. Click the Edit link in the Navbar. The Navbar Configuration screen will appear as shown in the following screenshot. Note that each color choice has a radio button to the left.
  2. The first option, Blue, is selected by default, but Silver will match our template better. We can always select a different color.
  3. Click the SAVE CHANGES button to save the new navbar color. You will have the option to view the blog when you return to the main Page Elements screen.
  4. The navbar is now a neutral color that won't distract visitors from the blog. That was a very quick and easy change with drastic results. The navbar now looks like part of the template. The blog already looks much more professional. We can see the results of our change in the following screenshot:
[edit] What Just Happened?

When we clicked on the Edit link of the Navbar page element, we were able to change the appearance of the navbar above the blog. When a different color theme was selected, and saved for the navbar on the Configure Navbar screen, Blogger processed the setting change. Visitors viewing the blog from that point on saw the silver navbar at the top of the screen, above the blog header.

[edit] Editing the Header Page Element, Title, and Description

We can change the title of the blog, the description, and even place our own image in the header section of the blog. Adding images can be tricky with some of the templates. We will experiment to see how different templates display images and text placed in the header area.

[edit] Time for Action! Changing the Header Text

If you have created your blog on the spur of the moment, you may not have taken the time to create a description. Adding a brief description will make it easier for potential readers to find your blog. Let's change the blog title and add a description.

  1. First click on the Edit link for the Header page element. A Configure Header window pops up just like the one shown in the following screenshot. Note that there are separate text fields for the Blog Title and Blog Description. There is also an area to add an image to the Header, from either your computer or from a link on the Internet.
  2. Open the edit window by clicking on the Edit link in the Header page element.
  3. The Blog Title field displays the current title of the blog. We'll add Seasonal and shipped to you! at the end of the title text.
  4. The Blog Description can hold a paragraph about the blog, such as, A delicious test of high quality seasonal fruits! We ship organic seasonal fruits of the highest quality directly to your door.
  5. Click the SAVE CHANGES button to save the text edits made to the Header page element.
[edit] What Just Happened?

The Configure Header screen form accepted the text we typed and then passed it to the Blogger site code for processing. When we changed the Blog Title and Blog Description using the Configure Header screen, Blogger responded by changing the settings for the blog in the template and the site code.

Think carefully about what you include in the Blog Description. It should contain keywords to help potential readers find you. It should also be as short as possible and should be different from the Blog Title. Many people use this space for a tagline, or a short message about the purpose of the blog. Let's view the blog to see the changes we have made so far:

The Blog Title is a little long, but very descriptive. We could probably cut the descriptive text down to make it more effective. We decide to leave it for now since we can always change it later.

Note - You can also change the Title and Description from the Settings | Basic page.

[edit] Replacing the Header Image

Georgia likes being able to change the Header text, but wants to add her own image too. She wants to discover whether the Header image in the template can be replaced from the Configure Header edit screen, and we have agreed to give it a try. We have an image to experiment with the exact height and width of the image in the blog template. The height and width can sometimes be found by right-clicking on the image while viewing the blog. Most default templates are background images. So the best way to discover their height and width is by logging into Blogger, clicking on the Layout link, selecting the Edit HTML tab and then scrolling to the template code for the #header-wrapper style.

[edit] Time for Action! Adding an Image to the Header

We're going to add an image to the header of our blog by editing the Header page element. We will upload an image file from our computer using the form within the Configure Header window. You should have an image optimized for use on the web ready to go. A sample image is available in the code folder for this tutorial at (http://bloggerbeefedup.blogspot.com).

  1. Log in to Blogger and click on the Layout link in the Dashboard to open the Page Elements page. Then click the Edit link in the blog header to open up the Configure Header window.
  2. Select the radio button option next to From your computer then click the Browse button to choose an image. We'll use the image ffa_header_orig.gif from our code files. A yellow triangle with an exclamation mark will be displayed as the file is uploaded, just like the one seen below. If it takes more than a minute, cancel the action, and then try to upload the file again.
  3. Once the file is uploaded, you will see a copy of the image you have just uploaded in the Configure Header window.
  4. You can decide whether you want the image to display Behind the title and description, or Instead of the title and description by selecting your choice from the Placement radio group. The following screenshot shows a preview of the image with the placement of the image set to Instead of title and description.
  5. Click SAVE CHANGES and then clear your browser's cache. If you do not clear your cache, you may not see the changes you have made. Click View Blog to see what has happened. An example of how it looks now is shown in the following screenshot.
[edit] What Just Happened?

Whoa! That did not go well. Take a look at the results above. Instead of placing the image exactly over the other template image, the template code caused the new image to display over to the right. This was not the effect we were going for. Before you upload an image, check the size of the header-wrapper. It can be found by navigating to Layout | Edit HTML and then scrolling down the template code in the Template text area box. A logo or other visual element will work best here if you don't want to take the time to match the size of the header-wrapper. You can resize the image you want to use with an image tool like Ifranview (http://www.irfanview.com/). The only way to accurately replace the header image used in the TicTac template is to edit the HTML code. We'll tinker with the code later in the tutorial.

[edit] Changing Blog Templates

Some templates are more suited for custom header images than others. Let's see the effects of changing with a different template. The best template for customization is currently the Minima template. It has no template images or other add-ons that can get in the way.

[edit] Time for Action! Picking a Customizable Blog Template

Let's make things easier on ourselves by picking a template that is easier to customize. One quick word of warning you will lose all your current page element widgets, unless you back up the current template first. You can then copy and paste them back into your new template.

  1. Go back to the Layout tab and click on the Pick a New Template menu item. We'll try a simpler template this time. The Minima template is very clean. There are no extra images on this one.
  2. Click on the Minima template image. A box will appear around the template image. The original version of Minima is chosen by default. Click the SAVE TEMPLATE button to finish switching templates. You can use the following screenshot as a guide while navigating the Pick New Template window:
  3. Now let's view the blog and see if a new template makes a difference. Well, it looks like the new template helped. It doesn't quite fit in the borders of the header. Georgia thinks reducing the image width will make it fit. Note - You may not experience the same results we did. Blogger is constantly updating it's code. If your header fits perfectly using the Minima template, you can skip the next steps.
  4. The header section of the Minima template is 660 pixels wide. Using an image that is 652 pixels wide should fit better. Let's try this once more. Upload the image named ffa_header.gif from the code folder. Your settings on the Configure Header window should be the same as those shown in the following screenshot.
  5. The Placement should be set to Instead of title and description. Click SAVE CHANGES and view the blog. You can see an example of how it would look in the next screenshot.
[edit] What Just Happened?

When we selected a different template that did not have links to external images, we gained more control over the look and feel of our blog.

"Looks like we just needed a simpler template to pull it off. I knew it could be done", says Georgia proudly as she hands us glasses of homemade raspberry lemonade.

You can keep the same template if you check the width of the header in your template code or resize the image to match the width. If you are in a situation where the template you are using has too many graphical elements and you would rather start with a clean template, use Minima.

"Can we do something about that text?" asked Georgia, squinting at the new template. "I want to use the same text that we had on the other template."

Luckily for us (and Georgia) the fonts used in the template can be changed from the Fonts and Colors section under the Layout tab.

[edit] Changing the Fonts and Colors

"I hope this is as easy as you said it's going to be," sighs Georgia, "getting the new header image to work was almost as painful as picking wild blackberries."

The good news is the Fonts and Colors section is very visual and easy to use. The bad news is "I knew it," Georgia grins, "what's the catch?"

the font choices are limited to six main web safe fonts. If you want to use other fonts, you'll have to specify them in the template code. We'll cover how to do that later in this tutorial.

[edit] Time for Action! Picking Colors with the Fonts and Colors Editor

The Fonts and Colors editor is easy to use once you get used to it. The template items whose color can be changed are listed in the menu box on the left side of the screen. Three different palettes help you keep track of the current color palette of your blog. Let's try changing colors to get comfortable with the editor.

  1. Log in to Blogger and select Layout from the Dashboard. Choose the Fonts and Colors tab under the Layout tab. Once you've clicked on the Fonts and Colors menu item, you will see a list box on the left and a color picker on the right, as shown in the following screenshot.
  2. Click on the Page Background Color item in the list menu. You will see the current color is in a small square just to the left of the item name. Pick a different color by selecting a color chip from one of the three menus: Colors from your blog, Colors that match your blog, or More Colors.
  3. When you are done with the customization of colors, click the SAVE CHANGES button, clear your browser's cache, and view your blog.
[edit] What Just Happened?

When you highlighted a listed item in the left menu, and then selected a different color choice from one of the three color menus, the color values also changed within the template code. Each item listed in the left menu has its own variable defined in a tag at the top of the template. We will edit those variable tags next and add our own new tags later in this tutorial.

[edit] Choosing High Contrast Text Colors

Soft, blended colors for text may look great in glossy magazine ads, but they don't work well for blogs. We'll pick a darker text color that will be easier for visitors to read. You can pick a color by selecting the color boxes, but that limits you to what Blogger shows you. Did you notice the Edit color hex code box to the right of the color blocks? It shows an alphanumeric code for any color you pick. It specifies a specific color from the RGB color palette using a pound (#) symbol followed by a combination of six alphanumeric characters. The RGB color palette is represented by two characters for red, two for green, and two for blue. This system of characters is known as the hexadecimal color code or hex code for short.

[edit] Time for Action! Changing the Text Color Using Hexadecimal Code

When deciding on a template for this book, I chose high contrast colors that would show up well in print for all the text. We're going to choose high contrast colors to make reading the blog easier on our visitor's eyes.

  1. Highlight the Text Color item in the list box. The hex code field on the right now displays the hexadecimal code of the soft dark grey color, #333333.
  2. A darker color is what we need. Highlight the characters in the Edit color hex code text field and Type #000000, and then hit the Enter key on your keyboard. The overall text color for the blog has now been changed to black. A preview of the change is displayed instantly, in the preview window below the editor.
  3. Repeat the steps for any other text colors you want to change. Georgia chooses a red (#cc0000) for the sidebar title and text color, and a green (#73a92b) that matches the header for the links. She changes the Visited Link color to a dark green (#1B703A) so that readers can quickly see the links they have already followed.
  4. Click the SAVE CHANGES button to finalize the edits. Clear your browser's cache and then view your blog.
[edit] What Just Happened?

When you entered a new color for the Text Color in hexadecimal format, Blogger processed the hexadecimal code and displayed the new color choice in the list menu, the Colors from your blog menu, and within the blog preview pane. Once the color choices were saved, the Text Color variable tag in the template was set to a new value.

The contrast is much better now. If readers want to print a recipe or other interesting posts, the text will show up better on paper, too.


[edit] Matching the Font to the Blog

When she was done playing with the font colors in the editor, Georgia commented, "changing the colors wasn't hard at all; it was actually fun. I liked seeing the colors change in the preview window below the editor."

You can preview the font changes too, scroll down the list menu and we'll show you.

[edit] Time for Action! Changing Template Fonts with the Fonts and Colors Editor

It may be a little confusing having the colors and fonts of the blog on the same list, but that's where they are. Scroll down the combo box to find the areas of the blog where the font can be changed. Let's make a few changes to the current font settings to get a feel of how it works.

  1. Start by highlighting the font item in the list menu on the left. The Text Font item is first. So, we'll go ahead and select it.
  2. The editor will now display the different font choices under the Font Family heading. The default text for this template is Georgia. Verdana has a more modern, casual look. Select the radio button next to Verdana by clicking on it.
  3. The visual look of the blog is improving. The content text could be easier to read. Choosing a bold Font Style, and a larger text size will change the look even further. Go back to the Fonts and Colors section under the Layout tab to continue editing the fonts. You can see a preview of the changes while you work, as shown in the following screenshot:
  4. We continue to change each item, using Verdana for larger blocks of text and Georgia for the Sidebar Title, Blog Description, and Post Footer. We also add bold styling to the Sidebar Title so that it has more weight and looks like a proper heading.
  5. With our work done, we save our changes, clear the browser's cache, and view the blog. We may want to remove the Bold (Font Style) from the Text Font later, but for now, let's keep it. We can always change it back later. The results of our changes can be seen in the following screenshot:
[edit] What Just Happened?

When we edited the fonts using the Fonts and Colors editor, Blogger saved our changes in the site code. It also updated the values of the variables in the template code. Each item listed in the left side list menu of the editor, both fonts and colors, has a corresponding variable tag in the template.

"It's amazing," exclaims Georgia as she views the changed blog, "it looks so different and we didn't have to mess around with the template code at all!"

We'll be able to do even more, once we begin editing the template. The Edit HTML section is next on the Layout tab, but before we tackle it, we need to finalize the layout and design.

[edit] Choosing an Effective Layout

We need to choose an effective layout for our blog. Georgia has already told us that she prefers the sidebar on the right. We will also need to add a bottom navigation section with links to her main site and room for social bookmarks. Blogs have a very specific layout structure. They have a top header section for ads, logos, and descriptive text, a sidebar on the left or right (and sometimes on both sides), and a main content area with posts commonly organized by date. Four layouts are commonly used with blogs.

[edit] The Usual Suspects

The good news is that there are already several main layouts used for most blogs. We will make sketches of several different ones and pick the ones that will be most useful for us. A layout is like a simple blueprint for a house. It shows the different sections of the template and where they are located in relation to each other. We want a layout to contain:

  • The individual blog posts.
  • A sidebar with plenty of width for most widgets. We'll add a second sidebar when we create a three-column template. Additional sidebars give you greater flexibility with your layout. The Blog posts column can be in the middle, between the sidebars, like a sandwich. Experienced bloggers prefer placing the Blog posts element on the left with both sidebars at the right, for maximum search engine optimization benefits.
  • A header container for the logo, taglines, and any other buttons or top elements.
  • A navigation section for links to the archives and other parts of the blog as well as the corporate site. This will either be directly under the header section or on the sidebar.
  • A footer containing alternate navigation, any legal news, links, or other items.
[edit] Time for Action! Making Sample Sketches

We can visualize our choices better by making several sample sketches. You can use any tool you like, including a paper napkin, but tools like Photoshop and Irfanview help with measuring pixels and getting exact color matches.

  1. Open up Photoshop or any other image editing tool, or use Post-its, note cards, or a piece of copy paper.
  2. Start by drawing four boxes. They can be exactly to scale (1024 pixels in width by 768 pixels in height) or roughly drawn. We're just using them as guides and they don't have to be exact.
  3. Draw a horizontal line about 1/4th of the way down the four boxes. It should take up no more than 200 pixels. You can use the duplicate layer trick in Photoshop to use the same line for all the boxes. This will contain the header.
  4. Now draw a vertical line about 1/3 of the way in on the left side of Box A and on the right side of Box B. Draw a vertical line on the left and then the right side of Box C. Place a second horizontal line about 200 pixels in height under the header of Box D, just to be different.
  5. Footer sections are the final area we will add to our layouts. Draw a rectangle, about 30 pixels in height at the bottom of all the boxes. Footers should be tall enough to display at least one line of text or row of buttons.
[edit] What Just Happened?

We now have four boxes. Any of these would work fine for a blog. Which one will display the Fruit for All blog best? We show our sketches to Georgia to get her feedback.

After looking at all the four sketches, she admits, "I would like the sidebar to be on the right like the default blog. The layout of Box B looks more like a magazine."

The right sidebar stands out from typical website layouts that use a left sidebar. It will also place more emphasis on the blog posts. Now that we are sure about our layout, it's time to start editing the template code.

[edit] Pruning the Template Code

We will be editing the template code in this section. Printing a copy of the code is a good way to examine the existing code and gives you a reference to prop up next to your computer as you work. Log into Blogger and click on the Layout link in the Dashboard to open the Page Elements sub tab of the Layout tab. Click on the Edit HTML sub tab of the Layout tab. The template code goes on for pages and pages. Print out a copy of the code and see for yourself. Don't panic, we will attack the code, one section at a time. We will start with the most common content block. This "inside out" method is a common technique used when designing sites.

Note - Backup your original template before you make any changes. Click the Download Full Template link on the Edit HTML sub tab of the Layout tab to backup the template. Save the original in a backup folder. This way, you can always revert back to the original.

[edit] Designing the Visual Look

Remember when we made all those changes to the template without code? We changed the fonts, colors, the look of the header, and even the default template. We're going to combine those changes with Georgia's images to create a stylish custom template.

Here is our goal: a sharper, sweeter template for our blog:

It looks very different from the basic Minima template, doesn't it? We will be adding background images, gradients, custom icons, and changing the position of different elements of the template.

Note - You can download the entire sample template and image package in the code download section of the book's companion website: http://bloggerbeefedup.blogspot.com/.

[edit] Preparing to Style the Post Content Block

The blog post is the most basic content element. The decisions we make here will flow outward to influence the design of the rest of the blog.

  1. Go to the Layout | Edit HTML link. The entire current template code can be downloaded by clicking the Download Full Template link.
  2. You will be prompted to open or save a copy of the xml file onto the hard drive of your computer. Save it to a backup folder. Note - Use comments /**/ to make notes to yourself as you make changes. This is a great way to jog your memory later, months down the road. Click the / forward slash key and then enter the asterix symbol * twice. Type the comment between the asterix symbols and then finish the comment block with another forward slash.
  3. Open the file up using a text editor or an html editor such as HTML Kit (http://www.htmlkit.com/), Arachnophilia (http://www.arachnoid.com/arachnophilia/), or Dreamweaver (http://www.adobe.com). Any html editor that has a line count feature will help you, since the blogger template files are several pages in length.
  4. You can also edit the template 'in situ' within the template code box and use the Preview button to see the changes. If there is an error, you can immediately correct the code and click Preview again. If there is no error on preview, you can save the changes. Off-site template editing carries the risk of having too many errors to locate and correct, which can be a daunting task, even for a professional.

We will start working on the sections of the template that affect the blog posts area of the blog.

[edit] Adding a Custom Variable Tag to the Template

First we will add a variable tag to control the color of the date in the post. Variable tags are always placed at the top of the template code document. The date color needs to be individually controlled, since red is too distracting. We will change it to dark gray.

[edit] Time for Action! Darken the Post Date

Variable tags give you greater flexibility while customizing your template and editing it in the future. The date post is a standard part of all blog posts. Making a variable to change the color will save you from editing it directly within the template in the future.

  1. Type the following into the top section of the code: 
      <!-- change date color to a dark gray -->
  <Variable name="datecolor" description="Date Header Color" type="color" default="#ccc" value="#333333">
  2. Now that we have declared a new variable to control the color of the date, we need to add it to the CSS class h2.date-header. It can be found at the top of the Posts section: 
     <code> /* Posts */</code>
 <code> h2.date-header</code>
 <code> {</code>
 <code> margin:1.5em 0 0.5em;</code>
 <code> }</code>
  3. Add a line for the color with our new datecolor variable directly below the opening curly brace: 
      h2.date-header
  {
 ''' color:$datecolor;'''
  margin:1.5em 0 0.5em;
  }
  4. Click the SAVE CHANGES button. The date color on the blog has changed from a dark red to grey. Readers will still be able to see the date, but it will no longer clash or distract from the title of the post.
  5. From now on you can change the date color on the Fonts and Colors page.
[edit] What Just Happened?

When we added a new variable tag named datecolor, we made it possible to make changes to the color of the date on the blog using the Fonts and Colors editor in the future. When we set the value of the datecolor variable tag to #333333, we also created a default value of #333. This was a shorthand version of the same color. The default attribute will enable you to reset the variable to the original value, using the Fonts and Colors editor.

Note - You may have noticed that we didn't create a variable to change the font of the date. You can give that a try on your own, now that you know how to create your own variable tags.

[edit] Displaying an Image Next to the Title of Each Post

Now that we've warmed up by adding our own custom variable tag, we are ready to start adding images to our template. Let's add an image to the post title. This will cause an image to display next to the title of each blog post.

[edit] Time for Action! Adding an Image to the Post Title

Now let's add a decorative image to the Post Title class, to draw reader's eyes to the post. We'll also change the title color to dark green.

  1. Click the Layout link on the Blogger Dashboard and then the Edit HTML link under the Layout tab. Scroll down the code window under the Edit Template section of the Edit HTML screen until you see this code block: 
      .post h3
  {
  margin:.25em 0 0;
  padding:0 0 0 3px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  }

    2. Increase the padding on the left side of the text from 3px to 20px: <pre? 

     .post h3
 {
 margin:.25em 0 0;
 padding:0 0 0 20px;
 font-size:140%;
 font-weight:normal;
 line-height:1.4em;
 color:$titlecolor;
 }

    </pre>

  2. Time to add the background image that will sit to the left of the post title. Insert the following code just below the color, as shown: 
      color:$titlecolor;
  background:url(http://www.leesjordan.net/images/test_templates/ green_pear.gif) no-repeat 0 0;
  3. . Finally, we change the hexadecimal color code in the titlecolor variable tag: 
      <Variable name="titlecolor"
  description="Post Title Color"
  type="color"
  default="#c60"

value="#3f7e1f">
  4. Click the SAVE CHANGES button. The title of the posts now has a little image pizzazz and a color that better matches the logo as we can see in the following close up screenshot:
[edit] What Just Happened?

Changing the padding of the .post h3 class made room for the background image to the left of the post title text. When we added the background image to the .post h3 class, we instructed the template to display the image to the left of every post title. Since we were already in the template code, we went ahead and changed the color of the titlecolor variable to match the new background image.

Note - If you add new images to your template, you will need to find a place to store them online. There are many online image hosting services such as Picasa (http://picasa.google.com/), Flickr (http://www.flickr.com), and Photobucket (http://www.photobucket.com), or you can upload the images to your own web host if you have one. Create an account at any of the sites above, upload your images, and copy down their links. They should look similar to this sample link: http://....... which should look like this sample link: (http://www.leesjordan.net/images/test_templates/post_background6.gif).

[edit] Adding Background Images to Post Text Blocks

We are almost done styling the post section. Next, we need to change the text of the posts from bold back to a normal font weight. We will then see how a background image looks behind the posts.

[edit] Time for Action! Editing Post Text Styles

Adding a background image will give each post a little extra flair and visually set the posts apart from the rest of the blog. You can use the steps below and replace the image with any other image you want to use.

  1. Scroll to the variable tag section of the template code until you see the bodyfont variable. Change the value from normal bold to normal normal: 
      <Variable name="bodyfont" description="Text Font"

 type="font" default="normal normal 100% Georgia, Serif" value="normal normal109% Verdana, sans-serif">
  2. We are going to place a subtle decoration in the background of the post text. Add the text in bold to the .post p class: 
      .post p
  {
  margin:0 0 .75em;
  line-height:1.6em;

background:url(http://www.leesjordan.net/images/test_templates /post_background6.gif) no-repeat 0 0;
  }
  3. Save your changes, clear your browser's cache, and take a look at the blog now:
[edit] What Just Happened?

When we added the background image to the .post p class, we instructed the template to display the image underneath the paragraph text of each post. The post section now has a custom look. The background image behind the post may be difficult to see in print. It is meant to subtly bring attention to the post without making the text difficult to read. So, it is ok if it is very faint.

Now that we have styled the post section of the Blogger template, we can build on what we have learned and work outwards to the rest of the template. Blogger templates use a combination of XML tags, XHTML tags, and CSS styles. If you are not sure what a color will look like, you can use an online color tool, or any image editing program. Most HTML editors also have color pickers.

Note - There are many online sites where you can create color swatches for your template. Here are a few of my favorites:

Color Hunter lets you upload an image and uses it to build a swatch of colors: http://www.colorhunter.com/

Transparent color generator: http://apps.everamber.com/alpha/

VisiBone groups colors by shade:

http://www.visibone.com/colorlab/

[edit] Spicing up the Sidebar

The sidebar of the template needs a background image and a few text tweaks. When we are done, it will have a more attractive and polished appearance.

[edit] Time for Action! Editing the Sidebar Styles

We are going to edit the sidebar class in the CSS portion of the template. As always, backup your current template before you start modifying the template.

  1. Scroll down to the sidebar section in the template code. We are going to add a background property to the .sidebar class. Add the text shown in bold below into the template code: 
      .sidebar
  {
  float:right;
  font-size:85%;
  line-height:1.5em;
  color:$sidebartextcolor;
 ''' background:url(http://www.leesjordan.net/images/test_templates/ sidebar_bg.gif) no-repeat 0 0;'''
  word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
  overflow:hidden;/* fix for long non-text content breaking IE sidebar float */
  }
  2. Increase the size of the sidebar title font from 78% to 82%. 
     <Variable name="headerfont" description="Sidebar Title Font"

type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 82% 
 Georgia, Times, serif">
  3. We almost forgot to remove the dotted border underlining each sidebar element. The .sidebar.widget, .main.widget class controls the margin, padding, and borders around widgets or page elements contained in the sidebar and the main area of the template. Set the border-bottom of the class to none as shown in the example: 
      .sidebar.widget, .main.widget
  {

border-bottom:none;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
  }
  4. Save the changes to the template, clear your browser's cache, and view the blog. It should now display images underneath the content of the sidebar as seen in the following screenshot:
[edit] What Just Happened?

Adding barely two lines of code has spiced up the sidebar. A copy of the background image can be found in the code folder. The background image defines the space around the sidebar and anchors it visually to the rest of the template.

Georgia says, "The background image on the right is made up of fruit images from the logo. Reusing these images makes it look balanced."

Speaking of balance, we also need to add a footer section to our template.

[edit] Styling the Footer Section

The footer of the blog can contain site links, social bookmarks, and other information like BoingBoing.net does. It can also contain traditional links to a privacy policy, contact information, and copyright information. The height of the footer should be equal to one row of text or small images. When readers scroll down the page of the blog, they will be able to follow any links to other sites that we have or recommend the blog on social networking sites without having to scroll back up to the top of the page.

[edit] Time for Action! Editing the Footer Styles

Editing the footer styles will involve pasting links into a HTML/JavaScript page element. This is a good technique for adding typical footer items like privacy notices and links to your main site or other sites associated with your blog.

  1. Log in to Blogger and click on the Layout link under the Dashboard. The Page Elements sub tab under the Layout tab will then be displayed by default. The Minima template has a bottom section reserved for footer content. Click the Add a Page Element link at the bottom of the layout box.
  2. Click the Add to Blog link under the HTML/JavaScript page element to select it on the Choose a New Page Element screen. The Configure HTML/JavaScript form will open in a pop-up window.
  3. Leave the Title field blank on the form. Click in the Content field of the form, leaving it set to the default editor view.
  4. Add the links to Fruit for All's main blog, for Packt Publishing, and bookmark links for Digg and Reddit. We can always add more links later: 
      <a href="http://packtpub.com/">Packt Publishing</a>
  <a href="http://fruitforall.leesjordan.net/">Fruit For All</a>
  <a href="http://www.digg.com/"><img alt="Digg!" width="80" src="http://digg.com/img/badges/80x15-digg-badge- 
 2.gif" height="15"/></a>
 <script>reddit_url="fruitforalltest.blogspot.com"</script>
 <script language="javascript" src="http://reddit.com/button.js?t=1"></script>
  5. Remember to leave space between the links for better readability. Click the SAVE CHANGES button, clear the browser cache, and then view the blog. The HTML/JavaScript page element will now exist at the bottom of the Page Element layout area.
[edit] What Just Happened?

When we added an HTML/JavaScript page element to the footer section of the layout, our own custom sets of links were added. We used this page element, instead of a link list, to control the display of the links in a horizontal row.

The set of footer links are now displayed at the bottom of the blog, as seen in the following screenshot:

[edit] Styling the Header Section of the Template

Georgia is worried that we have forgotten about the header section of the template, "It doesn't stretch across the screen like I wanted it to," she says, moving the palms of her hands together and far apart to demonstrate, "what can we do about that?"

The header section of the template needs to be edited to make it look like we want it to. We will remove the border around the header area and then add a new and wider header image.

[edit] Time for Action! Editing the Header Styles

Let's continue editing the template. If you've come straight to this example you'll need to log in to Blogger, click the Layout link of your blog under the Dashboard, then click on the Edit HTML sub-tab under the Layout tab. Scroll down the template code until you see the #header-wrapper div tag.

  1. Increase the width of the #header-wrapper to 680 pixels, set the margin to zero and the border to none: 
      #header-wrapper
  {

''' width:680px;'''
 ''' margin:0; '''
 ''' border:none;'''
  }
  2. Now that the outer box of the header container is styled, we can modify the #header div, the box that contains the image. Set the margin property as shown below, the border to none and the background to a medium green (#82d645), to pad the header image: 
      #header
  {
 ''' margin:0 0 0 2px;'''
 ''' border:none;'''
  text-align:center;
  color:$pagetitlecolor;

'''background:#82d645;'''
  }
  3. Save the changes to the template, clear your browser cache, and view the blog to see the results.
[edit] What Just Happened?

The header is now properly aligned in the template. The following screenshot shows the centered header image with the old Minima borders removed. The wider header section frames the top of the blog:

"The template is still missing something," Georgia tells us, "I'm not sure what, but the blog looks too flat, and the sidebar doesn't look separated from the posts."

She's right. The blog could use some additional graphical tweaks and improved positioning. We are ready to work on the larger container styles that control the sidebar, main content, and overall blog structure.

[edit] Adding Polish to the Template with Style(s)

The settings for the background of the blog, including the invisible box around it, the content area, and the other page elements, are contained in the Outer-Wrapper section of the template code. We are going to manipulate the containers in that section of the template to add more visual interest to the blog.

[edit] Creating Visual Interest with Backgrounds and Borders

Adding a soft gradient and border to the background of the entire blog will give it a visual punch. The Outer-Wrapper section of the template contains positioning blocks for the main content areas of the blog. This includes the divs for the blog post area, sidebar, and footer. This is where we will place a background image for the whole blog.

We first have some unfinished business with the sidebar-wrapper div of the template. A border on the left side of the sidebar will separate it visually from the main content area. We will also go ahead and add positioning elements. After that, we will add the background image to the Outer-wrapper.

[edit] Time for Action! Adding Backgrounds and Borders

We're going to continue editing the CSS styles within the template code of the blog. Make sure you backup your template before continuing. When we are done with the steps below, the entire blog will have a gradient background and a border separating the sidebar from the blog posts area.

  1. Open up the template code and find the Outer-Wrapper section. Add a light yellow border to the left side of the sidebar-wrapper div as shown: 
      #sidebar-wrapper
  {
  width:240px;
  padding-left:10px;
 ''' border-left:#ffffcc thin solid;'''
  float:left;
  word-wrap:break-word; /* fix for long text breaking sidebar float in IE */
  overflow:hidden; /* fix for long non-text content breaking IE sidebar float */
  }
  2. It's time to add a gradient background image to the blog. Increase the width of the outer-wrapper div to 680. Then set the margin to 0 auto 0. Remove the padding property. The background image will repeat horizontally down the page. Add it just below the font property. 
      #outer-wrapper
  {

'''width:680px;'''
 ''' margin:0 auto 0;'''
  text-align:left;
  font:$bodyfont;
 ''' background:url(http://www.leesjordan.net/images/test_templates/ blog_bg.gif)repeat-y;'''
  }
  3. Now that we have it styled, we need to format the main-wrapper div so that the posts will line up properly in the layout. Add a padding-left property element and set it to 5px to move the post over towards the right: 
      #main-wrapper
  {
  width:410px;
 ''' padding-left:5px;'''
  float:left;
  word-wrap:break-word; overflow:hidden;
  }
  4. The background color for the entire template is controlled by the bgcolor variable tag. Change it to a light green color (hexadecimal code #d1edd): 
      <Variable name="bgcolor" description="Page Background Color"
 type="color" default="#fff" value="#d1edbb">
[edit] What Just Happened?

The template has been customized for greater visual impact and usability. We changed fonts and colors, working from the inner content styles to the larger div blocks controlling the whole template.

Two-column templates are easy to modify in Blogger. The real challenge is to create a three-column template where you can use multiple sidebars. To keep things simple, we will alter a basic Minima template. You can add the other background images after adjusting the padding and margins.

[edit] Creating a Three-column Template

We will alter the CSS styles of the template to control the positioning of the template sections. New div tags will then be created and placed to give us a location to add page elements.

The newest version of Blogger templates are carefully formatted with closing tags for all tag elements and strict use of HTML tags; a human way of saying they are processed as well formed XML.

Have you been struggling to change your default two-column blog template to a more flexible three-column one? You can do it in 15 minutes or less with a little math and some copy and paste skills. Back up your current template before you begin making any changes. If you are already using Minima, you're in luck. It is the easiest Blogger template to customize. We're focusing on converting more recent Blogger templates, sometimes referred to as Blogger Beta templates.

[edit] Preparing to Modify Your Current Template

Making room for an additional sidebar is going to require an increase in the width of the #Outer‑wrapper and the #Header-wrapper div styles. We'll use a formula, since the width of the wrapper styles in your blog might not match the width of my blog.

Find your ideal width using the following formula:

First find the extra padding by subtracting the main-wrapper and sidebar-wrapper width from your outer-wrapper width: 

extra padding = outer-wrapper width - (main-wrapper width + sidebar- wrapper width)

A template with default Minima widths would look like this, when applying the formula: 

extra padding = 660 - (410 + 220)
extra padding = 30

Template width formula: 

outer-wrapper= main-wrapper width + (sidebar width x 2) + extra padding

The math for a default Minima blog template width formula should look like this: 

outer-wrapper = 410 + (220 x 2) + 30
outer-wrapper = 860

Now we know the overall width of the template and can apply it.

[edit] Time for Action! Building a Three-column Template

We're going to add a second sidebar by copying the current one, pasting the copy after it, and then making adjustments to the new sidebar style. We will then make changes to the tags within the template.

  1. Log in to Blogger and click the Layout link under your blog Dashboard. Select the Edit HTML sub tab under the Layout tab. Scroll down the template to find the styles #Header‑wrapper, #Outer-wrapper, and any other styles with the same width and replace it with our new outer-wrapper width.
  2. Copy the current sidebar-wrapper style set and paste it below the closing bracket of the sidebar-wrapper tag. Rename the second sidebar-wrapper tag to sidebartwo‑wrapper. The two sets of styles should now look like the ones shown below: 
      #sidebar-wrapper
  {
  width:220px;

 float:$endSide;
  padding-left:3px;
  word-wrap:break-word; /* fix for long text breaking sidebar float in IE */
  overflow:hidden; /* fix for long non-text content breaking IE sidebar float */
  }
  #sidebartwo-wrapper {
  width:220px;
  float:$startSide;
  padding-right:3px;
  word-wrap:break-word; /* fix for long text breaking sidebar float in IE */

overflow:hidden; /* fix for long non-text content breaking IE sidebar float */
 }
  3. It's time to add a new sidebar div tag to the XML tag portion of the template. Add the new tag directly after the closing div tag for the crosscol-wrapper div. Type the following set of tags just below that closing crosscol-wrapper div and before the main-wrapper div. 
      <div id='sidebartwo-wrapper'><b:section class='sidebar' id='sidebartwo' preferred="'yes'"></b:section></div>
  4. Your newly added tags should be placed like the tags shown below: 
      <div id='content-wrapper'>
  <div id='crosscol-wrapper' style=""><b:section class='crosscol' id='crosscol' showaddelement='no'/></b:section>
</div>
 ''' <div id='sidebartwo-wrapper'><b:section class='sidebar' id='sidebartwo' preferred='yes'></b:section></div>'''
  <div id='main-wrapper'></div>
  <! other tags including the sidebar-wrapper go here followed by the closing content-wrapper div>
  </div>
  5. Save the template. Now we can add widgets to the new sidebar. Click on the Page Elements sub tab under Layout, and drag individual page elements over to the new sidebar. An example of how the page elements screen should now appear is shown in the following screenshot.
  6. Click the SAVE button, clear your browser's cache, and view the results. You can see the new sidebar on the left, and the original sidebar on the right in the following screenshot of the blog:
[edit] What Just Happened?

When we edited the template styles and XML tags, we instructed Blogger to display an additional sidebar on the blog and to allow page elements to be added to it. Moving the existing page elements to the new sidebar by dragging and dropping them on the page elements screen helped control where they were displayed on the blog.

You can experiment by placing the sidebar in other locations such as, directly under the main‑content ending div tag or below the ending div tag of the original sidebar. Once you start experimenting, you will discover more ways to layout the page elements on your blog.

[edit] Tweaking Template Images

We need to change the width of the header image to match the new widths of the other styles in our template. The old header image was 650 pixels. We need to resize it to a width of 850 pixels. It is also possible to let Blogger resize the image for you. Remove the old image from the Configure Header screen, then upload it again with the shrink to fit checkbox selected.

[edit] Time for Action! Editing the Header Image Width

We're going to go through the process of editing an image within an image editing program, saving it for the web, and then uploading it to our blog.

  1. Open up Irfanview or your favorite image editing program. Skip ahead to the next step unless you are using Photoshop. If you are using Photoshop, click on image | mode | RGB to edit an image ending in .gif. If you are using an image with a format of .png or .jpg, you can go right for resizing the image.
  2. Next, open up the Resize feature (Ctrl + R in Irfanview). In Photoshop this can be done with the shortcut ctrl + alt + I. Uncheck the constrain proportions checkbox, click OK, and check out the results. Irfanview has a large number of options on its Resize/Resample Image screen. Select the Set new size radio option, uncheck the Preserve aspect ratio checkbox, and then type the new width. Click the OK button to save the changes. You can see a Resize/Resample Image screen within Irfanview in the following screenshot:
  3. Save the newly edited image as ffa_header_850.jpg by typing the s key on the keyboard to save in Irfanview, or by selecting File | save for web (ctrl + alt + shift + s) in Photoshop and specifying it as a .jpg file set at quality of 80 or less.
  4. While saving with Irfanview, it is important to select the correct file type from the Save as type: drop-down menu in the Save Picture As window. The default file type is bitmap (.bmp). Once you choose the JPG JPG/JPEG format, a dialog box pops up allowing you to choose how much you want to compress the image and whether to keep the image data. Click on Save after making your selections on the Save Picture As window. An example is shown in the following screenshot:
  5. Now, it is time to replace the old header image with the one we just modified. Log in to Blogger and click the Layout link under the Dashboard. Click the Edit link in the Header page element. Remove the old header image and upload the new one by selecting the radio option next to From your computer: and then click on the Browse button to locate the file. If you are using a file from a website, select the radio option next to From the web, and type the full URL to the image location in the text field.
  6. Click the Save Changes button, clear your browser's cache, and view the template.
[edit] What Just Happened?

When you removed the old image and uploaded a new one, the image was floated in the header of the template. The resize function within the default Blogger templates is not always predictable. When we went through the trouble of resizing the image manually, we increased the effectiveness of the image uploading tool and optimized the image for the web. The image uploading tool pulled the current width of the template's #header-wrapper div style and automatically attempted to size the image to the width set there. Changing the padding and margins of the template would allow for additional control over alignment of the image within the header.

If you think the image looks too stretched you may have to open up the original file you used while creating your header, increase the canvas size of the image, and play with modifying the background. Most header images look fine with a little distortion. Too much space around the image may be due to extra margins or padding. Go to the Edit HTML sub tab and scroll down to the #outer-wrapper and #header-wrapper styles. Play with the margin and padding attributes of those styles until you are satisfied with the results.

[edit] Summary

Georgia now has a custom Blogger template for her blog that matches her company's logo, colors, and personality.

  • We began by editing the default Blogger template.
  • We chose a layout to lay the foundation for the new template.
  • The page elements of the blog were then styled using CSS and Blogger tags.
  • Custom images were added to the template.
  • All the parts were combined together for a complete look.
  • A third column was added to the template to make room for additional page elements.

[edit] Source

The source of this content is Chapter 2: Customize and Create Templates of Blogger:Beyond the Basics by Lee Jordan (Packt Publishing, 2008).

Retrieved from "http://www.themeswiki.com/Customizing_and_Creating_Blogger_Templates"