terça-feira, 23 de junho de 2015

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.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

4 comentários:

Obelix Ob disse...

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

Myblogger SEO disse...

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

Meri Pellens disse...

EXCELENTE!

Myblogger SEO disse...

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

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner