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;
}

»»Leia mais...

Expandindo cada widget do blog

Para ter widget do seu blog expandível como neste blog, primeiro copie o título do widetg que vc quer expandir. Agora vá até o HTML do seu blog e clique em "Expandir modelos de widget".


Agora em seu teclado, clique na tecla F3 e cole aí o título do widget

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.

Encontrou ? Bom, agora um pouco abaixo você verá um código assim:

<b:includable id='main'>


Cole abaixo dele este código:

<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>

*Preferindo uma imagem, troque o código em roxo por este código abaixo e coloque aí o endereço da imagem.

<img src="ENDEREÇO DA IMAGEM"/>

Agora um pouco mais abaixo, procure por este código:

<div class='widget-content'>

Agora embaixo dele cole este código abaixo.

<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

Agora, mais abaixo procure por este outro código:

<b:include name='quickedit'/>

E cole acima dele este código.

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>

Agora visualize, se deu tudo certo, é só salvar.

Exemplo de como o código deverá ficar

O código em preto é o que deverá ter no HTML do seu blog, e a parte em vermelho é a que voC~e irá inserir. Deverá ficar assim:

<b:widget id='Text1' locked='false' title='Do coração' type='Text'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<data:content/>
</div>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Obrigada Scaparate de Rosa

»»Leia mais...

Vídeo de um discurso inflamado ou, o que nós, blogueiros que ajudamos a blogar passamos com os leitores que não leem, rsrrsrs

Por favor, sem discursos inflamados dos politicamente corretos pela figura do discurso. Sem raivinha dos comentaristas e leitores, o fato é que o vídeo é muito bom e reflete um pouco do que nós, blogueiros que ajudamos a blogar passamos.

OU ASSISTA CLICANDO AQUI

»»Leia mais...

Estou morta de tristeza...

São 2:44 da manhã e estou morta de tristeza. Não tenho com quem conversar e nem com quem desabafar o rebuliço de emoções que está dentro de mim. O que sinto é um grande pesar, algo se partiu dentro de mim e sinto que é definitivo. O ser humano não presta mesmo, não tem dignidade, é o animal mais sorrateiro, imundo e vil que existe sobre a Terra. Não deve ser atoa que com a raça humana habitam seres imundos, fétidos e rasteiros como a barata, o mosquito e o rato.
Como pode a alegria, a tolerância, a humildade, a ingenuidade causarem tanta inveja e maledicência ? Como a alegria incomoda a ponto de afrontar as pessoas que não sabem o que é isso. Como pode a pobreza de espírito de gente (?) que se acha superior a outras por ter talvez, lido meia dúzia de livros a mais, por saber impostar a voz melhor e ter malícia e maldade para se colocar acima do outro apontando-lhe as fraquezas, e não se mostrando limpo e digno, pois isso sim, é o que vale para quem tem discernimento e algo que está cada dia mais em falta, vergonha na cara.

Pra mim de agora por diante é tolerância zero com quem pode me fazer mal, com quem pode me deixar nesse estado, com quem pode fazer eu me sentir assim, pequena e desacreditada. Não, não fizeram nada a mim pessoalmente, mas fizeram com um meu querido, com um meu que é caro, e a omissão por não tomar partido por tanto tempo e ter deixado que a galhofa e a humilhação se estendesse me fazem mal, muito mal. Me apequena ficar sobre o muro da covardia e da conveniência. Para você fim de jogo, para você o meu tempo acabou !

»»Leia mais...

Encomendas

Encomende o seu template AQUI

»»Leia mais...

BBB 9 ao vivo e de graça

Sem grana para assistir ao BBB 9 ? Sem TV para acompanhar a trama ?

»»Leia mais...

Retire a barra de postagens relacionadas do Blogger

Passe o mouse





Para retirar a barra de postagens de artigos relacionados do Blogger, vá até o HTML do blog, clique em "Expandir modelos de widgets".
----------------------------


NOME DO QUE VAI ABRIR
---------------------------

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.

Agora procure pelo código:

<b:include data='top' name='status-message'/>

e o apague, salve e veja o resultado

»»Leia mais...

Como colocar links nos menus dos meus templates

Como este tema é recorrente nos pedidos de ajuda aqui em meu blog, demorouuuuuuu mais saiu...

Pessoal lindinho do meu coraçãozinho puro, não é difícil colocar os links nos menus não, só leia com atenção e tenha paciência...

Depois que você baixou o template como já ensinei AQUI, dê uma olhadinha em seu template que já está instalado. Copie o que estiver escrito no menu e volte no local que vc baixou o template.

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.

Agora clique no teclado do seu computador na tecla:

F3

INTERNET EXPLORER

Veja que agora abriu uma janela como essa, para você que usa o Internet Explorer...


FIREFOX

E se vc usa o Firefox, abriu uma janela como essa abaixo:

Cole aí o código que você copiou do menu e faça a busca.

Tanto no Explorer quanto no Firefox a palavra será mostrada automaticamente.

Ao encontrar é só modificar da seguinte forma:

Troque onde estiver escrito:

LINK 1 pelo nome do que vc vai linkar

COLOQUE AQUI O ENDEREÇO DO SEU LINK 1 pelo endereço do que você vai linkar.

Proceda da mesma forma até preencher o menu.

Exemplo do código que você encontrará nos meus templates:

LINK 1

»»Leia mais...

Mudanças de ano novo

Ontem fui navegando, navegando e resolvi dar a xeretadinha básica no blog da Ariane, o Templates para o Novo Blogger quando me deparei com o código para este template. Nem tinha me tocado do que se tratava, quando li em meio a seus comentários a indicação dela para um blog que estava usando o código que ela desenvolveu, o Css Desvendado.

A M E I !!!!

E vc, o que achou do meu novo template ?

»»Leia mais...