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