sexta-feira, 4 de maio de 2012

Como colocar uma barra de widgets ao lado do cabeçalho do Blogger

O cabeçalho do Blogger vem somente com a coluna do cabeçalho. Para que tem blog, é muito bom quando se tem a oportunidade de dividir essa coluna para colocar alguns widgets importantes, como a caixa de pesquisa do Blogger, ou anúncios Google. Além de ajudar estruturalmente o blog, fazendo com que sua aparencia melhore. Os visitantes vão passar a ter um acesso rápido aos widgets que você colocou lá encima.
Bom para ensinar como posicionar esses widgets do lado do cabeçario do seu blog, bolei o tutorial abaixo:
Para dividir o cabeçalho, iremos seguir alguns passos.


 1° Passo - Editando a largura e posição do cabeçalho:

Entre na sua conta do blogger, vá em “Modelo” => “Editar HTML” (antes baixe uma cópia de segurança)>>prosseguir. Sem marcar a caixinha “Expandir modelos de widgets”, encontre algo como: #header { . Logo depois dessa linha cole:

width:58%;float:left; ficando assim:
#header {width: 58%;float:left;
 A parte em vermelho, representa o alinhamento do cabeçalho, caso queira na direita coloque “right” no lugar de “left”, caso contrário, deixe como está.

2° Passo - Adicionando a coluna

 Para adicionar a coluna, encontre a linha ]]</b:skin> usando ctrl+F, e logo ANTES dela, cole o seguinte código:

 #column-header {width:38%;float:right;clear:both;}


 OBS.: o texto marcado, em vermelho, representa o alinhamento da coluna, portanto, se você colocou “left” no cabeçalho, deixe como está, caso contrário, mude o “right” para “left”.


3° Passo - Adicionando a seção

Agora só falta adicionar a seção para o funcionamento da coluna, para isso, encontre a linha: “ <div id='header-wrapper'> ”. Lodo DEPOIS dessa linha, cole o seguinte código:

 <b:section class='column-header' id='column-header' maxwidgets='2' showaddelement='yes'/>




O que está em vermelho, representa o número de gadgets que cabem na coluna, altere de acordo com a quantidade de widgets, que você quer colocar na coluna.


Depois é só Salvar o modelo.



 


4° Passo - Adicionando widgets
Vá em “Layout” => “Adicionar um Gadget”. Do lado do cabeçario você verá uma caixinha igual a que está na imagem abaixo, nessa caixinha você deverá adicionar o widget que você deseja e depois é só salvar :









obs.: Caso você não consiga achar o <div id='header-wrapper'>  é por que seu código é diferente. Se for diferente, click aqui para abrir outro tutorial que estará de acordo com seu código.

Assine Grátis Nosso Feed e Receba Todos os Dias, Nossas Atualizações!Digite seu endereço de e-mail:

Envie por FeedBurner

Ruth Aroucha Costa (editora)
Ruth Aroucha Costa Web Designer e estudante de Análise e Desenvolvimento de Sistemas

4 comentários:

  1. Obrigada pelo tutorial, muito útil!

    ResponderExcluir
    Respostas
    1. de nada amiga. obrigada você por acessar o internetmaisdicas. abraço viu!!

      Excluir
  2. Não consegui, pois não axei essa linha:
    div id='header-wrapper'

    ResponderExcluir
    Respostas
    1. amigo você não tah conseguindo pq seu código é diferente. entra nesse link aqui que esse é igual ao teu http://blog.internetmaisdicas.com/2012/08/dividir-cabecalho-do-blogger-em-dois.html#more

      Excluir

Dê sua opnião ou deixe uma frase!