Como criar um rodapé de widget de três colunas no Blogger

 Já pensou em ter um espaço extra na área do rodapé do seu site para colocar widgets importantes como caixa de likes do Facebook , feeds do twitter , gadget de seguidores do Google e muito mais? Criar um rodapé widgetizado de três colunas é a solução perfeita, pois permite adicionar widgets em seu site além da barra lateral. A maioria dos desenvolvedores de templates de blogueiros profissionais como Themeforest, Templateism e outros já estão fornecendo esse recurso por padrão em seus templates. Neste artigo, mostraremos como criar um rodapé de widgets de três colunas no Blogger.

Por que criar rodapé com widget?

Às vezes, você encontra sua barra lateral carregada com vários widgets que não deseja remover por algum motivo. No entanto, você acaba removendo-os para manter seu site limpo. Ter uma área extra de três widgets em uma área de rodapé certamente proporcionaria muito alívio em mover qualquer widget da barra lateral para a área de widget de rodapé, sem removê-los do seu site. Esta é a razão pela qual quase todos os blogs agora consideram ter uma área de rodapé com widgets.

Como criar rodapé de três widgets no blogger?

Para instalar o rodapé de três widgets no blogger, você deve primeiro declarar a área do widget no template do blogger. Portanto, vá para Blogger >> Template >> Edit HTML >> e procure pela tag final </body> e logo acima dela cole o seguinte trecho de código:

<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' bloqueado='false' title= '' type='HTML'>

    <b:includable id='main'>

  <!-- exibir apenas o título se não estiver vazio -->

  <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' bloqueado='false' title='Galeria' type='HTML'>

    <b:includable id='main'>

  <! -- somente exibe o título se não estiver vazio -->

  <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' bloqueado='false' title='Sobre' type='HTML'>

    <b:includable id='main'>

  <!-- somente exibir título se for não vazio -->

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

Depois de declarar os widgets no modelo, o próximo passo é aplicar a folha de estilo para que ela não apenas pareça compatível com seu design, mas também apareça de maneira eficiente. Portanto, na codificação do modelo, procure pela  tag ]]></b:skin>  e logo acima cole o seguinte trecho de código. Nota: Este CSS é mínimo e você pode editá-lo de acordo com suas necessidades.

#footer-widgets {

    preenchimento: 20px 0 0 0;

}

.footer-widget-box {

    largura: 300px;

    flutuar: esquerda;

    margem esquerda: 15px;

}

.footer-widget-box-last {

}

#footer-widgets .widget-container {

    color: #374142;

}

#footer-widgets h2 {

    font-family: herdar;

    sombra de texto: nenhuma;

    tamanho da fonte: 16px;

    cor: #ff;

    transformação de texto: maiúsculas;

    peso da fonte: 700;

    borda inferior: sólido de 4px #444444;

    fundo de preenchimento: 10px;

}

#footer-widgets .widget ul {

    list-style-type: none;

    estilo de lista: nenhum;

    margem: 0px;

    preenchimento: 0px;

}

#footer-widgets .widget ul li {

    preenchimento: 0 0 9px 0;

    margem: 0 0 8px 0;

}

#footer-widgets-containerback {

    largura: 980px;

    margem: automático;

}

#footer-widgets-container {

    background: #484848;

    borda superior: sólido de 10px #66b381;

}

.footersec {

    cor: #A1A6AF;

    tamanho da fonte: 13px;

    altura da linha: 18px;

}

.footersec .widget {

    margem inferior: 20px;

}

#footer-widgets-container { background: #484848; borda superior: sólido de 10px #66b381; flutuar: esquerda; largura: 100%; }

.footersec ul {

}

.footersec ul li {

}

Agora você pode ir para Blogger >> Layout e você notará três áreas de widgets na parte inferior da página. Você pode adicionar mais gadgets ou editá-los dependendo de suas necessidades e requisitos. Além disso, visite seu blog também para ver tudo em ação ao vivo.

Esperamos que este tutorial seja útil para não desenvolvedores e desenvolvedores entenderem como essas pequenas coisas são feitas, pois essas coisas desempenham um papel significativo na criação de um modelo de blogger do zero . No MyBloggerLab, estamos usando duas colunas de rodapé porque depende inteiramente de uma necessidade de quanto espaço é necessário para seu site. Se você gostou deste artigo, compartilhe-o com seus amigos e colegas blogueiros no Facebook, Google+ ou Twitter.