Como dividir o cabeçalho do blogger

Blogger

Eu, como já fui utilizador do Blogger, sempre estava em busca de alternativas para aumentar minhas possibilidades quando se trata de layout e widgets, pois como sabemos o Blogger relacionado ao gigante WordPress possui muito menos funcionalidades.

Eu sempre vejo em diversos blogs que acompanho um banner publicitário ou até mesmo algum gadget ao lado da logomarca (cabeçalho) e ao tentar fazer no blogger você poderá perceber que não será possível, assim você estará mais limitado em quesito layout.

Veja por exemplo o blog do nosso amigo Adelson (GerenciandoBlog), onde ao lado da logomarca pode-se fazer uma pesquisa dentro do site ou mesmo compartilhar através das redes sociais e RSS Feed.

TEM COMO DIVIDIR O CABEÇALHO?

Sim! Depois de alguma pesquisa encontrei alguns tutoriais espalhados pela internet a fora e compactei tudo em um único artigo para facilitar a sua vida como blogueiro. Para finalmente ter mais liberdade ao alterar o layout de seu site ou blog siga as instruções abaixo.

Acesse o painel de controle do Blogger e acesse o menu “Modelo”.Logo em seguida clique em “Editar HTML”.

Nota: irá aparecer uma mensagem lhe dizendo para não alterar o HTML do blog caso não tenha experiência. Caso esteja certo da alteração clique em prosseguir.

Selecione a opção “Expandir modelo de widgets” e depois pressione o atalho (CRTL + F)  e busque pelo código:

<b:sectionclass=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’/>

Ao encontrar faça as seguintes alterações:

  • No lugar do numeral um (1), você ira colocar o número de divisões que desejar.
  • No lugar onde esta escrito (no) substitua por (yes), sem os parênteses.

Ficará assim:

Depois procure pelo código:

Header1′ locked=’false’

Caso não encontre substitua a palavra ‘false’ por ‘true’. Se seu caso for a segunda opção você devera substituir o true por false. No meu caso este código já estava corretamente alterado para false.

Ficará assim:

Agora busque pelo código:

<div class=’header-outer’>

E substitua por:

<div class=’header-outer’>
<div id=’header-left’ style=’width:50%; float: left; margin:0; ‘>
<b:section class=’header-left’ id=’header-left’ preferred=’yes’style=’float:left;’/>
</div>
<div id=’header-right’ style=’width:50%; float: right; margin:0; ‘>
<b:section class=’header-right’ id=’header-right’ preferred=’yes’style=’float:right;’/>
</div>
<div style=’clear:both;’/>

Os valores Width: 50% equivale ao tamanho de cada divisão em porcentagem. No caso do meu blog utilizei os valores 70% para a primeira medida e 30% para a segunda, lembrando que sempre deverá totalizar 100%. Após as alterações, clique em salvar e pronto!

O resultado final deverá ser este:

Caso sua dúvida ainda reste alguma dúvida fique a vontadepara comentar abaixo que terei o PRAZER de responde-lo.

E VOCÊ? JÁ AUMENTOU SUAS POSSIBILIDADES NA ALTERAÇÃO DOLAYOUT DE SEU BLOG?

Sobre Arlindo Armando

Sou um adolescente de 17 anos, estudante. Em minhas horas vagas escrevo para o Blog na Carteira e para o Criar Blog. Gosto de praticar esportes, nomeadamente futebol, e fazer academia.
Adicionar a favoritos link permanente.

8 Comments

  1. Oi Arlindo, quando fui dividir o cabeçalho do meu blog foi muito difícil hein, mas quando alguém baixa um template da internet é muito mais difícil dividir pois tem outras tags.

    Abraços!!!

  2. Interessante, vou fazer isso no meu blog. Obrigado pela dica.

  3. Arlindo não tem nada a ver com o artigo mas só é um aviso, você coloco algum anúncio em cima da caixa de pesquisa, mas o anúncio não esta aparencendo fica um espaço em branco escrito que preciso de um plugin no navegador, eu não tenho esse plugin e muitos visitantes também não pode ter, então acho melhor você coloca outro anúncio pois você pode estar perdendo dinheiro.

    Abraços!!!

  4. Olá Arlindo.
    Muito bom o tutorial, uma dica quando for alterar algo no HTML de seu blog aconselho que realize um Download de Seu blog para não perde-lo ou ficar com erros depois, caso algo dê errado.
    Parabéns.

    Abraços
    Elias Quitntão

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *