Understanding and Styling Blogger Footer Layout | Mission 8

Previously, we learnt how to create a simple 3 column template from our already created “Simple Blogger Template”. As, we have covered the header, and the body, now it is time to know the Blogger footer well. We will today see how is a Blogger footer lays itself. Individually, the footer can be designed to a single column or multiple column based on your needs. We shall see that in our next tutorial.

PREVIOUS MISSION – Mission 7: Create a 3 column Blogger Template from existing Simple Blogger Template
NEXT MISSION – Mission 8: Create 3 Column Footer in Blogger

MISSION 8 OBJECTIVES:

1. Understanding the layout of the Footer.
2. Adding styles to the Footer.

EXPLANATION:

1. Understanding the layout of Footer

Here is the complete code for the Footer from our Simple Blogger Template after expanding the “Widget Template”:

Code:

<!-- START OF FOOTER -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<!-- Widget One( A Text Widget ) -->
<b:widget id='Text1' locked='false' title='FOOTER SECTION' type='Text'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>
<!-- Widget Two(The Attribution Widget for Blogger) -->
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>

    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
       <data:attribution/>
      </b:if>
    </div>

    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
</b:section>
</div> <!-- End of BLOG FOOTER -->
It is very easy to understanding our “Simple Blogger Template” footer section.

The footer layout starts from the “footer-wrapper” div tag, where the entire footer elements necessary are placed. Here we only place a single footer so the id of the footer is just “footer“. We also place some widgets. We had already seen how to place a “Add a gadget” element shown in your dashboard.

Here is a pictorial representation of the Footer Layout:

Here is the corresponding CSS for the above footer code:

/* -----   FOOTER   ----- */

#footer-wrapper {
background:red;
padding:0px;
width:900px;
border:1px solid red;
margin:0px auto;

}

.footer, #footer {
height:100px;
background:red;
margin: 0px;
padding: 10px 10px 10px 10px;
text-align: center;
line-height: 1.2em;
}

#footer h2 {
margin: 0px;
font-size: 100%;
font-weight: bold;
background:red;
color:#fff;
}

.footer a {
color: blue;
}
#footer .widget {
/* Your common footer widget settings here */
}

2. Adding style to the Footer(Making it more organized)

We are going to apply some CSS Styling to the previous old footer to make it look organised.
Here is the snapshot of the final product:

Click to view large

Note: You can see that there are two columns in the footer. Those are not two footers, but two widgets separated within the same/single footer. As I’ve told, we will learn how to create more than 1 columns in the footer where you can add multiple widgets in a single footer column.

How did we achieve this organized new footer?

I’ve tweaked the CSS for the footer, and here is the CSS code:

Note: All the codes in RED below are the ones added or modified from the previous template’s CSS.

Code:

/* -----   FOOTER   ----- */

#footer-wrapper {
background:red;
padding:10px;
width:880px;
border:1px solid red;
margin:0px auto;
}

.footer, #footer {
height:100px;
background:yellow;
margin: 0px;
padding: 10px 10px 10px 10px;
text-align: none;
line-height: 1.2em;
border:3px solid green;
}

#footer h2 {
margin: 0px;
font-size: 100%;
font-weight: bold;
background:pink;
color:#000;
}

.footer a {
color: blue;
}
#footer .widget {
border:3px solid;
float:left; /* This is the code to make the widgets get seperate */
margin:2px;
/* Your common footer widget settings here */
}

#footer .widget-content{
/* Settings for widget contents */
}
We make all the widgets float to the left, hence producing the columns of widgets. You can add more of widget and that will be floating left of the attribution widget.

Hope, this tutorial was helpful and knowledgeable to all of you. Thanks for reading, and please feel free to write to us if you have any doubts. We will get back to you ASAP.

— To be continued —