Template Driftwood Mag

O resultado do Gamma Ray foi tão gratificante e inspirador que decidimos seguir nesta linha de templates. Dessa vez com cores mais suaves e um visual misturando o clássico e o moderno. Conheça agora o Driftwood Mag, um belo template que desenvolvemos para usuários do Blogger.

DEMO | DOWNLOAD

Com um visual, digamos, mais light, o Driftwood Mag traz consigo uma ótima funcionalidade e operabilidade e, desta vez, prezamos ainda mais a praticidade precisando somente que você o instale sem ter que ficar mexendo em códigos. O resultado foi positivo, sendo que, a única widget que deve ser montada por você é o slideshow, que é muito simples e está 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.

- Retirada da Navbar

- Menu de Feed automático e Busca Auto Limpante.

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

- Visual incomum nos títulos da sidebar, título e subtí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.

- Footer com 3 colunas


Driftwood Mag Tutorial

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 500x289 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>

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>
Até a próxima!

UPDATE - 17/07/09

Peço desculpa por ter me esquecido de colocar aqui como adicionar links na link bar, lá vai:

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: