23 de abr de 2009

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(http://2.bp.blogspot.com/_fN8wBWylUn8/THzjLMAHw9I/AAAAAAAACWQ/yBI9AaHfysk/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(http://2.bp.blogspot.com/_fN8wBWylUn8/TH0rY7jnx6I/AAAAAAAACXw/rCX_tcjFh-w/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(http://2.bp.blogspot.com/_fN8wBWylUn8/TH0quK5KIPI/AAAAAAAACXo/unzMhDZouho/s1600/4we.gif) no-repeat 4px;
  color: #5B79A3;
  border-bottom:1px dashed #5B79A3;
}




12 comentários:

  1. Elke, gratíssima!

    Como disse na minha mensagem, há mais ou menos 1 ano (aos 55 anos) criei um blogue durante a doença do meu marido que, graças à Deus, hoje está bem.Desde então tudo o que aprendi devo a você, Elke, e a Ariane do Templates Novo Blogger.

    Adoooro o meu blogue e nele instalei o menu em dropdown que vc ensinou e que é um dos meus orgulhos.

    Tomei a liberdade de lhe pedir ajuda em particular e não esperava tão boa acolhida pelo qual fico muito grata. Fico também muito honrada pela sua passagem naquelas páginas e vou renomear a trilha que postei hoje, com as músicas que mais gosto, com o seu nome.

    É a única forma que eu tenho de tentar retribuir tanto recebimento. Espero que vc não considere inadequado usar seu nome naquele post.

    Muito agradecida, novamente.

    Um grande abraço.
    Rosa Maria Mazzuco

    ResponderExcluir
  2. Olá! Qunado eu faço isso as colunas ficam todas tortas!

    ResponderExcluir
  3. Nha...ja uma zona no meu codigo tentando fazer a 3ª colunaficar no ao lado da main, add esse codigo mas só isso nao ajudou "/
    A fofura tem alguma luz pra me dar ó.ò?

    ResponderExcluir
  4. Ok, "zerei" o meu rasculho (copicolei o html do original) e recomeçei do inicio.
    O resultado foi no minimo copico, pra nao dizer tragico.
    Iria enviar o link com a imagem mas absolutamente nada do Googlosfera que upa imagens esta com o botaozinho Pesquisar funcando ¬¬
    Eu iria enviar para vc com o unico intuito de vc usar como exemplo do que NAO se deve fazer enquanto estiver formatando o blog .-.

    ResponderExcluir
  5. oi,eu queria saber se podia fazer com 2 colunas !

    por favor responda!

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir
  7. ei bebê... ops! bebê?..rrsss, costume mais feio einh?...ou tô passando aqui pra vc me dá uma esplicação melhor sobre as configurações do widget, por não tá dando pra colocar cor. fica tudo como sendo o corpo do próprio blog, entende?, claro né...


    manda resposta por email jl.martinns@hotmail.com
    eu fiz num blog de test aqui: http://so-paratestes.blogspot.com/

    valeu!! pelo post
    obrigado

    ResponderExcluir
  8. oi, linda estou escrevendo pra retirar meu recado... ja conseguir dar cores as novas colunas...
    é que eu não havia percebido que que temos que adicionar o "#elk1..... " .. agora que me toquei
    valeu pelo pots

    grato
    eu consegui...
    bay,
    JEFF LOUIS

    ResponderExcluir
  9. muito bom Elke !! tá de parabéns, estava a procura desse tutorial e funcionou perfeitamente!


    muito grato.

    ResponderExcluir
  10. como sempre, você se destacando mais uma vez... bela postagem vou colocar no meu blog e claro jamais esquecerei de colocar a fonte com link, afinal o que seria dos blogueiros sem os seus mestres como você, bjs a você e toda sua família
    ah, elke eu estava esquecendo.
    bem que você poderia nos dar uma luz de como colocar esse slide de fundo no template, da uma olhada no modelo valentine do blog
    http://www.bloggermint.com/2011/02/valentine-blogger-template/
    não encontrei post algum na web de como colocar esta opção de slide dentro do template

    ResponderExcluir
  11. Não Consegui .eu uso o template simples e não fica por qe será? fiz tudo certinho !

    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