How To Add Stylish CSS Three Column Footer Widget In Blogger Template Free

Blogger is one of the most used Blogging Platform in the world and the New Beginners or Newbie used this platform very much . The reason is simple as this is very easy to use and the most important thing is that this is free. There is no investment you need on this platform. 

And I know most of the newbies or beginners used this platform and there is no harm in that as this is Free of Cost and you can easily do the experiment in the Blogger Platform. So this is the main or simple reason that most of blogger love this platform and it is widely used by the peoples, bloggers, website beginners and others.

See This : How to Choose a Perfect Domain Name For Business

 

To use Blogger is one thing and to use Blogger template like a professional is another thing. Yes, there are so many templates or I can say Blogger Templates is available in the Internet and other reputed websites. You Can download any Blogger Template and used it on your Blog. But some of the Blogger Templates have most of thing but some of them is not. In that list of something the important or basic thing is Footer Widget. Yes, Some of the templates have Footer Widget but Some of them don’t have. So if you are having a category who don’t have Footer Widget than this Article is only for you.

Add 3 Column Footer Wiget in Blogger
Add 3 Column Footer Wiget in Blogger

Today I will tell you How to Add a Stylish CSS Three Column Footer Widget to Your Blogger Template. But before I start this tutorial or this complete post I want you to look at Best Tips Before Starting a New Blog For Beginners. Now Come back to the Topic of Add Footer Widget in Blogger will give you more options to show more things on your Blogger Template and most importantly it will give your Blog a Professional Look.

You can add more things on Footer Widget Buttons like Facebook, Twitter, Google+, Pinterest and Others . You can Easily add Email Subscription Box . You Can add anything and this will give your sidebars of Blogger Template More Options to add. See How to Add Stylish Share This Buttons on Blogger Template .

Important Note : If you are a Beginner or Newbie or in other Words you don’t have Much Knowledge about Coding than First Save the Complete Template Code Before Doing This .

 

Step Guide How To Add Stylish CSS 3 Column Footer Widget in Blogger Template Free 

1 First Log in to your Blogger Account .

2 Go to the Template and Click on Edit HTML

3 Than Click the Box which Labelled Expand Widget Template

4 After that Search For 

<body>
</body>

5 Paste the Given Code After <body> :

<div id='footer-widgets-container'>
<div id='footer-widgets-containerback'>
<div class='clearfix' id='footer-widgets'>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec1' showaddelement='yes'>
 <b:widget id='HTML15' locked='false' title='' type='HTML'>
 <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>
</b:section>
</li>
</ul>
</div>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec2' showaddelement='yes'>
 <b:widget id='HTML14' locked='false' title='Gallery' type='HTML'>
 <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>
</b:section>
</li>
</ul>
</div>
<div class='footer-widget-box footer-widget-box-last'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec3' showaddelement='yes'>
 <b:widget id='HTML13' locked='false' title='About' type='HTML'>
 <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>
</b:section>
</li>
</ul>
</div>
</div>
</div></div>
<div style='clear:both;'/>
6 After that Search for
</b:skin>
now paste the following CSS code just above</b:skin>
#footer-widgets {
 padding: 20px 0 0 0;
}
.footer-widget-box {
 width: 300px;
 float: left;
 margin-left: 15px;
}
.footer-widget-box-last {
}
#footer-widgets .widget-container {
 color: #374142;
}
#footer-widgets h2 {
 font-family: inherit;
 text-shadow: none;
 font-size: 16px;
 color: #fff;
 text-transform: uppercase;
 font-weight: 700;
 border-bottom: 4px solid #444444;
 padding-bottom: 10px;
}
#footer-widgets .widget ul {
 list-style-type: none;
 list-style: none;
 margin: 0px;
 padding: 0px;
}
#footer-widgets .widget ul li {
 padding: 0 0 9px 0;
 margin: 0 0 8px 0;
}
#footer-widgets-containerback {
 width: 980px;
 margin: auto;
}
#footer-widgets-container {
 background: #484848;
 border-top: 10px solid #66b381;
}
.footersec {
 color: #A1A6AF;
 font-size: 13px;
 line-height: 18px;
}
.footersec .widget {
 margin-bottom: 20px;
}
#footer-widgets-container { background: #484848; border-top: 10px solid #66b381; float: left; width: 100%; }
.footersec ul {
}
.footersec ul li {
}

7 Save Your Blogger Template and Go Back to the Layout to See Three Footer Widget.

Conclusion 

Add these Simple and Easy Code to Add Stylish 3 (Three) Column Footer Widget in Blogger Template For Free . You Can Use the Footer Widget according to your need. If you want to run only two Footer Widget than You Can Easily do that with this Code. You Can Change the Background Color According to Your Need .

If you like the Post than Share this with Maximum Number of Friends, Family Members and Other Peoples.

Leave a Reply

Your email address will not be published. Required fields are marked *