Insight - Criatividade | Inovação

Nós já falamos muito sobre websites no estilo BCW (ou Vcard), já publicamos um tutorial ensinando como montar um no Photoshop e, para fecharmos o ano de 2009, disponibilizaremos neste post um template para Blogger no mesmo estilo, que particularmente acho bem interessante. Com vocês, The Antagonist.

Este template é ideal para que organizar todas informações sobre você (pessoal e/ou profissional). Tem o objetivo de reunir os links para todas suas páginas em redes sociais. Você ainda pode fazer uma página de contatos para que outras pessoas possam se comunicar com você e publicar algo sobre suas experiências num Blog ‘embutido’, tudo isso num só template e, claro, com muito estilo.

DEMO | DOWNLOAD

Dados Técnicos

- Retirada da navbar.

- Template com 1 coluna.

- Disponível em 4 cores diferentes: cinza, azul, rosa e laranja.

- Hack com resumo de artigos já instalado.

- Data personalizada ao lado do título do post.

- Hack de menu em abas instalado para dar o efeito característico do BCW (Business Card Website).

- Funciona satisfatoriamente nos navegadores IE7, IE8, não sendo possível visualizar efeitos que dão o charme à parte com o uso do CSS3, tais como: sombra no texto, bordas arredondadas em imagens e mudança de opacidade.

- Funciona perfeitamente nos navegadores Google Chrome, Safari e Firefox. De preferência nas versões mais atuais.

Tutorial do template The Antagonist

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

Configurando a data - no painel do seu blog vá em Configurações> Formatação e escolha o formato DD Mês Ano. Veja o exemplo abaixo:

Configurando a aba Network – no painel do seu blog vá em Layout> Elementos da página e adicione uma gadget HTML/ Javascript. No título escreva Network ou o nome que desejar. Em seguida, cole o código contido no arquivo network.txt no local devido. Para customizar seus links siga o esquema abaixo do que pode ser editado:

Azul: links dos ícones das redes sociais. Substitua pelo endereço das suas imagens.

Vermelho: os links das suas páginas pessoais. Substitua pelos endereços devidos.

Verde: Os nomes e descrições das respectivas páginas de redes sociais, mude-os de acordo.

CÓDIGO:

<div id="network">
<ul>
<li><a href="your-link-here"><img src="http://lh6.ggpht.com/_dKIQkAGa2xA/Sx4whgpNlbI/AAAAAAAAApQ/cJH-Wi76UaI/Twitter.png"/><strong>Twitter</strong> Follow my tweets!</a></li>

<li><a href="your-link-here"><img src="http://lh3.ggpht.com/_dKIQkAGa2xA/Sx4wmsRS46I/AAAAAAAAApU/mIzmFFL3hZQ/Flickr.png"/><strong>Flickr</strong> Some photos of mine.</a></li>

<li><a href="your-link-here"><img src="http://lh4.ggpht.com/_dKIQkAGa2xA/Sx4whYJQ8XI/AAAAAAAAApI/znRXJRP4WqA/Delicious.png"/><strong>Delicious</strong> What I've been reading.</a></li>

<li><a href="your-link-here"><img src="http://lh4.ggpht.com/_dKIQkAGa2xA/Sx4whM-h5UI/AAAAAAAAApE/8EmsyHQkX_0/Blogger.png"/><strong>Blogger</strong> What I'm writing.</a></li>

<li><a href="your-link-here"><img src="http://lh4.ggpht.com/_dKIQkAGa2xA/Sx4whNXVF0I/AAAAAAAAApA/7zMYuMwLRbQ/Behance.png"/><strong>Behance</strong> My artworks.</a></li>

<li><a href="your-link-here"><img src="http://lh6.ggpht.com/_dKIQkAGa2xA/Sx4whaY-evI/AAAAAAAAApM/5kQIPgVN8G8/Myspace.png"/><strong>Myspace</strong> Listen to me!</a></li>
</ul><div class="clear"></div></div>

Desabilitando a aba Blog – Caso você não tenha interesse em publicar artigos, não precisará da aba Blog. Para retirá-lá, vá no painel do seu blog, clique em Layout> Editar HTML marque Expandir modelos de widget, pressione CTRL+F e busque por <h2>Blog</h2>. Basta deletar este pequeno código e pronto!

Agradecimento especial ao Tim Van Damme, que é o criador deste estilo e ao Abu Farhan, desenvolvedor do script que permitiu que a criação deste template fosse realizado.

Até!

Continue lendo