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='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<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='"label-size label-size-" + 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>
