Free Blogger Template: Massive Attack

Sabíamos o que queríamos no template, mas não tínhamos idéia de como fazê-lo. O curioso é que o desenrolar do Massive Attack só aconteceu depois de assistirmos ao primeiro episódio da nova temporada da série House, da qual somos fãs. É, minha gente, dr. House inspirou o Insight e, como não podia deixar de ser, o batizamos com o nome da banda que canta a música tema, Teardrop. Agora é esperar que você goste do resultado.

DEMO | DOWNLOAD

Dados técnicos:

- Retirada da Navbar do Blogger;

- Menu automático e Busca Auto Limpante;

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

- Slideshow com legenda, para exibição dos destaques do seu blog (vide tutorial no final do post);

-  O Crosscol ( Slider e About no template) só aparece na página inicial;

- Footer com 3 colunas;

- Linkbar configurada para usar como menu abaixo do Header (vide tutorial no final do post);

- Links para compartilhamento em redes sociais já instalado;

- Funciona perfeitamente nos navegadores Google Chrome, Firefox, Safari e Opera;

- Uso de CSS3 para transparência das cores do background da área do post, da Crosscol e do Footer. Infelizmente esses efeitos não são visualizados no IE;

Tutorial do Template Massive Attack

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

Adicionando Links no menu - 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:

Configurando o Slider - Para Adicionar imagens ao Slide, no painel do seu blog vá em Layout > Elementos da página e adicione uma gadget HTML/ JavaScript, em seguida insira o seguinte código:

<div id="s3slider">

<ul id="s3sliderContent">

<li class="s3sliderImage">
<img src="YOUR_IMAGE_HERE"/>

<span><strong><a href="POST_URL_HERE">TITLE</a></strong>

<p>TEXT</p>

</span>
</li>

<li class="s3sliderImage">
<img src="YOUR_IMAGE_HERE"/>

<span><strong><a href="POST_URL_HERE">TITLE</a></strong>

<p>TEXT</p>

</span>
</li>

<li class="s3sliderImage">
<img src="YOUR_IMAGE_HERE"/>

<span><strong><a href="POST_URL_HERE">TITLE</a></strong>

<p>TEXT</p>

</span>
</li>

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

<li class="s3sliderImage">
<img src="YOUR_IMAGE_HERE"/>

<span><strong><a href="POST_URL_HERE">TITLE</a></strong>

<p>TEXT</p>

</span>
</li>

Este post faz parte da Semana Blogger Templates, uma realização exclusiva do Insight. Mostre-nos o quanto você gostou comentando e compartilhando com seus amigos!