Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

14 setembro 2009

Template Impressões

template blogger

Template com menu horizontal e uma sidebar.
Para editar os links do menu horizontal, procure o seguinte trecho do código do template:

<div id='navigation'>
<ul>
<li class='home'><a href='http://riscoserasuras.blogspot.com/'>Home</a></li>
<li class='tab'><a href=''>Sobre</a></li>
<li class='tab'><a href=''>Imagens</a></li>
<li class='tab'><a href=''>Contato</a></li>
</ul>
Substitua a url em negrito pela url do seu blog e coloque as outras url's que desejar.

Obs: As imagens utilizadas neste template, por serem grandes, tornam o carregamento da página um tanto lento. Este problema pode ser contornado hospedando as imagens no seu próprio blog. 

1- Crie uma nova postagem e acrescente todas as imagens que acompanham o código do template. Deixe a imagem como grande:

2- Coloque todas as imagens neste post e salve o post como rascunho.

3- Clique em Editar HTML e copie a url da imagem:


4- Cole a url no local correspondente no código do template. Por exemplo, a imagem body background deve ser colocada em :

body {
 background:url(http://4.bp.blogspot.com/_YGpl3rQPSzI/SqXYfLn4NHI/AAAAAAAAN0g/4QIzInK6ssQ/s320/back.png)  repeat;

 Algumas imagens aparecem duas vezes, no formato png e gif e devem ser colocadas na ordem em que se apresentam. Por exemplo, em .top há dois backgrounds, desta maneira:

background: url(aqui coloque a imagem top 1)  no-repeat top center;
_background: url(aqui coloque a imagem top 2)  no-repeat bottom center;

Atenção! O link copiado será mais ou menos como o mostrado abaixo, no entanto a parte em vermelho deve ser apagada:

http: //3.bp.blogspot.com/_YGpl3rQPSzI/Sq63cwTvbZI/AAAAAAAAN7c/AYGWsJGOq1c/s1600-h/bottom+1.png

Edit 09/04/2010 - Resolvido o problema dos links no menu para IE7.
Para quem baixou o template antes desta data, a correção é feita deixando os códigos abaixo como se apresentam:


#nav{
position: relative;
margin: 0px auto 0;
padding: 0 0 0;
height:35px;
width: 960px;
line-height:2.0em;
}

#nav ul{
position: absolute;
z-index:1000;
margin: 0px 0px 0px;
padding: 0 0 0;}

Artigos Relacionados

23 comentários:

Anônimo disse...

Olá Ariane, mto lindo este template, mas tem um probleminha: os links do menu horizontal não funciona.
Veja no meu blog de testes: http://teste-ejm.blogspot.com/
Aproveita e dá uma visitinha no meu blog principal

Ariane disse...

blog-ejm o menu funciona perfeitamente, o que acontece é que você colocou mais links do que ele suporta, desconfigurando o template. Ele suporta até 4 links/botões, como no Demo.

Rafael Lutty disse...

Olá Ariane, eu me chamo Lutty, sou novo por aqui, gostaria antes de tudo de lhe parabenizar pelo lindo trabalho neste blog, me ajudou de uma forma incrivel eu estou começando na vida de "blogueiro". Desculpa eu ter me "intrometido" comentando algo nada a ver com o post, mas eu não sabia como entrar em contato com você então esse foi o jeito que eu arrumei ^^. Eu gostaria muito que você olhasse o meu blog, ficaria feliz apenas com a sua opnião.
http://onerditootaku.blogspot.com/

Unknown disse...

oi Ariane!!!
é preciosa a planilha, para um blog de pintura, poesia, cinema...isto é de artes
Beijinhos e que te encontres muito bem!!!

Hugo Cheng disse...

Ariane, eu coloquei este template, mas o espaço creme está cortado, e não dá pra ler os post. Veja como ficou:

http://asabedoriainterior.blogspot.com/

Obrigado
Hugo

Ariane disse...

Hugo que navegador você usa? Pelo Firefox vejo seu blog perfeitamente e testei o template no IE6, IE7 e IE8

Hugo Cheng disse...

Ariena eu uso firefox. A parte creme esta com parte comida, rsrsr. Achei este template muito bonito. Não sei o que fazer??? Obrigada pela gentileza.

Ariane disse...

Hugo se você fala daquele arredondado no final do template, ele é proposital

MamaNunes disse...

Oi teacher! Lindo,como sempre!
Vim babar um pouquinho e matar saudade!
Deixo beijos!

Anônimo disse...

Olá! bem, escolhi esse template lindissimo e estou com um probleminha "eu acho" o menu horizontal não funciona vc pode dar uma olhadinha pra mim...Obrigadinha e Parabéns pelo site!. bjokas*

http://mentenoescuro.blogspot.com/

Ariane disse...

ferqui por que você acha que não está funcionando? Fui no seu blog, cliquei nos links do menu e funcionou direitinho.

Anderson Meneses disse...

Ariane,
como faço para modifica os tópicos dos menus nesse template Impressões.
Exemplo:
Home - Dados Institucionais - Imagens - contato
e como faço para gravar conteúdos em cada um.

Agradeço desde já!

Anderson Meneses

Talita disse...

Oi, tem como explicar como funciona a parte de colar link na body background, pois hospedei as imagens no blog, mas estou com dificuldade nessa parte.

e se não for incomodar, como hospedar algo, tipo, em imagens no menu.

DéèH Rios disse...

Ariana, meu esse template e show, eu estou uzando ele no meu Blog, e ta simplesmente bunito, mais como eu ja li aqui, ele so abe 4 links no menu HOrizontal, se eu ir pelo codigo html, tem como eu colocar mais um Link...Obrigado desde já.

Juliana Spindola disse...

Olá, Ariane!
Adorei o template. Li os comentários e vi que alguns deles falam do tal menu horizontal. No meu também não está funcionando. No firefox funciona bem, porém no IE (acredito que o 8 é o que uso, pois fiz a atualização a poucos dias) ele não funciona. Não aparece com link...

Juliana Spindola disse...

Olá, Ariane!
Adorei o blog, mas estou com probleminhas com o menu horizontal também. Meu blog é julianaspindola.blogspot.com. No firefox aparece funcionando bem, porém no IE (8) não aparece com link...

tiago silva disse...

Também encontrei o problema do menu horizontal no IE 8. No firefox funciona normalmente. Uma coisa que notei é que no IE a imagem "top" parece estar por cima das imagens "home" e "tab", bloqueando assim o acesso aos links´, sedndo que no firefox essa sobreposição não acontece. ´´E possível inverter a ordem das imagens, isto é, trazer uma imagem pra frente?
A prova que isso funciona é que eu retirei as imagens top1 e top2 e os links passaram a funcionar, mesmo no IE.

Grato.

Ariane disse...

Juliana e Tiago aqui eu só notei o problema no IE7 e percebi que tem a ver com as imagens. Estou trabalhando para resolver o problema e em breve publicarei o template já corrigido.

poeminhasnainternet disse...

sou meio antigo no mundo dos blogs, mas essa linguagem nova me confunde, enfim, passo para agradecer o post ai de cima, como salvar imagem no próprio blogger, havia esquecido... brigado!

Tânia Marques disse...

Ariane, já é a segunda vez que utilizo um template teu. Tu tens um perfeito bom gosto. Depois dá uma passadinha lá na minha página a fim de visualizares se está tudo funcionando bem. Um beijão.
www.marquesiano.blogspot.com

Anônimo disse...

Nossa, esse template era o que eu procurava. Gostei muito, mesmo! Vc está de parabéns! Há poucos dias "descobri" seu blog e já aprendi várias coisas. Deus te abençoe sempre e ilumine sua mente com novas e brilhantes idéias!
Veja como ficou meu blog (folhethus.blogspot.com), ainda não comecei usá-lo, estou apenas preparando-o.
Abraços!

Unknown disse...

Oi, eu gostaria de conheçer um Template um pouco parecido com o do site dos Canais Telecine, bem básico e sem o botão "Leia mais", porque em meu blog principal, eu coloco as notícias em destaque em uma postagem só e depois, eu coloco um link com a noticia em outro blog, entende?

Agradeço se me mandar um Template assim ou me mostrar como fazer. Ficarei esperando uma resposta.

Isabela Sanva disse...

Olá :)
Nossa amei o template e estou usando no meu blog! Parabéns! Muito Lindo!

Postar um comentário

Os comentários são moderados.