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.
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:
<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.
<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.
