SmoothGallery offers many different styles of gallery, but unfortunately not all options function properly in Blogger powered blogs.

So in this tutorial I will explain two different styles of SmoothGallery slide shows which I know can be used in Blogger blogs and have tested in different browsers:

• A timed slide show (similar to the one featured in the sidebar)
• A manual slide show, where your visitors can skip through each slide using arrow buttons

The initial installation for these slide shows is essentially the same; you can configure the different options for display after installation as I shall explain later in this tutorial.

Requirements (read this first!)

You need to ensure you have access to a hosting account where you may upload images, JavaScript and CSS files. Most free file hosting services allow you to upload these file types, including Google Pages and the hosts listed on this page.

You will also need several images which are all exactly the same size. For the purpose of this tutorial I would recommend these images to be 200x100 pixels in size which would fit neatly in most Blogger sidebars. If you prefer to use images of different dimensions, you will need to change the size of the gallery in your style section, as I shall explain later in this tutorial.

If you are able to meet these requirements, read on to see how easy it is to install your own SmoothGallery slide show!

How to install your SmoothGallery Slide show

First of all, you need to download the files needed to make the slide show function. For your convenience, I have included the files required to run this in Blogger blogs in a zip file which you can download below.

Download Blogger_SmoothGallery.zip

When you have downloaded these files, retain the same directory structure and upload these to your file host.

Next, go to Layout>Edit HTML in your Blogger dashboard and search for the closing </head> tag. Immediately before this line, paste the following section of code (substituting "your-file-host" for the URL where your Blogger SmoothGallery files are hosted:

Then search for the closing </b:skin> tag on your template. Immediately before this line, add the following section of code:

#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}

Adding your slide show to your blog sidebar

In your blog's HTML code, find the DIV where your sidebar wrapper begins. The code will look something like this:

<div id='sidebar-wrapper'>

Immedietly beneath this line, paste the following section of code:

<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>

Adding your images and links to the gallery

For the next part of the installation, you will need to use your images and the relevant links to your popular/featured posts.

Remember that your images should all be the same size!

Upload all of the images you would like to use to your file host and note down the URLs.

This last step is a little bit tricky, so be sure to double check the code you are replacing and ensure you don't accidentally delete any tags!

1. Copy all of the code below and paste into a simple text editor (eg: Notepad or Notepad ++).
2. Replace all image URLs with those of your own images.
3. Replace all link URLs with the links to your posts.
4. Replace the titles (between the <h3> and </h3> tags) with the titles of your posts.
5. Replace the descriptions (between the <h3> and <h3> tags) with a brief description of your posts, preferably a short one-liner.

Once you have made all these edits (and checked that you haven't accidentally deleted any tags!), copy this entire modified section of code to your clipboard and paste this below the final </script> tag which you recently added in your sidebar.

Now, preview your template. If all has gone well, you should see your slide show appear in the sidebar. This initial installation will add a timed slide show where your images will change every three seconds.

Once you are sure you have installed this slide show correctly, you can proceed to save your template.

Change the "timed" slide show to a manual one

If you would prefer your readers to choose when the next slide will come into effect, you need only make two small changes to the script for your SmoothGallery installation.

Find these lines in your template code:

timed: true,
showArrows: false,

timed: false,
showArrows: true,

Now when you preview your template, you will see semi-transparent arrows in your slide show which become opaque when your mouse hovers over them. Clicking on these arrows will take you to the next slide in the show.

Changing the dimensions of the slide show

If you would prefer your slide show to be a different size than 200x100 pixels, you will need to change all of the images you use to this same size.

Then find this section of code in the <b:skin> section of your blog template:

#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}

Credits

The original SmoothGallery scripts was developed by JonDesign and Mootools. Both the original scripts and those featured here are provided under the GNU General Public license.

Final Thoughts

Here at Blogger Buster, I use SmoothGallery to create a slide show of featured posts in my sidebar, but you could just as easily use this to create a stylish gallery of your photos with captions, or an animation of products in your blog.

I hope you have found this tutorial to be useful to you (despite being a little complicated!) and would love to see how you use this in your own Blogger powered blogs.

What is Spiffy Corners and How Does It Work?

Spiffy Corners is an online generator which creates CSS and HTML code to create anti-aliased rounded corners for your web/blog design. The code generated by Spiffy Corners does not require any images or JavaScript; using this method to create rounded corners for elements of your blogger template will not slow down page loading time at all, and can add a truly distinguished look for your theme.

The way this method works when added to your Blogger template is simple and yet truly effective! Spiffy Corners generates purely HTML tags which are styled using CSS; when you add the HTML section to your Blogger template, the area it creates appears to have rounded corners because of CSS styling.

The HTML tags are contained within a DIV element.As DIVs expand to the complete width of their containing element, it is important that this code is placed inside another element, or the color will seem to bleed across the whole template and spoil the effect.

How to use Spiffy Corners in your Blogger template

To explain how to use Spiffy Corners in your own Blogger template, I will use the default Minima template as an example. The same principles will apply no matter which template you are using, and I will outline possible differences in template code where appropriate.

Currently, my Minima template appears like this:

I would like to add a pale blue background with rounded corners to the main posts column. Note that the main background color of my blog is white.

First of all, I need to visit the Spiffy Corners website to generate the correct code and color scheme to create the rounded corners for my main section.

Here I need to choose the background and foreground colors to generate the correct code for my design.

As my background color is white (hex value #FFFFFF), I choose this for the background color. The hex value #C3CCEE is a nice shade of pale blue which I choose for the foreground color.

There are three degrees of "roundness" defined beneath the color choices: 3px, 5px and 9px, but unfortunately only the 5px radius currently works!

When I click on the 5px button, this displays an example of what my rounded corners will look like, and generates the correct code for me to use in my blog template:

How to use the code provided

This is generally considered the most problematic part of using Spiffy Corners (especially when used for Blogger template designs!).

I'm going to break this down into three sections of code which should help explain exactly where to copy and paste the code.

The CSS Section

The CSS code which I generated for my pale blue rounded boxes appears like this:

<style type="text/css">

.spiffy{display:block}

.spiffy *{

  display:block;

  height:1px;

  overflow:hidden;

  font-size:.01em;

  background:#C3CCEE}

[more code here]

.spiffy5{

  border-left:1px solid #d2d8f2;

  border-right:1px solid #d2d8f2}

.spiffyfg{

  background:#C3CCEE}

</style>

In this example, notice that I've highlighted the <style> tags in bold red. When using this code in your Blogger template, these style tags are unnecessary!

To add this style code to my template, I will copy the CSS code (excluding the unnecessary style tags) to my clipboard.

Then in a different tab/browser window, I need to go to Layout>Edit HTML in my Blogger dashboard without clicking the "expand widget templates" box. The style code I have copied needs to be pasted just before the closing <b:skin> tag in my template:

.spiffy{display:block}

.spiffy *{

  display:block;

  height:1px;

  overflow:hidden;

  font-size:.01em;

  background:#C3CCEE}

[more code here]

.spiffy5{

  border-left:1px solid #d2d8f2;

  border-right:1px solid #d2d8f2}

.spiffyfg{

  background:#C3CCEE}

]]></b:skin>

Now for the HTML code!

I now need to add the HTML code which creates the rounded corners to the main posts area of my blog template.

The HTML code generated by Spiffy Corners should clearly shows where to put my content (IE: the widget used to display my blog posts). But to work with this effectively, the code should be split into two sections, like this:

Splitting the HTML code into these two sections will make it much easier to work with!

To start with, I will copy "Part 1" of this code to my clipboard. I need to add this just after the opening DIV tag for the main posts section.

Next I will copy "Part 2" of the HTML code, and paste this just before the closing DIV tag for the main posts section.

Here is the code in my Blogger template which shows exactly where I should paste these different sections of code:

      <div id='main-wrapper'>; <!-- This is the opening DIV tag >

Paste Part 1 of the HTML Code Here!

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

Paste Part 2 of the HTML Code Here!

      </div> <!-- This is the closing DIV tag -->

Note: For different templates, the "main-wrapper" DIV may be named something different, such as "main-wrap" or even "main". The best way to find where exactly to paste your code is to look for this section in your blog template:

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

Now if all goes to plan, when previewing the template it should appear like this:

In this case, I can save my template for the rounded corners to appear around my main posts section.

But unfortunately, Blogger templates can be quite finicky when trying to use Spiffy corners... Which is where the troubleshooting comes into play!

Troubleshooting Spiffy Corners

The most common problem experienced when using Spiffy Corners in Blogger templates is a gap between the corners and the main content section:

This can be quite infuriating, especially as this doesn't occur in all template styles! But there is a solution: adding negative margin values to the top and bottom of the "spiffyfg" div. This draws the top and bottom margins inwards and reduces the gap.

The easiest way to draw the margins in is to add margin properties in the style section of your Blogger template.

In my example template, the style for "spiffyfg" is defined like this:

.spiffyfg{
  background:#C3CCEE;
  margin: -15px 0 -20px 0;}

This technique has worked for me each time there was a gap between the top and bottom sections of my rounded corners. I hope it will work for you too!

Using Spiffy Corners in Sidebar Sections

To round the corners of your sidebar(s), the same principles apply.

Here is the template code for the sidebar in my example template which shows where you will need to add the Spiffy Corners code:

      <div id='sidebar-wrapper'>

<!-- Paste Part 1 here --> 

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

</b:section>

<!-- Paste Part 2 here --> 

      </div>

In different templates, the <div id='sidebar'> may be named differently. If you are able to locate this section of code (or similar) you should paste the HTML code for your Spiffy Corners directly above and below as appropriate:

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<!-- widget codes here -->

</b:section>

Using different color schemes for different elements

One of the great things about Spiffy Corners is that you can create many different color schemes and name each one differently.

For example, if you wanted a red foreground for your main posts section, and a blue foreground for your sidebar, you can generate two different sets of code named "Red" and "Blue" respectively.

You can then add the CSS code for both "Red" and "Blue" to the <b:skin> section of your Blogger template, and paste the corresponding HTML code in the main and sidebar sections.

Here are some of my favorite examples of how borders and backgrounds can be used to separate content:

Mimbo Pro

Here colored backgrounds are put to great effect, with only fine borders beneath elements to add a sense of perspective.

After seeing these examples, you're probably wondering how you may achieve these same effects in your Blogger templates! So allow me to explain the basics of adding backgrounds and borders to your blog.

Different styles for borders

There are many ways to set the properties for borders in your blog template. In this tutorial, I will only explain the basic concepts to help you get started.

The easiest method of all to add a border to an element of your template is to add border properties for a particular blog element in the <b:skin> section of your Blogger template.

For example, the "#main-wrapper" section in most Blogger templates refers to the main posts section. To add a border to this section, we could add a line like this:

#main-wrapper {

border: 3px solid #000000;

[other properties here]

}

Using this example, you could also change the color, and width of the border, like this:

Borders don't have to be solid!

Instead of solid borders, you could add different properties to create unusual effects such as:

Different styles for backgrounds

Backgrounds can either be a flat color (defined as a hex value, such as #000000) or as an image (which is defined by the URL of the image).

Flat color backgrounds are easily created by adding the hex color value of the image as a property in the style section of your Blogger template. For example, if I wanted to add a yellow background color to my sidebar, I could add the line in red to the #sidebar-wrapper properties in my template code, like this:

#sidebar-wrapper {

background: #ffcc00;

[other style properties here]

}

To use an image as a background for a section of your template, you will need to host the background image online, and define the image by linking to the URL of the image, like this:

#sidebar-wrapper {

background: url(http://imagehost.com/yourimage.jpg);

[other style properties here]

}

You can also combine color and image background properties, like this:

#sidebar-wrapper {

background: #ffcc00 url(http://imagehost.com/yourimage.jpg) no-repeat top left;

[other style properties here]

}

You can read more about adding background images to your Blogger blog in this previous article.

Combining Border and Background Properties

This is where the border and background properties can become very stylish when applied to elements of your Blogger template.

By combining

Where could you add border and background styles in your Blogger template?

The main sections of your Blogger template would be the header, posts section, sidebar(s) and the footer section.

The style properties for these sections in your template would probably look like this:

• Header Section - #header-wrapper or #header-wrap
• Main Posts Section - #main-wrapper, #main-wrap or #main
• Sidebar(s) - #sidebar-wrapper, #sidebar-wrap, #sidebar or .sidebar
• Footer Section - #footer-wrapper, #footer-wrap or #footer

If you edit any of these sections in the <b:skin> section of your Blogger template, be sure to check if there are already any border or background properties defined. If there are, you will need to edit these sections, rather than add more new ones. Otherwise your edits will not appear the way you would like them to look!

Remember: you can always preview changes before saving your template! Then if you decide you don't like the changes you have made, you can click the "clear all edits" button and begin again.

Experiment with different styles!

Using properties for the borders and background properties of the different sections in your template, the style possibilities are endless! Try different color schemes, contrasting borders and backgrounds, and experiment with tiling images to see what would work well for your own blog design.

Here are some useful resources to help you use borders and background images in your own Blogger template designs:

• CSS Border Properties: Learn more about using borders
• Web Color Calculator: Find the hex values of your favorite colors
• Color Blend: Find the perfect color scheme for your blog design
• Stripe Generator: Create striped backgrounds
• Squidfingers: My favorite resource for tiling image backgrounds

I hope this post has helped you learn more about border and background properties. Please let me know how you have used these techniques in your own designs by leaving your comments below.

Explaining the method

In the image above, the links are part of a link-list. Each individual link in the list is displayed inline, and is wrapped in span tags. Furthermore, each link is coded with its own class.

There are three essential steps to make icons appear beside links in your blog:

1. Find icons (in GIF format) to suit your blog's theme, and upload these to an image hosting service.
2. Add the code for the links into an HTML/JavaScript widget in the blog layout.
3. Style these links with a background image by adding some code to the <b:skin> section of your blog template.

We need to add the links manually in an HTML/JavaScript widget for this to work. This is because we cannot edit each individual link in a regular link list widget, which is required to ensure each link features its own image.

This method is really not as complicated as it sounds!

Once you've tried this method for yourself, you'll get a much better understanding of how this method can work for you. To get started, try using the code and example images below to add images to a navigation area in your own blog template. Then afterwards, you can easily change the icons and style to suit the style of your own blog theme.

How to add icons beside your navigation links (example icons and code)

In this example, we will add icons to the three most popular navigation links used by bloggers: the "Home", "About" and "Contact" links.

The end result will look something like this in your template (though the font and colors may differ, depending on the styles already in place in your own template):

Step 1: Add the code for your links in an HTML/JavaScript widget

In the layouts section of your Blogger dashboard, choose to create a new HTML/JavaScript widget where you would like these navigation links to appear. This could be in your blog's sidebar, in a widget above the posts or within the header section if you prefer.

Then paste the following code into your new widget, substituting the links highlighted in red for the URLs of your home page and relevant post pages:

<div id="menu-items">
<ul>
<li><span class="home"><a href="http://your_blog_url.com">Home</a></span></li>
<li><span class="about"><a href="http://your_blogs_about_page.com">About</a></span></li>
<li><span class="contact">;<a href="http://your_blogs_contact_page.com">Contact</a></span></li></li>
</ul>
</div>

At first, these links will appear like a regular, unordered list with bullet points instead of the images we require. So now, we need to add some style to the template, which will make the links appear beside each other (inline display), feature relevant background images for each link, and be evenly spaced.

Adding the relevant code to your blog's template

For this part of the tutorial, you need to edit your blog's HTML code, so go to Layout>Edit HTML in your Blogger dashboard.

To add the style for your new navigation links, you can simply copy and paste the following code just before the closing <b:skin> tag on your blog template:

#menu-items ul li { display: inline; font-weight: bold; list-style-type: none; padding: 5px 5px 5px 0; margin: 0; }
#menu-items li span.home { background: url('http://bloggerbuster.com/images/bb_post/home.gif') no-repeat; padding: 0 0 0 20px; }
#menu-items li span.about { background: url('http://bloggerbuster.com/images/bb_post/about.gif') no-repeat; padding: 0 0 0 20px; }
#menu-items li span.contact { background: url('http://bloggerbuster.com/images/bb_post/contact.gif') no-repeat; padding: 0 0 0 20px; }

Now if you preview your blog, you will see your newly added navigation links now feature the icon images to their left. Once these modifications are complete, you can choose to save your template and enjoy the added style to your navigation links.

If you would prefer to host these icons on your own server, you can download the icons to your computer, upload them to a new location, and change the URI's for these to match their new location.

Here are links to the icon files (right click and choose "Save As..."

• home.gif
• about.gif
• contact.gif

If you would like to add more links and different images, the simplest method would be to duplicate the format of the style (using a different class), then add another link to the list, referring to the class you have just created.

Here is an example of what the style code may look like in your template:

#menu-items li span.anotherpage { background: url('http://yourimagehost.com/images/anothericon.gif') no-repeat; padding: 0 0 0 20px; }

The items highlighted in red are those which you would need to alter to suit your new links and icons.

Here is an example of how to call a new link (and associated icon), which could be added to the code in your HTML/JavaScript widget, just before the closing </ul> tag:

<li><span class="anotherpage"><a href="http://another_blog_page.com">New Page Title</a></span></li>

Important notes

The icons used in this example are have the dimensions 16x16px. To display larger icons, you may need to adjust the padding of the lost items, otherwise your images may appear cropped from above and below.

If you need to use icons which have transparency, you should ensure these images are presented in GIF format, rather than PNG. Internet Explorer 6 and below cannot display PNG transparencies correctly, so when viewed in these browsers, your icons would appear incorrectly.

Final thoughts

I hope this tutorial has provided you with the tools and knowledge to create your own styled navigation links, and expand on these examples to create links which are more suited to the style of your own blog.

Here are some resources for free icons if you're looking for alternatives to the ones used in this example:

• Iconlet: a search engine for free icons
• Silk Icons: a huge download featuring over 700 free 16x16px icons
• TwoTone icons: A collection of simple 16x16px icons in editable Photoshop and GIF format.

Feel free to leave your comments and suggestions below. I look forward to seeing how you have used this tutorial to add style to your own Blogger template designs.

In the previous installment of the Blogger Template Design Series, I explained an easy method of changing the layout of the header, enabling widget elements to be added. Search widgets are an excellent example of what could be included in a blog header, and in this post we will learn how search forms can be styled to suit your theme.

Search widgets are a type of form, constructed of a text box (the area where you type the search terms), a submit button, and some hidden elements which send information to the server about the search which is being performed.

If you're using a simple Blogger search widget, the code for your search widget will look something like this:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

By default, this simple search widget will appear like this in your template:

Using CSS to style the search widget

The easiest customizations can be achieved using only "inline CSS": this means that the search box and button can be styled within the code used for the search box.

For example, let's say we wanted the search box to have a pale blue background and a dark blue border. To achieve this, we simply add some style declarations to the "search-box" element, like this:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>
</form>

Note that in this example, I used "outset" rather than "solid" for the border property; this ensures the button looks raised rather than flat, and helps readers understand that it is a button which can be clicked.

Here is the resulting form:

You can experiment with different colors ans styles for your own search form to create a unique design.

Changing the visible text within the form

You could add some text within the search box as a guide for your readers (eg: Search this blog!).

This is achieved by adding a "value" to the search box, like this:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

<input id="search-btn" value="Search" type="submit"/>

<input id="search-btn" value="Go!" type="submit"/>

Using an image instead of a button

Using an image instead of a button isn't as complicated as you may think! For this, we simply need to change the input type from "Submit" to Image" and specify a URL for the image.

First of all, you will need to find the image you would like to use, and upload this to an external hosting account.

It is advisable to use a small image or icon for this (16x16px or slightly larger would be a perfect size for a search form). There are many free search icons available from Iconlet, or you could download an icon pack and choose a suitable image instead.

For this example, I'm going to use this icon from Iconlet:

To use this icon instead of the button for my search form, this is the code I will use:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/>
<input id="search-btn" value="Search" type="image" src="http://bloggerbuster.com/images/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;"/>
</form>

Notice that I have changed the type of the input in this form from "submit" to "image", and have added the URL of my image afterwards. The style declarations align the image against the search box, adding some space to the left, and ensuring this doesn't float above the search box.

This is what the image will look like in the search form:

When using your own image instead of the submit button, be sure to reference the correct URL of your image.

You may also need to adjust the margins slightly for images of a different size to the one used in this example.

Coming soon...

In the next installment of the Blogger Template Design series, we will learn how to style links in a navigation bar using both CSS and icons.

If you have enjoyed this tutorial, please subscribe to the feed to receive updates of new posts.

If you take a look at the Blogger Template Design blog now, you'll see the bare bones of a header beginning to take shape. The title and description for this blog are now featured in the left-hand section, while on the right you can find a search box, and a simple navigation bar:

The search box and navigation links are actually widgets which can be edited through the layouts section, rather than being built into the template itself. This is by far the easiest way to change elements of the header section, and it's really easy to install this in your own blog template!

How to add more elements to your header section

In this tutorial, there are only three essential steps needed to add these extra elements to your own blog:

1. Copy and paste a section of code in the header section of the template.
2. Add some styling code to the CSS portion of the template
And finally...

3. Add some widgets to your newly created widget sections!

Trust me when I tell you that this is a really easy hack. You can be up and running with a new, more interactive header in no time at all, and once the basic structure is in place, you can begin styling each section to best suit your needs.

Step by step instructions

1. Go to Template>Edit HTML in your Blogger dashboard, and find this section of code:

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Your blog title will appear here (Header)' type='Header'/>
   </b:section>
   </div>

   Highlight this entire section of code, and replace it with this instead:
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Blogger template Design Series (Header)' type='Header'/>
   </b:section>
   <div id='header-right'>
   <b:section class='header' id='header-right-top' showaddelement='yes'>
   </b:section>
   </div>
   <div id='header-right-bottom'>
   <b:section class='header' id='header-right-bottom-section' showaddelement='yes'>
   </b:section>
   </div>
   </div>
2. Next we need to change some of the style in the <b:skin> section. So find this entire section of code:

   #header-wrapper {
   border: 1px solid #000000;
   margin:0 auto 10px;
   border:1px solid $bordercolor;
   clear: both;
   word-wrap: break-word;
   overflow: hidden;
   }
   
   #header-inner {
   background-position: center;
   margin-left: auto;
   margin-right: auto;
   }
   
   #header {
   margin: 5px;
   border: 1px solid $bordercolor;
   text-align: center;
   color:$pagetitlecolor;
   }

   Note: the code which appears in your own template may have slightly different styling attributes to the example above. The important thing here is to replace the #header-wrapper, #header-inner and #header sections, and add some extra styling code.
   
   Once you have found this section, highlight it and replace it with the following section of code:
   #header-wrapper {
   width: 950px;
   border: 1px solid #000000;
   margin:0 auto 10px;
   border:1px solid $bordercolor;
   clear: both;
   word-wrap: break-word;
   overflow: hidden;
   }
   
   #header-inner {
   background-position: center;
   margin-left: auto;
   margin-right: auto;
   }
   
   #header {
   width: 500px;
   float: left;
   margin: 5px;
   border: 1px solid $bordercolor;
   text-align: center;
   color:$pagetitlecolor;
   }
   
   #header-right {
   width: 400px;
   float: right;
   border: 1px solid $bordercolor;
   color: $pagetitlecolor;
   margin: 5px;
   }
   #header-right-top {
   padding: 0 5px 10px;
   }
   
   #header-right-bottom-section {
   padding: 0 5px 10px;
   }
   
   #header-right ul {
   margin: 0;
   padding: 5px;
   }
   
   #header-right ul li {
   display: inline;
   padding: 5px;
   }
   
   #header-right-bottom {
   width: 400px;
   float: right;
   border: 1px solid $bordercolor;
   color: $pagetitlecolor;
   margin: 5px;
   }
   
   #header-right-bottom ul {
   margin: 0;
   padding: 5px;
   }
   
   #header-right-bottom ul li {
   display: inline;
   padding: 5px;
   }
   
   Note: if your own blog template is narrower than 950px, you may want to make some alterations to the styling code above. Change the width of the #header-wrapper to match the width of your outer-wrapper, so that it will not disrupt the overall width of your blog. You may also want to lessen the widths of the #header section, and the #header-right and #header-right-bottom sections too.
   
   If you preview your template you will see that the title and description are now aligned to the left, with space on the right for you to add your new widgets. So save your template, and let's add some widgets to these new sections!
3. Adding widgets to these new sections is the easiest part of this tutorial. Simply go to Template>Page Elements and add your widgets in the new sections which have appeared beside your header!
   
   Both of these sections now have styling for list items, so if you want to add a navigation bar, choose to add a "Links List" page element. Add your links as required and save. When you preview your template, you'll see that this display inline (horizontally) rather than in a long list.
   
   To add a search box to your header, you could either choose to add a Google Custom search widget, or use a simple blog search widget instead.

Width these extra widget sections in place, there are endless possibilities for what you may add to your header section! I used a search box and navigation links as an example, but you could easily substitute these for a description, feed links or anything else you choose instead.

Your blog logo/custom header image

As before, you can still add your custom logo or header image to the header widget. This will be resized to the new width of your header section (in the example above, this is 500px wide), so for best results you should upload an image of the same size.

If your image is wider than this, you should check the "Shrink to fit" box inside the widget editing box to ensure the header doesn't overshadow the other widgets on the page.

Coming soon...

The next two installments of the Blogger Template Design series will focus on styling your new header elements:

• Creating a more interesting search box
• Adding style and icons to the navigation links

If you'd like to see the progress of this series to date, you could check out the demonstration blog to see the what we have accomplished, along with links to all previous tutorials in this series.

To keep up to date with this series, be sure to subscribe to the feed or sign up for email updates!

As always, your comments and opinions are much appreciated. I'd love to know what you think of this series so far!

Some examples of great blog headers

When you come to think of great blog designs, there are probably a few sites which first come to mind. So take a look at these sites now, and focus on the header sections of these designs.

What elements of the header section make these blog designs stand out for you?

Here are some examples of headers in blogs whose design I admire:

Adii.co.za

Features of this eBook

This eBook is much more comprehensive than the original online article, and features:

• New examples of template customizations
• An entire chapter about customizing stretch (fluid) templates
• How to use buttons, banners and images
• Many useful resources for template customization
• An optional download folder containing all of the templates and images used in the eBook

Format

You can download Adobe Reader using the link below:

License

The Cheat's Guide to Customizing Blogger Templates eBook is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.

This means that you are free to redistribute this eBook for non-commercial purposes, without modification, so long as you include a link to the original author.

Download

Here you can download the Cheats' Guide to Customizing Blogger Templates eBook and also the download folder which contains all of the templates and images used in the guide:

Download the eBook (PDF format)

Cheats' Guide downloads folder (templates, images, etc)

Final words

Please send me an email if you have any questions about the content or usage of this eBook, and I'll get back to you as soon as possible.

If you've found The Cheats' Guide to be a useful read, why not help me spread the word so that others can find this too? It has taken much time and effort to complete this eBook, so I would really appreciate any and all publicity I can get!

I would love to read your thoughts and opinions about this eBook, so please do leave your comments and suggestions below.

I've always considered the blog header and footer to stylistically "frame" the main content of the blog, and feel it's important to pay much attention to these areas when designing a custom template.

Broadly speaking, there are two major styles for the header and footer sections of blog templates:

Where the width spans only the width of the content, like this:

Where the width spans the entire window, like this:

In this tutorial, I'll explain how both styles can be achieved so you can choose which style you'd prefer for your own custom template.

Changing the width of the header and footer (for both styles)

For both of the example styles displayed above, we will need to change the dimensions for the header and footer sections, which ensures the content spans the entire width of the blog.

Here's how to do this:

1. Go to Template>Edit HTML in your Blogger dashboard. Do not expand the widget templates (it is unnecessary for these customizations and can in fact make things more difficult for you!)
2. Find the width of your outer-wrapper. In the demonstration template, this is 950px, as can be seen in the following section of code:

   #o