quinta-feira, 22 de julho de 2010

template oggi estilo manchete

Template Oggi

Às vezes, passeando pela net, um detalhe que me chama a atenção pode ser fonte de inspiração para criar um novo template. Foi o caso deste post  no Gem@ Blog, onde a Gema nos ensina a colocar este belo slide criado por Soh Tanaka. 


Slide

O slide é automático e o script necessário para fazê-lo funcionar já se encontra dentro do código html, não havendo necessidade de hospedagem. Tudo que é preciso fazer é criar banners de 790px x 286px, hospedar a imagem, copiar a url fornecida e colocar neste trecho do código html, onde está indicado em vermelho:



titulo

titulo

titulo

titulo



Onde está em verde, coloque a url do post para onde o banner deve apontar e onde está titulo, dê um titulo para a imagem.

Imagens

As imagens que compõem o template devem ser hospedadas por você, no seu servidor de preferência (pode ser ImageShack, Photobucket, TinyPic, etc) e a url  gerada (Direct Link) deve ser colocada onde está indicado no código. Por exemplo, a imagem crosscol.png - busque dentro do código do template (use Ctrl+F para facilitar a busca) este nome, que deve aparecer entre parênteses. Coloque dentro dos parênteses a url da imagem crosccol.png hospedada.

Ex:
Está assim no código do template:

#crosscol{
margin: 3px auto 0px;
height:auto;
background:url(crosscol.png)  repeat-x;
border: 1px solid #e0e0e0;
}

Deve ficar assim depois de hospedar a imagem e copiar a url gerada (Direct Link):

#crosscol{
margin: 3px auto 0px;
height:auto;
background:url(http://i43.tinypic.com/depklu.png)  repeat-x;
border: 1px solid #e0e0e0;
}

Os locais onde as imagens devem ser colocadas são (pela ordem que aparecem no código):

.post li, body, #crosscol, .sidebar a, .sidebar a:visited, .footer a, .footer a:visited e .paging, #showlink

Obs: O banner que segue junto com as outras imagens não deve ser hospedado, serve apenas como exemplo das medidas que devem ser utilizadas.

Na página inicial os posts apresentam-se resumidos automaticamente, bem como nas páginas dos marcadores e arquivos:

Página dos Marcadores

O menu horizontal é apropriado para receber o gadget Páginas. Crie as páginas que deseja exibir e arraste o gadget para o local indicado:


Acima do cabeçalho há um  pequeno menu à esquerda que também deve ser editado no código do template:












Note que o menu à direita é automático; não altere nenhum código dele.

Os créditos do ícone usado nos itens da sidebar são do Blog Perfume


E antes que me perguntem:

*Não é possível alterar as dimensões do slide
*Para alterar o texto do link Ler Mais, expanda os códigos do template e use o Ctrl+F para fazer a busca, como mostra a imagem abaixo:


Escreva Ler Mais na caixinha que se abre e clique em Próximo e automaticamente o trecho a ser modificado aparecerá destacado.

Para alterar as dimensões das imagens nos resumos, procure por:



altere o valor (110) onde está em vermelho para a altura e o valor (98) em verde para alterar a largura da miniatura da imagem. O valor na linha azul refere-se ao número de caracteres mostrados no resumo quando não há imagem a ser exibida e o número na linha roxa refere-se ao número de caracteres mostrados quando há imagem no resumo.

Não é possível retirar o slide ou os resumos sem quebrar completamente a estrutura do template original. Qualquer alteração  é por sua conta e risco :)

EDIT 25/03/10 : Havia um erro no código do template que já foi corrigido. Para os que fizeram o download do código antes desta data, por favor, procurem o seguinte trecho no código do template:

#main-wrapper{
float:left;
margin-left 6px;
width: 796px;}
#Blog1{float:left;margin:0px;padding: 0px;width:796px; clear:both;}

e troquem por:

#main-wrapper{
float:right;
margin-right: 6px;
width: 796px;}
#Blog1{float:left;margin:0px;padding: 0px;width:796px; clear:both;}

Para os que baixarem desta data em diante, o código já está ok.
Edit 31/03/10  - Correções no código para o navegador Internet Explore foram feitas.


Edit 10/04/10 - Respondendo a diversos comentários: a imagem do link Leia Mais é a mesma do Menu e deverá ser colocada em #showlink

A redistribuição deste template só está autorizada ao site BTemplates e os créditos não devem ser removidos.
Por:Ariane Marcadores: Feed.
Postado por às
Marcadores:

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)