Senin, 14 September 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_b-BnEwnh1UqJcD4eUL6yLbGMPHO06CYJJrrwK7FRvdlpGpb1_WpWQ2gxM2XMBGvf8jcnBAUj2F3vD9cNnf1Mz07tqyudqbHLIeW1bRqaM5_KLX16zY4Qee7p62YS-Hlh0UQW7B8gWyg/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: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr48xPieG12sBuzqWwfkk0XPFguiiAUHh5U7I9h01JllKKGJ6YLrkiphAxDhBDMxzpuO2tmc8HpzlSF__fixhqZkKO2tx8_K6kNlwUTxnZ-ao6Sdrlt2DqtSbhUmnj4NUS-LCwOj8Ago4//-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;}

0 komentar:

Posting Komentar