Cursos 24 Horas - Cursos 100% Online com Certificado

Dividindo o cabeçalho do Blogger em dois

8 Comentários Autor : Notícia e blog 05 outubro 2009
Aprenda agora como dividir seu cabeçalho, permitindo que possa ser adicionado dois Gadget ao invés de um apenas, você pode colocar em um, o seu slogan e em outro, uma caixa de busca veja abaixo como fazer:


1.Faça login no Blogger


2.Vá para "Layout"->"Editar HTML"


3.Pesquise pelo código abaixo no seu template utilizando as teclas Ctrl e F:
#header {
Apague o código anterior até a terminação( } uma chave fechada)
4.Agora no mesmo lugar que apagou insira o código abaixo:
#header {
width: 310px;
float: left;
margin:0 auto 10px;
text-align: center;
color:#000;
}
#header-derecha {
width: 310px;
float: right;
color: #000;
margin:0 auto 10px;
}

5.Agora pesquise pelo código abaixo:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Exemplo de cabeçalho (cabeçalho)' type='Header'/>
</b:section>
</div>

4.Se não encontrar como está no código acima pesquise por Cabeçalho e compare com o código acima para fazer a substituição pelo código abaixo:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Ejemplo de cabecera (cabecera)' type='Header'/>
</b:section>
<b:section class='header' id='header-derecha' showaddelement='yes'/>
</div>

5.Salve as alterações e vá para "Layout"->"Elementos da página" você verá seu cabeçalho como na imagem abaixo:

6.Pronto agora é só adicionar o Gadget que você quiser.


Referência: El Escaparatede Rosa

    8 Comentários

    Darcy Mendes disse...
    21 de outubro de 2009 10:53 #

    Eu estava exatamente procurando por isso, mas infelizmente não consegui implentar em meu blog.
    Está dando erro. Vou continuar tentando.

    LD disse...
    8 de novembro de 2009 17:02 #

    Sei que é muito chato quando temos mor trabalho para colocar um post tão bem elaborado e nenhum fdp posta!dsauhduhadh não que eu seja!hahaha olha eu usei e acho muito bom, to usando muitas dicas do seu site!Meus parabéns

    Notícia e blog disse...
    8 de novembro de 2009 17:20 #

    @LD , mas o importante é parar por uns e por outros que não comentam

    Notícia e blog disse...
    15 de novembro de 2009 18:15 #

    RT Correção @LD , mas o importante é não parar por uns e por outros que não comentam

    Anônimo disse...
    4 de novembro de 2010 14:17 #

    essa porra ta errado mais mesma assim eu consergui tem um erro ai nessa post da para arruma caso desse codigo que tiver que apagar para fucionar ai em baixo :



    .Header img, .Header #header-inner {
    -moz-border-radius: $(header.border.radius);
    -webkit-border-radius: $(header.border.radius);
    -goog-ms-border-radius: $(header.border.radius);
    border-radius: $(header.border.radius);



    da proxima vez post direito bem claro para todo mundo entender
    blz belo de um site so arruma ai so isso .

    Enzo Penharbel disse...
    27 de fevereiro de 2011 00:58 #

    @Darcy Mendes
    Bem,este código só funciona para os antigos modelos (2006) acabei de fazer um teste com um Blog aqui e funcionou.
    Lamentável.

    Angélica Mascaro disse...
    16 de junho de 2011 17:57 #

    Cade a imagem? nao ta mais aparecendo aqui no post :(

    Top Vlog disse...
    2 de agosto de 2011 18:42 #

    aqui nao tem essas porra --'

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.