Colocando 3 colunas abaixo da header no Blogger (imagem principal)

 

A Rosa Maria do blog Távola Lúdica escreveu-me pedindo essa dica, de como colocar 3 colunas logo abaixo do cabeçalho do blog, como neste modelo AQUI. Então aí vai.

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.

Vá até o HTML do seu blog e procure pelo seginte trecho:

<b:widget id='Header1' locked='true' title='AQUI ESTARÁ O NOME DE SEU BLOG (Cabeçalho)' type='Header'/>
</b:section></div>

Depois dele, cole o código abaixo e salve:

<div id='header-columna-contenedor'>
<div id='header1'>
<b:section class='header-column' id='elk1' preferred='yes' style='float:left;'>
<b:widget id='Label4' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
<div id='header2'>
<b:section class='header-column' id='elk2' preferred='yes' style='float:center;'>
<b:widget id='Label5' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
<div id='header3'>
<b:section class='header-column' id='elk3' preferred='yes' style='float:right;'>
<b:widget id='Label6' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Agora para costumizar esses novos widgets dar cor para o fundo, para a borda, para as letras, etc...


Proure pelo código:

/* Header --------------------------------------------- */

Agora cole este código abaixo acima dele

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

#header1 { width: 33%;text-align: left; margin: 2px 1px 2px 1px;float: left;}
#header2 { width: 33%;text-align: left;margin: 2px 2px 2px 4px;float: left;}
#header3 { width: 33%;text-align: left; margin: 2px 1px 2px 1px;float: right;}


#header1 .widget, #header2 .widget, #header3 .widget{
background: #FCF8F4;
  border: 1px dashed $bordercolor;/*cor da borda*/
  color: $sidebartextcolor;/*cor da letra*/
  line-height: 1px;
  padding: 10px;
  margin:0 auto;
}

#header1 .widget-content, #header2 .widget-content, #header3  .widget-content {
border:3px solid #A1B7D6;
border-top: none;
margin: 0 0 0;
padding:10px;
background: #fff;
}
#header1 h2, #header2 h2, #header3 h2{/*títulos*/
  font-weight: bold;
  background: #A1B7D6;
  margin: 2px 0 0 0;
  padding: 20px 0px;
  text-align: center;
  float: center;
  font-size: 14px;
  color:$sidebartextcolor;/*cor da letra*/
  text-shadow:0 1px 0 #f9f9f9;
}

#header1 ul, #header2 ul, #header3 ul{
  list-style:none;
  margin:2px 0 4px 0;
  padding:6px  0 4px 0;
}

#header1 ul li a:link, #header2 ul li a:link, #header3 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:#A2B8D7;/*cor da letra cinza claro*/
  border-bottom:1px dashed #cccccc;/*borda cinza claro*/
  margin: 12px 0 1px 10px;
  padding: 10px 0 5px 16px;
  display:block;
}

#header1 ul li a:visited, #header2 ul li a:visited, #header3 ul li a:visited{ /*links visitados ciza escuro*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrEx_HrsUFDctJKon_SlinwI0M7M-cdGp0pq3_yXRfyabRbyzEtH6WffYlxJOOdnaDoYjYqdLcnli0zZrGI_6cpvQI_h_cnVxgkC40jTVGnbweVqL53jadBpoUp6L8JPXiu19zVSVZlN5G/s1600/2z.gif) no-repeat 4px;
  color:#808080;/*cor da letra cinza escuro*/
  border-bottom:1px dashed #808080;/*borda cinza escuro*/
  margin: 12px 0 1px 12px;
  padding: 10px 0 5px 14px;
  display:block;
}

#header1 ul li a:hover, #header2 ul li a:hover, #header3 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: #5B79A3;
  border-bottom:1px dashed #5B79A3;
}