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. 

Ver Demo

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:

<div class='window'>
<div class='image_reel'>
<a href='url do post 1'><img alt='titulo' src='url da imagem do banner 1'/></a>

<a href='url do post 2'><img alt='titulo' src='url da imagem do banner 2'/></a>

<a href='url do post 3'><img alt='titulo' src='url da imagem do banner 3'/></a>

<a href='url do post 4'><img alt='titulo' src='url da imagem do banner 4'/></a>
</div>
</div>

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:

<!-- Menu Esquerda -->

<ul class='left'>
<li><a href='url aqui'>Home</a></li>
<li><a href='url aqui'>Sobre</a></li>
<li><a href='url aqui'>Templates</a></li>
<li><a href='url aqui'>Contato</a></li>
</ul>

<!-- Menu Direita -->

<ul class='right'>
<li><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts</a></li>
<li><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments</a></li>
<li><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Feeds</a></li>
</ul>

<!-- Fim dos Menus -->
</div>

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

Para fazer o Download do Template Oggi em pasta zipada clique aqui

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:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 320;
summary_img = 170;
img_thumb_height = 110;
img_thumb_width = 98;
</script>

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 distribuição deste template só está autorizada ao site BTemplates e os créditos não devem ser removidos.