2 de set de 2011

Colocar três colunas abaixo da header do novo Blogger



As vezes falta espaço no blog para tanta informação, tanto widget, gadget, firulinhas, coisinhas que queremos colocar. Então, porque não colocar 3 colunas abaixo da header do novo Blogger ? Pode dar um toque legal ao blog.



Vá até o Modelo de seu blog, clique em Editar modelo
  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


Agora procure por:  

]]></b:skin>  

 
 
Substitua então pelo código abaixo:


/*Colunas header-------------------------------------------------------*/

#header-wid-1 { width: 33%; text-align: left; margin: 2px 1px 2px 1px;float: left;}
#header-wid-2 { width: 32%;text-align: left;margin: 2px 2px 2px 2px;float: left;}
#header-wid-3 { width: 33%;text-align: left; margin: 2px 1px 2px 1px;float: right;}

#header-wid-1 .widget, #header-wid-2 .widget, #header-wid-3 .widget{
  background: #cc0000;
  color: #000;/*cor da letra*/
  line-height: 1px;
  padding: 2px;
  margin:0 auto;
height: 50px;
}

#header-wid-1 .widget-content, #header-wid-2 .widget-content, #header-wid-3  .widget-content {
border-top: none;
margin: 0 0 0;
padding:3px;
}
#header-wid-1 h2, #header-wid-2 h2, #header-wid-3 h2{/*títulos*/
text-shadow: 0.1em 0.1em 0.2em black;
display: none;
  margin: 2px 0 0 0;
  padding: 8px 0px;
  text-align: center;
  float: center;
  font-size: 22px;
  color:#fff;/*cor da letra*/
  text-shadow:0 1px 0 #f9f9f9;
}

#header-wid-1 ul, #header-wid-2 ul, #header-wid-3 ul{
  list-style:none;
  margin:2px 0 2px 0;
  padding: 2px  0 1px 0;
}

#header-wid-1 ul li a:link, #header-wid-2 ul li a:link, #header-wid-3 ul li a:link{/*link cinza*/
 background:url(http://2.bp.blogspot.com/_fN8wBWylUn8/THzjLMAHw9I/AAAAAAAACWQ/yBI9AaHfysk/s1600/5s.gif) no-repeat 2px;
  color:#000;/*cor da letra cinza claro*/
  border-bottom:1px dashed #000;/*borda cinza claro*/
  margin: 1px 0 1px 10px;
  padding: 1px 0 5px 12px;
  display:block;
}

#header-wid-1 ul li a:visited, #header-wid-2 ul li a:visited, #header-wid-3 ul li a:visited{ /*links visitados cinza escuro*/
background: url(http://2.bp.blogspot.com/_fN8wBWylUn8/TH0rY7jnx6I/AAAAAAAACXw/rCX_tcjFh-w/s1600/2z.gif) no-repeat 2px;
  color:#808080;/*cor da letra cinza escuro*/
  border-bottom:1px dashed #808080;/*borda cinza escuro*/
  margin: 2px 0 1px 3px;
  padding: 2px 0 5px 12px;
  display:block;
}

#header-wid-1 ul li a:hover, #header-wid-2 ul li a:hover, #header-wid-3 ul li a:hover{ /*ao passar o mouse em cima vermelho*/
background: url(http://2.bp.blogspot.com/_fN8wBWylUn8/TH0quK5KIPI/AAAAAAAACXo/unzMhDZouho/s1600/4we.gif) no-repeat 4px;
  color: #cc0000;
  border-bottom:1px dashed #cc0000;
}

#BlogArchive12_ArchiveMenu{
background: #eee;
color:#000;
font-size:12px;
font-weight: bold;
margin-left:0px;
margin-top:5px;
padding:10px;
width:100%;
}

]]></b:skin> 


Salve !

Agora procure por:

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='AQUI DEVERÁ ESTAR O NOME DE SEU BLOG (Cabeçalho)' type='Header'/>
</b:section>


Abaixo dele, cole este código abaixo.

<b:section class='header-wid-1' id='header-wid-1' maxwidgets='1' showaddelement='yes'>
<b:widget id='FollowByEmail12' locked='false' title='Seguir por email' type='FollowByEmail'/>
</b:section>

 <b:section class='header-wid-2' id='header-wid-2' maxwidgets='1' showaddelement='yes'>
<b:widget id='BlogArchive12' locked='false' title='Arquivo' type='BlogArchive'/>
</b:section>

<b:section class='header-wid-3' id='header-wid-3' maxwidgets='1' showaddelement='yes'>
<b:widget id='Label11' locked='false' title='Labels' type='Label'/>
</b:section>


Para ficar igualzinho ao exemplo, você precisará configurar o widget de arquivos e o de marcadores. 

Configurar o arquivo, vá até o layout.





Clique em "Editar" e depois marque em "Menu suspenso" como a imagem. Salve e pronto.




Para configurar os marcadores:

Clique em "Expandir modelos de widget.

Procure por este trecho abaixo: (para facilitar, procure pela primeira linha que está em azul)


<b:widget id='Label11' locked='false' title='Labels' type='Label'/>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>


Troque-o por este:



<b:widget id='Label11' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%; background: #eee; padding: 10px 0;'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

6 comentários:

  1. Tudo que precisava no momento \o/ \o/ \o/
    Valeu! Vou começar.
    Beiju, lindona!

    ResponderExcluir
  2. Não deu. Falhou ao salvar no 2º código. Também gostaria de ter as três coluna abaixo do cabeçalho ou páginas, para colocar widgets que eu quiser, entende? Fica para a próxima rs...
    Mas obrigada mesmo assim.
    Beijinho...

    ResponderExcluir
  3. cara o meu deu certinho achei seu blog sem querer pesquisando por ai foi o melhor respondeu tudo que eu estava procurando no momento fiz uma mistura das suas dicas e meu template modelo revista com menu 3 colunas marcadores em formato de tags esta ficando joia um abraço amigo e obrigado pelas dicas.

    ResponderExcluir
  4. Oi elke barros queria aprender a como converter xhml para html5 e como colocar slide na head do blog igual o do código blog agradeceria muito se você ensina

    ResponderExcluir
  5. Oi achei seu blog por acaso e amei...
    estou tendo dificuldades de instalar o template Deslize Gorjuss...
    Diz que a formatação é inadequada...
    coloquei o modelo de layout minima...
    Gostaria de saber como fazer? Quero dar uma mudada no blog que fiz para minha bebÊ

    bjs e obrigada

    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