Colocar três colunas abaixo da header do novo Blogger

 DEMO

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5gtf1oAPm7zXis32GY5P83jB0r6JkJlMm4fdlw-UgFpgBavqZsZx_y2Oy0zqspubDA2c4EY8nr5hmkgdMY8onDa8uqSkD9skbgrWGS0Sm7mMLOwbmnZVODAFzhhgj5HUXrbj4Xk3_tdoV/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrEx_HrsUFDctJKon_SlinwI0M7M-cdGp0pq3_yXRfyabRbyzEtH6WffYlxJOOdnaDoYjYqdLcnli0zZrGI_6cpvQI_h_cnVxgkC40jTVGnbweVqL53jadBpoUp6L8JPXiu19zVSVZlN5G/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGcJJNpMuAfttqiiM6C56DQ1f1td-1GghNnWcWyQ1aiEe8gAGJwyiPvrUqgoK-hvZubrFAQLTKc6fzJRbGEZjdkDZWUexfl7g0_C4lxnsD1waFBny1OGXIuxqArePceN0zcWWF1jf-J2W/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>