Footer Code For Blogger

Monday, 5 August 2013

Footer Code For Blogger

-------------------------------------------------------------------------------------------------------
FIND B SKIN TAG AND REPLACE WITH BELOW CODE

]]></b:skin>

--------------------------------------------------------------------------------------------------------

/* FOOTER ----------------------------------------------- */
#footer-container{}
#footer{margin-bottom:15px}
#footer-widgets-container{}
#footer-widgets{padding:10px 0 0 0;}
.footer-widget-box{width:230px;float:left;margin-left:12px}
.footer-widget-box-last{}
.footer-widget-box .widget{margin:0 0 15px 0;padding:10px 10px 10px 10px;color:#17191A;font-size:13px;border:1px solid #323437;background:#FFF;}
#footer-widgets .widget-container{
color:#17191A;}
#footer-widgets .widget-container a{text-decoration:none;color:#17191A;}
#footer-widgets .widget-container a:hover{text-decoration:none;color:#EB6B0A;}
#footer-widgets h2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9gheU8BfUIirPEJXEHjPebvTaukbcE4LO2T1qX3gJgsJnfKDUm-IS3rMvg5MVP4nSuA8OtmcJxDdW9QWnlfBgxQWUjTu7p6Laq1jF99z2wp6_3t6V30AkPG2t1Fs0j_0j_op8qeQEXQE/s0/widgettitle-bg.png) left top repeat-x;padding:9px 10px;border-left:3px solid #EB6B0A;margin:-10px -10px 10px -10px;color:#FFF;font-size:16px;line-height:16px;font-family:'Oswald',sans-serif;font-weight:normal;text-decoration:none;text-transform:uppercase;}
#footer-widgets .widget ul{list-style-type:none;list-style:none;margin:0px;padding:0px;}
#footer-widgets .widget ul li{padding:0 0 9px 12px;margin:0 0 8px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg75AxYCtEsyWh-KCwp2pWpnDgAogEisQ_TNJO0tLmFan4dzgO_W37kTVnaqQ2-SUuMgKEIfBJjuWxSqolIM37jTVJpCEyrsg2PjCDT8VprpwJfmcenUiIw7PBqmGY0xgmCYy5a69169A/s0/widget-list.png) left 4px no-repeat;border-bottom:1px solid #E3E3E3;}
.footersec {}
.footersec .widget{margin-bottom:20px;}
.footersec ul{}
.footersec ul li{}
#footer-widgets h2 {
background: linear-gradient(to right, red,blue, indigo, violet);
background-position:0 0;
background-repeat:repeat no-repeat;
border-left-color:#EB6B0A;
border-left-style:solid;
border-left-width:3px;
color:#FFFFFF;
font-family:Oswald, sans-serif;
font-size:16px;
font-weight:normal;
line-height:16px;
margin:-10px -10px 10px;
padding:9px 10px;
text-decoration:none;
text-transform:uppercase;

}

]]></b:skin>

---------------------------------------------------------------------------------------------
FIND YOUR CONTENT WRAPPER FINISHING DIV AND ADD BELOW CODE
THIS CODE WRITES AFTER SIDEBAR AND CONTENT WRAPPER DIV
BUT INSIDE OUT WRAPPER DIV
-----------------------------------------------------------------------------------------------

<div id='footer-widgets-container'>
<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='Stats1' locked='false' title='Total Pageviews' type='Stats'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div expr:id='data:widget.instanceId + "_content"' style='display:none'>
<b:if cond='data:showSparkline'>
<img alt='Sparkline' expr:id='data:widget.instanceId + "_sparkline"' height='30' width='75'/>
</b:if>
<b:if cond='data:showGraphicalCounter'>
<span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
<b:else/>
<span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</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='PlusFollowers1' locked='false' title='Google+ Followers' type='PlusFollowers'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:profileUrl != ""'>
<div class='g-plus' data-action='followers' data-source='blogger:blog:followers' expr:data-height='data:height' expr:data-href='data:profileUrl' expr:data-theme='data:theme' expr:data-width='data:width'/>
<script type='text/javascript'>/*<![CDATA[*/window.___gcfg={'lang':'<data:language/>'};/*]]>*/</script>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>
</li>
</ul>
</div>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec3' showaddelement='yes'>
<b:widget id='HTML6' locked='false' title='Follow Us' type='HTML'>
<b:includable id='main'>
<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='footersec4' showaddelement='yes'>
<b:widget id='HTML7' locked='false' title='TAGGIFY' type='HTML'>
<b:includable id='main'>
<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>



------------------------------------------------------------------------------------------------
I USE FOUR WIDGETS IN MY FOOTER IF SHOW ERROR YOU CAN
CHANGE YOUR WIDGET IDS BECAUSE WIDGET IDS SHOULD NOT
MATCH EACH OTHER.SO DON'T SAME WIDGET IDS
-----------------------------------------------------------------------------------------------------

USE IMAGE IN TUTORIAL

#footer-widgets h2

--------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------

OTHER INFORMATION
AFTER CODE PROCESS SET YOUR G PLUS WIDGET SIZE