TOP NEWS

Inicio Leia antes de fazer seu pedido Faça sua encomenda Entre em contato Home Preços e Pacotes Torne-se parceiro do Essence Saiba o que você esta comprando Aprenda a fazer Freebies Downloads Image Map

Aqui você pode encomendar o layout que sempre sonhou para seu blog/site. Além de muitos downloads, tutoriais e goodies para seu photoshop.

www.flickr.com

Tutorial: Como colocar header mapeada no blog

Tutorial: Como colocar header mapeada no blog

Neste tutorial irei ensinar a vocês como colocar uma header mapeada no blog (blogger). Atualmente, a header mapeada esta esta cada vez mais presente nos layouts, sejam eles de blogs pessoais ou mesmo sites de resources e blogs de design. 


No próximo tutorial vocês verão como é fácil mapear uma header, de um modo simples e sem utilizar nenhum programa.


Este tutorial é direcionado aqueles que já sabem mapear a header, mas não conseguem a parte mais importante que é a colocar no seu blog/site.



Então, vamos lá.


1 - A primeira coisa a se fazer é baixar o modelo completo de seu blog.



Lembre-se de fazer isso toda a vez que for editar ou mexer no html de seu blog. Essa ferramente permite você de voltar ao layout anterior do seu blog. É de extrema importância, ja que nem sempre tudo dá certo quando se trata de html, e assim você não perderá seu antigo template.

2 - No html de seu blog, você irá procurar pela DIV da sua header. Calma, não precisa se assustar com esse nome, essa div cuida justamente do posicionamento de cada elemento dentro de seu blog. 

Aperte Ctrl + F , uma pequena guia de pesquisa irá abrir na sua pagina.
Procure por  <div id='header'>   ou  <div id='header-wrapper'>. Lembrando que, nem sempre essa DIV se apresenta com este nome, ele pode variar de acordo com o template, se não encontrar por este nome, procure por algo semelhante.

Tudo que estiver dentro dessa DIV será posicionado na sua header. 

Cole logo abaixo deste nome o código do seu mapeamento. 

3 - Clique me "visualizar" e veja se esta tudo certinho no layout do blog. Caso esteja tudo em ordem, cliquem em "Salvar modelo" e pronto. Sua header esta instalada e pronta para ser usada.

4 - Certas vezes pode aparecer a mensagem de erro do blogger. Isso quer dizer que alguma coisa esta fora do lugar no seu html. Verifique se a DIV da sua header esta "fechada".

OBS: Todos o códigos de html tem símbolos que indicam a abertura e fechamento de dado elemento. Com as DIV's não seria diferente. Quando você visualizar um codigo desta forma <div id=  saberá quem Div esta sendo aberta. E este aqui    </div>  indica que uma DIV esta sendo fechada. 

Verifique sua DIV tem o código de fechamento </div> abaixo do código de mapeamento. Se não estiver, adicione o código e tente visualizar a pagina mais uma vez. Caso der erro novamente, adicione mais um código de fechamento. 

Sua DIV deverá ficar assim:

 <div id='header'>
[Código de Mapeamento]

    </div> 
</div>





Paramos por aqui. Espero que tenham gostado do tutorial. Em breve voltarei com mais dicas para vocês. ^^


Beijos da Lena. ;*

8 comentários:

  1. Oi pessoal do Essence Layouts. Por favor, me ajudem!

    Eu tentei esse tutorial, deu tudo certo, a não ser o fato de, na parte superior do blog, o layout meio que "come" um pedaço do que está embaixo, como por exemplo o título do primeiro gadget e o título da primeira postagem. Por favor gente, estou desesperada, meu blog é muito importante pra mim, gostaria muita da ajuda de vocês pra saber como resolver isso.

    http://blogbycindy.blogspot.com

    Grata desde já!

    ResponderExcluir
  2. Oi Cindy. =D
    Eu visitei o seu blog, e não vi nada "cortado", você já resolveu o seu problema? Se não, seria mais fácil vc fazer um print do problema, hospedar e enviar o link por aqui. =D Beijos. ;*

    ResponderExcluir
  3. Oi, muito obrigada por responderem! =)
    Eu consegui sim, endireitei no outro dia. Assim, ele ainda continua "cortando" o que está embaixo, mas eu mexi no HTML do layout para fazer as colunas descerem um pouco pra não ficar com esse problema.
    Muito obrigada mesmo assim.

    ResponderExcluir
  4. O meu blogger é o modelo novo .. Onde clico pra baixar o modelo?? ;s

    ResponderExcluir
  5. Oi Isabella, para baixar o modelo no novo blogger você pode ir no seu blog > Modelo > Canto superior direito, em "Fazer backup/Restaurar" > Lá terá duas opções, a primeira é fazer o download do modelo completo, e a segunda é para carregar um novo modelo para o seu blog. Ai você já sabe o que escolher, é só clicar e escolher um local para salvar seu modelo. =3
    Beijos. ;*

    ResponderExcluir
  6. oiii
    não sei mto bem o que é mapear.. mas posso dizer que consegui colocar os botons de social pluggins mais ou menos onde eu queria!

    Obrigada pelas dicas, e aguardo os proximos posts... :)

    ResponderExcluir
  7. Não consegui fazer :( Achei <div mas quando coloco o código de mapeamento e vou visualizar o Blog, fica certo mas o nome do blog fica logo em cima ..

    ResponderExcluir