Template Gamma Ray

Quando mudamos a cara do Insight, há cerca de um mês, tomamos como desafio sair um pouco da linha de templates que vínhamos confeccionando desde o início. Sentíamos uma enorme vontade de inovar. Tendo em vista toda tendência que ronda a web, montamos esse template que nasceu meio que sem querer e que agora apresentamos a você de uma forma inovadora também. Com você, o Template Gamma Ray.

DEMO | DOWNLOAD

Ele traz um visual moderno, interativo e sóbrio; elementos de página chamativos, inovadores e personalizados. Alguns elementos são acompanhados de tutoriais, que estão no final deste artigo. Vamos aos dados técnicos:

- Funciona corretamente no Google Chrome, IE7 (neste último apresenta pequenas falhas, mas no geral fica muito bom) e IE8, Firefox, Safari e Opera.

- Menu automático e Busca Auto Limpante

- Hack de resumo do post automático com imagem, já instalado.

- Data personalizada ao lado do título do post.

- Visual incomum nos títulos do post, sidebar e título do blog. Todos possuem um efeito que, ora mostra uma sombra, ora um relevo. Infelizmente, esse recurso só é compatível nas versões mais recentes de alguns navegadores.

- Slideshow com legenda, para exibição dos destaques do seu blog.


- Menu pronto para uso, necessitando somente inserir seus links.


- Links para compartilhamento em redes sociais já instalado.


Tutorial do Template Gamma Ray

Para o funcionamento correto do template é necessário seguir os passos abaixo:

Para configurar a data corretamente, no painel do seu blog vá em Configurações > Formatação e escolha o formato 29 Junho 2009. Veja o exemplo abaixo:

Para adicionar links na linkbar, no painel do seu blog vá em Layout > Elementos da página e clique em editar no elemento Lista de links e insira os seus. Veja o exemplo abaixo:

Para Adicionar imagens ao Slide, no painel do seu blog vá em Layout > Elementos da página e clique em editar no elemento Destaques. Em seguida insira o seguinte código:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Descrição</span>
</li>
<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Descrição</span>
</li>
<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Descrição</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

O que está em vermelho deve ser substituido pelos links indicados e a descrição da imagem. Sempre que quiser adicionar uma nova imagem no slide (deve medir 439x200 pixels ou mais), adicione antes de <div class="clear s3sliderImage"> o código:

<li class="s3sliderImage">
<img src="link-da-sua-imagem" />
<span>Descrição</span>
</li>

É isso aí , espero que tenha gostado. Caso algum tópico não tenha ficado claro, por favor, entre em contato conosco. Até.

UPDATE - 11/06/09

Para transformar a imagem num link direto para a página de um artigo específico, ao invés de colocar o código acima, coloque este:

<li class="s3sliderImage">

<a href="link-do-post">

<img src="link-da-sua-imagem" />

</a>
<span>Descrição</span>
</li>

UPDATE - 23/07/09

Devido a problemas no servidor dos arquivos Javascript, o template Gamma Ray não vinha funcionando corretamente, pedimos desculpas por este inconveniente e avisamos que o problema foi resolvido. Atualizamos os links para download.