How to add more widget areas to footer in blogger ?
How to create three widgets footer in blogger?
To install the three widget footer in blogger, you have to first declare the widget area’s in the blogger template. Therefore, go to Blogger >> Template >> Edit HTML >> and search for the ending </body> tag and just above it paste the following piece of coding:<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 != ""'>
<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 != ""'>
<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 != ""'>
<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;'/>
After you’re done by declaring the widgets in the template the very next thing is to apply style sheet so that it not only look compatible with your design but also appears in an efficient way. So in the template coding, search for ]]></b:skin> tag and just above it paste the following piece of code. Note: This CSS is minimal and you’re free to edit it according to your needs.
#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 {
}
Now you can go to Blogger >> Layout and you’ll notice three widget areas towards the bottom of the page. You can add more gadgets or can edit them depends on your needs and requirements. Furthermore, visit your blog as well to see everything in live action.
source: https://www.mybloggerlab.com/2014/08/how-to-create-three-column-widgets-footer-in-blogger.html