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