Como criar 3 Colunas rodapé do blogger



como-criar-3-colunas-rodapé-do-blogger



Hoje vamos mostrar nesse tutorial como criar 3 colunas rodapé para seu blogger isso é muito útil como você pode ver no nosso blogger temos 3 colunas usamos apenas 2 você poderá adicionar widget links e também redes sociais bem como formulário de contato isso é muito útil para que você possa fazer seu blogger mais amigável e com um layout melhorado afim de apresentar um blogger mais profissional, varias pessoas adicionam então vamos a esse tutorial

Nota sempre faça download do seu modelo atual se algo sair errado pode reverter
Primeiro você precisa fazer login no blogger
va no menu e procure por layout >> editar html  clique em CTRL+F junto para abrir a caixa de pesquisa e procure por a tag final </body> acima disso copie o codigo abaixo e cole acima


<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;'/>


Agora falta aplicar o estilo CSS procure por ]]></b:skin>  copie o codigo abaixo e cole acima  nota esse codigo pode ser alterado conforme sua necessidade no template


#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 {
}


Clique em salvar vá em layout e visualize 3 colunas adicionadas esperamos que esse tutorial possa ajudar você isso pode ser muito útil para que você possa adicionar algumas coisas legais no rodapé do blogger.

6 comentários

avatar

Não funcionou.
Fiz direitinho e do jeito que o tutorial diz mas... não pegou!

avatar

Verifique se ja tem css de footer no seu blogger apague e coloque o citado no código a mesma coisa deve ser feita para o widget

avatar

Que bom que gostou Meri Seja bem vinda ao mybloggerseo :)

avatar

IRRUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU deu!!!!!!!!!!!!!!!!!!

Click to comment