Colocar coluna extra abaixo das postagens do blog

DEMO

Se você já teve o bom senso de trocar seu template pelo template Simple, implementado em 2010, essa dica é para você. Se acha que é necessário mais widgets e precisa de mais espaço no blog, para colocar mais informação para seus visitantes, eis uma maneira fácil de obter mais uma coluna extra abaixo das postagens do blog.


Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Primeiro vamos acrescentar ao sidebar a um grupo para poder assim, depois, customiza-lo a vontade no editor de modelo do Blogger. A primeira coisa a fazer é procurar por:

E antes dele (acima)
 
   <Group description="Post Footer" selector=".post-footer">

Cole o código abaixo

<Group description="Sidebar revista fontes" selector=".post-footer">
<Variable name="font.sidebar.revista" description="Fonte sidebar revista" type="font"
        default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="sidebar.revista.text.color" description="Text Color" type="color" default="#666666" value="#333f6e"/>
<Variable name="font.sidebar.revista.titulo" description="Fonte sidebar revista titulo" type="font"
        default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="sidebar.revista.text.color.titulo" description="Text Color titulo" type="color" default="#666666" value="#111111"/>
</Group>

<Group description="Sidebar revista" selector=".post-footer">
     <Variable name="sidebar.revista.background.color" description="Cor fundo fora widget" type="color"
         default="#f9f9f9" value="#c1ceff"/>
<Variable name="sidebar.revista.background.color.in" description="Cor fundo dentro widget" type="color"
         default="#f9f9f9" value="#ffffff"/>
     <Variable name="sidebar.fundo.titulo" description="Shadow Color" type="color" default="#eeeeee" value="#b4a7d6"/>
   </Group>

Pronto, feito isso agora vamos dar estilo à sidebar magazine.

Procure por:

/* Mobile

----------------------------------------------- */

Acima dele cole o seguinte código:

/*Sidebar extra----------------------------------------------------------------*/
#magazine-center {
width: 100%;
float: left;
margin: 2px 2px 10px -5px;
}
#magazine-left2 {
width: 50%;
float: left;
margin: -41px 2px 10px -5px;
}
#magazine-right2 {
width: 50%;
float: right;
margin: -41px 4px 10px -5px;
}
#magazine-center2 {
width: 100%;
float: left;
margin: -41px -5px 10px -5px;
}
#magazine-left3 {
width: 50%;
float: left;
margin: -41px 2px 10px -5px;
}
#magazine-right3 {
width: 50%;
float: right;
margin: -41px 4px 10px -5px;
}

#magazine-right  .widget, #magazine-center .widget, #magazine-left2 .widget, #magazine-right2 .widget,
#magazine-center2 .widget,  #magazine-left3  .widget,  #magazine-right3  .widget {
background: $(sidebar.revista.background.color);
  border: $(header.bottom.border.size) solid $(tabs.border.color);
  padding: 6px 5px;
  font: $(font.sidebar.revista);
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 -moz-box-shadow: 0px 10px 10px -7px #888;
 -webkit-box-shadow:0px 10px 10px -7px #888;
}

#magazine-right  .widget-content, #magazine-center .widget-content, #magazine-left2 .widget-content,
 #magazine-right2 .widget-content,
#magazine-center2 .widget-content,  #magazine-left3  .widget-content,  #magazine-right3  .widget-content {
background: $(sidebar.revista.background.color.in);
padding: 5px 5px;
}

#magazine-right  .h2, #magazine-center h2, #magazine-left2 h2, #magazine-right2 h2,
#magazine-center2 h2,  #magazine-left3  h2,  #magazine-right3  h2{
background: $(sidebar.fundo.titulo) $(tabs.background.gradient) repeat-x scroll 0 -800px;
text-align: center;
 font: $(font.sidebar.revista.titulo);
color: $(sidebar.revista.text.color.titulo);
padding: 12px 0;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}

#magazine-right  .ul li, #magazine-center ul li, #magazine-left2 ul li, #magazine-right2 ul li,
#magazine-center2 ul li,  #magazine-left3  ul li,  #magazine-right3  ul li{
list-style-type:none;
vertical-align: top;
padding-bottom: 1px;
margin-left: 1px;
border-bottom: 1px dotted #808080;
}

Procure por:



<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>



E depois dele cole o código abaixo. (Caso queira que a coluna apareça também nas páginas internas do blog, retire os códigos na cor vermelha.)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-center' showaddelement='yes'>
<b:widget id='Label11' locked='false' title='Marcadores cloud' type='Label'/>
</b:section>
<b:section class='sidebar' id='magazine-left2' showaddelement='yes'>
<b:widget id='PopularPosts2' locked='false' title='Postagens populares 1' type='PopularPosts'/>
</b:section>
<b:section class='sidebar' id='magazine-right2' showaddelement='yes'>
<b:widget id='PopularPosts3' locked='false' title='Postagens populares 2' type='PopularPosts'/>
</b:section>
<b:section class='sidebar' id='magazine-center2' showaddelement='yes'>
<b:widget id='Followers2' locked='false' title='Seguidores' type='Followers'/>
</b:section>
<b:section class='sidebar' id='magazine-left3' showaddelement='yes'>
<b:widget id='VideoBar11' locked='false' title='Barra de vídeo 1' type='VideoBar'/>
</b:section>
<b:section class='sidebar' id='magazine-right3' showaddelement='yes'>
<b:widget id='VideoBar12' locked='false' title='Barra de vídeo 2' type='VideoBar'/>
</b:section>
<div style='clear: both;'/>
</b:if>

Agora salve.




Para trocar as cores de seu novo widget, clique em personalizar

Aqui você troca as cores dos widgets