Styling Blogger Header And Making Header Link Clickable | Mission 12

Previously, we had touched upon the comment system of Blogger and the same for our “Simple Blogger Template” we are designing. Today, we will get little more professional to make things better in the top section of our template home page. What we are doing in this tutorial is adding some graphic elements to the header and the bringing back our professional menu to the top by adding a bar. We also restructure and restyle the Blogger header.

In all our previous versions of the “Simple Blogger Template” we see that the header is non-clickable, this is a serious bug. We will learn to fix that as well in this tutorial. Sounds great? Lets get into the action without wasting much time.

PREVIOUS MISSION – Mission 11 – Understand the Simple Blogger Template’s comment system.
NEXT MISSION – Mission 12 – Styling Blogger Content area.

MISSION 12 OBJECTIVES:

1. Adding graphics to the header section.
2. Making the header title clickable.
3. Adding a top bar professional menu ( Menu above the header ).
4. Making the header independent of the outer-wrapper.

Note: This is our templates version 1.1 as we will be making considerable changes as we go on from here.

Here is a snap shot of the header:

EXPLANATION:

1 Adding Graphics To The Header Section

We are adding two graphic images as backgrounds.

The first one is adding a black tiled background for the header-wrapper in the CSS:

CSS:

#header-wrapper {
/* Header Wrapping */
height:100%;
padding: 0px;
width:100%;
margin:0px auto;
background: url('http://www.itechcolumn.com/wp-content/uploads/2012/09/dark-blue-squares.png');
border-top:5px solid #cfac84;
border-bottom:5px solid #cfac84;
}

The code in green is the image URL for the dark blue squares.
You can download the images by right clicking and saving it to your desktop from below:

right click and save

We have also added a border to the top and bottom of the header using the following code in the above CSS –

CSS:

border-top:5px solid #cfac84;
border-bottom:5px solid #cfac84;

Next, we add the same image as background to the header section and header title using the below CSS:

CSS:

#header {
/* Main header settings */
height:100px;
background:url('http://www.itechcolumn.com/wp-content/uploads/2012/09/23.png');
font-family:"Times New Roman", Times, serif;
font-style:italic;
padding:10px;
margin: 0px auto; /* CENTERING HEADER */
min-width: 800px;
max-width: 1000px;
}

#header h1 {
/* Header Title Text Settings */
display: block;
margin:0px;padding:0px;
color:#444;
font-size:35px;
background:url('http://www.itechcolumn.com/wp-content/uploads/2012/09/23.png');
}

right click to download

<div id='header-wrapper'>

<data:title/>

<a expr:href='data:blog.homepageUrl'></a>

<a expr:href='data:blog.homepageUrl'><data:title/></a>

<!-- Start Of Header-Wrapper --> <div id='header-wrapper'>

<div class='topbar'>
<div class='middle'>
<ul id='nav'>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Articles</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Table Of Content</a></li>
    <li><a href='#'>FAQs</a></li>
    <li><a href='#'>Contact Us</a></li>
</ul>
</div>
</div>


CSS for the navigation menu is already available in the template, but still here is the CSS:

/* Code for Top Bar */
.topbar{margin:0px auto;height:34px; line-height:12px; background:#5f7275;}
.middle{margin:0px auto; width:1000px; }
/* Navigation CSS */
#nav {
    padding:0px;
}
#nav li  {     display:inline;
}
#nav li a
{
   font-family:Arial;
   font-size:12px;
   text-decoration: none;
   float:left;
   padding:10px;
   background-color: #5f7275;
   color:#ffffff;
   }
#nav li a:hover
{
   background-color:#568781;
   border-bottom-color:#000;
   border-top-color:#000;
   border-bottom-style:solid;
   color:#fcfcfc;
}

c) Save the template.

4. Making the header independent of the outer-wrapper

The outer-wrapper was wrapped above the following code:

<div id='header-wrapper'>

as shown below:

<div id='outer-wrapper'><div id='wrap2'>
<div id='header-wrapper'>
/* All header wrapper codes */
</div>
/* All other outer-wrapper contents like sidebars, blog area and footer */
</div>
</div>


Now, we have made the restructured by removing the following code:

<div id='outer-wrapper'><div id='wrap2'>

from above the <div id=’header-wrapper’> to below the header-wrapper as shown below:

<div id='header-wrapper'>
/* All header wrapper codes */
</div>
<div id='outer-wrapper'><div id='wrap2'>
/* All other outer-wrapper contents like sidebars, blog area and footer */
</div>
</div>

Simple!! You can find how things are restructured by uploading the template and looking it for yourself.

DEMO | DOWNLOAD

Hope you enjoyed this tutorial. We are close to making this template to a professional template. We will add many more customization, styling and beautification to make this a pro template. This is a first step forward. Enjoy trying new things with the header.

— to be continued —