Master Blogging Tips: Multi Column Footer Widgets

Add a Customized Three Column Footer Widget In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidcfBg5chuV-i5s2umIe9A7vqjHF6SHx0p_XIOg8QXVdeTFqn2jY31nPbz2UQxonOn40tqtKizU7TuguGPt7cQQv2P_kh5PUOnEreuGGK_FCSdv0sDF4gfiN7R6uSwXA1QLjR9iVYSZ2g/s1600/Three-Column-Footer.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Three-Column-Footer" border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidcfBg5chuV-i5s2umIe9A7vqjHF6SHx0p_XIOg8QXVdeTFqn2jY31nPbz2UQxonOn40tqtKizU7TuguGPt7cQQv2P_kh5PUOnEreuGGK_FCSdv0sDF4gfiN7R6uSwXA1QLjR9iVYSZ2g/s1600/Three-Column-Footer.gif" title="Three-Column-Footer" width="400" /></a></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
You might have seen a three column widget at the bottom section of many commercial and professional blogs. Where you can add whatever stuff you like. Take my footer widget as an example. I have added widgets that further keeps the reader busy. This Footer widget contains three columns where each column can accommodate as many widgets as you can add! In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.</div>
<br />
<span class="fullpost" style="background-color: white; color: #333333; display: inline; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"></span><br />
See a screenshot,<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvaHxKCCYj1p173GzsIDUFVv01OzYtcYgg4psQCNU5snqhCOYI8Mxangg2FSgAttkQA9eoct7KBPPkxVSvpxx_JDRU5ITnuYmlhikqsGvK6n3Y1JKusq_R68lvrdlHyzh7PbtM49D2wj4/s1600/Three-Column-Footer-Widget.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvaHxKCCYj1p173GzsIDUFVv01OzYtcYgg4psQCNU5snqhCOYI8Mxangg2FSgAttkQA9eoct7KBPPkxVSvpxx_JDRU5ITnuYmlhikqsGvK6n3Y1JKusq_R68lvrdlHyzh7PbtM49D2wj4/s1600/Three-Column-Footer-Widget.gif" /></a></div>
<h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;">
Add This Three Column Widget Inside Your Blogger Templates</h4>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
Follow these steps,</div>
<ol style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<li>Go To <a href="http://blogger.com/" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Blogger</a><strong> > Layout > Edit HTML</strong></li>
<li>Back Up your template</li>
<li>Search for <strong>]]></strong></li>
</ol>
</div>
<li>Just before <strong>]]></strong></li>
 paste this CSS code,<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;">
<div style="padding: 0px 0px 15px;">
/* -----   LOWER SECTION   ----- */<br />#lower {<br />       margin:auto;<br />       padding: 0px 0px 10px 0px;<br />       width: 100%;<br />     <strong>  background:#333434; </strong>} <br />#lower-wrapper {<br />       margin:auto;<br />       padding: 20px 0px 20px 0px;<br />   <span style="color: #0080ff;"><strong>    <span style="color: red;">width: 960px;</span></strong></span></div>
<div style="padding: 0px 0px 15px;">
}</div>
<div style="padding: 0px 0px 15px;">
<span style="color: black;">#lowerbar-wrapper </span><span style="color: black;">{<br />     border:1px solid #DEDEDE;<br />       </span><span style="color: black;"><strong><span style="color: #0080ff;">background:#fff;</span> </strong>       float: left;<br />       margin: 0px 5px auto;<br />       padding-bottom: 20px; </span><span style="color: #0080ff;">       </span><strong><span style="color: #0080ff;">width: 32%;</span><span style="color: black;"> </span>       text-align: justify;<br />       font-size:100%;<br />       line-height: 1.6em;<br />       word-wrap: break-word; <br />       overflow: hidden;<br />}</strong></div>
<div style="padding: 0px 0px 15px;">
       .lowerbar {margin: 0; padding: 0;}<br />       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}</div>
<div style="padding: 0px 0px 15px;">
<span style="color: black;">.lowerbar h2 {</span><br />      margin: 0px 0px 10px 0px;<br />       padding: 3px 0px 3px 0px;<br />       text-align: left;<br /><span style="color: green;">       </span><strong><span style="color: green;">color:#0084ce;</span> </strong>        text-transform:uppercase;<br />      <strong><span style="color: green;">font: bold 14px Arial, Tahoma, Verdana; </span></strong><span style="color: green;">       </span><span style="color: green;"><strong>border-bottom:3px solid #0084ce; </strong></span><span style="color: black;">}</span></div>
<div style="padding: 0px 0px 15px;">
.lowerbar ul {<br />      margin: 0px 0px 0px 0px;<br />      padding: 0px 0px 0px 0px;<br />      list-style-type: none;<br />}</div>
<div style="padding: 0px 0px 15px;">
.lowerbar li {<br />      margin: 0px 0px 2px 0px;<br />      padding: 0px 0px 1px 0px;<br />    <strong>  <span style="color: blue;">border-bottom: 1px dotted #ccc;</span></strong><br />}</div>
<div style="padding: 0px 0px 15px;">
<br /></div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
    5.   Now Search For <strong></strong></div>
 and just above this code paste the code below,<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;">
<div style="padding: 0px 0px 15px;">
<div id="lower">
<br /><div id="lower-wrapper">
<br /><div id="lowerbar-wrapper">
<br /><b:section class="lowerbar" id="lowerbar1" preferred="yes"> </b:section> </div>
<br /><div id="lowerbar-wrapper">
<br /><b:section class="lowerbar" id="lowerbar2" preferred="yes"> </b:section> </div>
<br /><div id="lowerbar-wrapper">
<br /><b:section class="lowerbar" id="lowerbar3" preferred="yes"> </b:section> </div>
<br /><div style="clear: both;">
 </div>
</div>
</div>
</div>
<div style="padding: 0px 0px 15px;">
<br /></div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
6.  Save your template. done!</div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
Now visit the page<strong> Layout > Page Elements</strong> and start adding widgets! :>></div>
<h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;">
Customization</h4>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your three column widget. For changing colours use our <a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">advanced Colour Code Generator</a></div>
<ul style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; list-style: none;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><strong>background:#333434;</strong>   Changing the six digit colour code will change the background colour of this widget.</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="color: #0080ff;"><strong><span style="color: red;">width: 960px;</span></strong></span>  This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="color: black;"><strong><span style="color: #0080ff;">background:#fff;</span></strong></span>  and <span style="color: #0080ff;">   </span><strong><span style="color: #0080ff;">width: 32%;</span></strong> is the background colour and width of the three columns where the widgets are added.</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><strong><span style="color: green;">color:#0084ce;</span></strong> This is the Colour of Title Headings</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="color: green;"><strong>font: bold 14px Arial, Tahoma, Verdana;</strong>  </span><span style="color: black;">Edit this to change the font size and family.</span></li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="color: green;"><strong>border-bottom:3px solid #0084ce;</strong>   <span style="color: black;">Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading</span></span></li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="color: blue;"><strong>border-bottom: 1px dotted #ccc;</strong></span><span style="color: green;"> </span><span style="color: black;">Editing this will change the size, style and colour of the border that appears below links.</span></li>
</ul>
<div align="center" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="color: #0080ff;"><strong>That’s All!</strong></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
A tutorial on Four Column Footer widget will be posted soon. Till then keep playing with this one :> Do let me know if you needed help. Your questions are more than an honor! </div>

Add a Customized Three Column Footer Widget In Blogger

You might have seen a three column widget at the bottom section of many commercial and professional blogs. Where you can add whatever st...

Multi Column Footer Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6ZLe9UKuR5ZwrtD8vuxcKo8MXdlQTL_ni_Z18CdLC8LHm6Fk4TPBa3zBxMdjtMqXoX-qt2FKTZNoE1CqHb_516ToIoNJwFhY6bsogb7JRnD4x8kXKDRWDSSA6nkat4HZ7g_ttG5wVTs/s1600/Multi-Column-Widget.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Multi-Column-Widget" border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6ZLe9UKuR5ZwrtD8vuxcKo8MXdlQTL_ni_Z18CdLC8LHm6Fk4TPBa3zBxMdjtMqXoX-qt2FKTZNoE1CqHb_516ToIoNJwFhY6bsogb7JRnD4x8kXKDRWDSSA6nkat4HZ7g_ttG5wVTs/s1600/Multi-Column-Widget.gif" title="Multi-Column-Widget" width="640" /></a></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
We had previously shared a tutorial on <a href="http://www.mybloggertricks.com/2010/01/add-customized-three-column-footer.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Three Column Footer Widget</a> which was well appreciated and today we have yet another more advanced version of the same widget. This new widget can become three column, four column or with as many columns as you wish. Further this new footer widget has some great CSS effects added to it which makes it even better. First see a demo to know what’s so different about it.</div>
<span class="fullpost" style="background-color: white; color: #333333; display: inline; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"></span><br />
<br />
<h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;">
How To Add the Multi Column Footer Widget To <a href="http://blogger.com/" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Blogger</a>?</h4>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
First we will add the CSS code to your blogger templates and then the HTML. So without wasting any time lets jump straight to the steps,</div>
<ol style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<li>Go To Blogger > Design > Edit HTML</li>
<li>Backup Your Template</li>
<li>Search for ]]></li>
</ol>
</div>
<li>Just above ]]></li>
paste the code below,<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;">
<div style="padding: 0px 0px 15px;">
/*----- MBT MULTI COLUMN FOOTER WIDGET -----*/</div>
<div style="padding: 0px 0px 15px;">
#lower {<br />margin:auto;<br />padding: 0px 0px 10px 0px;<br />width: 100%;<br />background:#333333;<br />}<br />#lower-wrapper {<br />background:#333333;<br />margin:auto;<br />padding: 20px 0px 20px 0px;<br /><strong><span style="color: green;">width: 960px;</span></strong><br />border:0;<br />}<br />#lowerbar-wrapper {<br />background:#333333;<br />float: left;<br />margin: 0px 5px auto;<br />padding-bottom: 20px;<br /><strong><span style="color: #0080ff;">width: 23%;</span></strong><br />text-align: justify;<br />color:#ddd;<br />font: bold 12px Arial, Tahoma, Verdana;<br />line-height: 1.6em;<br />word-wrap: break-word;<br />overflow: hidden;<br />}<br />.lowerbar {margin: 0; padding: 0;}<br />.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}<br />.lowerbar h2 {<br />margin: 0px 0px 10px 0px;<br />padding: 3px 0px 3px 0px;<br />text-align: left;<br />border:0;<br />color:#ddd;<br />text-transform:uppercase;<br />font: bold 14px Arial, Tahoma, Verdana;<br />}<br />.lowerbar ul {<br />color:#fff;<br />margin: 0 auto;<br />padding: 0;<br />list-style-type: none;<br />}<br />.lowerbar li {<br />display:block;<br />color:#fff;<br />line-height: 1.6em;<br />margin-left: 0 !important;<br />padding: 6px;<br />border-bottom: 1px solid #222;<br />border-top: 1px solid #444;<br />list-style-type: none;<br />}<br />.lowerbar li a {<br />text-decoration:none; color: #DBDBDB;<br />}<br />.lowerbar li a:hover {<br />text-decoration:underline;<br />}<br />.lowerbar li:hover {<br />display:block;<br />background: #222;<br />}</div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
       5.    Now search for </div>
and paste the following code just above <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<br /></div>
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;">
<div style="padding: 0px 0px 15px;">
<div id="lower">
<br /><div id="lower-wrapper">
</div>
</div>
</div>
<div style="padding: 0px 0px 15px;">
<br /><div id="lowerbar-wrapper">
<br /><b:section class="lowerbar" id="<strong>lowerbar1</strong>" preferred="yes"> </b:section> </div>
</div>
<div style="padding: 0px 0px 15px;">
<br /><div id="lowerbar-wrapper">
<br /><b:section class="lowerbar" id="<strong>lowerbar2</strong>" preferred="yes"> </b:section> </div>
</div>
<div style="padding: 0px 0px 15px;">
<br /><div id="lowerbar-wrapper">
<br /><b:section class="lowerbar" id="<strong>lowerbar3</strong>" preferred="yes"> </b:section> </div>
</div>
<div style="padding: 0px 0px 15px;">
<br /><span style="color: green;"><div id="lowerbar-wrapper">
<br /><b:section class="lowerbar" id="<strong>lowerbar4</strong>" preferred="yes"> </b:section> </div>
</span></div>
<div style="padding: 0px 0px 15px;">
<br /><span style="color: purple;"><strong><div style="clear: both;">
</div>
</strong></span> </div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
      6.   Save your template and you are done!</div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
Now go to <strong>Page Elements</strong> and add your widgets to the newly added Footer Widget that will look something like this,</div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<img alt="image" border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5qyvpuPMCmjmycwoUzoOP_mVGqgsyTNfc6-83FXwOTdQi1WxJ6o-87UboHi9T5BYMazr-USZ3lCtj6xsqOBuVGcfAWbbp6J9sEcRPwmsLcRuF7YTu561TdHTVNqhyphenhyphenBOwqLtgVUTLn-_k/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 10px;" title="image" width="572" /></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
You can observe that there a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.</div>
<h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;">
How to Customize the Widget?</h4>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
Well I will keep it simple. I think the colors and overall size and padding and margining are just perfect. The only thing that you will need to adjust according to your template is the width of the widget and the number of vertical columns.</div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
1.  In order to reduce or increase the overall width of the widget simply change <strong><span style="color: green;">width: 960px;</span></strong></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
2.  If you wish to decrease the number of widgets to three then simply delete this part of the code,</div>
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;">
<div style="padding: 0px 0px 15px;">
<span style="color: green;"><div id="lowerbar-wrapper">
<br /><b:section class="lowerbar" id="<strong>lowerbar4</strong>" preferred="yes"> </b:section> </div>
</span></div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
3.  Or if you wish to add an extra column then add the code below just above <span style="color: purple;"><strong><div style="clear: both;">
</div>
</strong></span></div>
<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;">
<div id="lowerbar-wrapper">
<br /><b:section class="lowerbar" id="<strong>lowerbar#</strong>" preferred="yes"> </b:section> </div>
</blockquote>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
</div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
Remember that <strong>lowerbar#</strong> refers to the column number. So if you want to add a fifth column then simply replace  <strong>lowerbar#</strong> with <strong>lowerbar5.</strong></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
After you have added the fifth column then remember to change <strong><span style="color: #0080ff;">width: 23%;</span></strong> with <strong><span style="color: #0080ff;">width: 17%;</span></strong> </div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard. Increasing them will make things look ugly.</div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<br /></div>
<div align="center" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="color: #0080ff;"><strong>That’s it! Enjoy :D</strong></span></div>

Multi Column Footer Widget For Blogger

We had previously shared a tutorial on Three Column Footer Widget which was well appreciated and today we have yet another more advanc...