2 de nov de 2012

Colocar coluna extra abaixo das postagens do blog



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


6 comentários:

  1. não está dando certo, favor consertar o código.

    ResponderExcluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. como coloca esse gadget postagens relcaionadas?

    ResponderExcluir
  4. eu precisava era de uma coluna igual a tua em Posts Relacionados.http://bipsom.blogspot.pt/

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube