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.
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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8UP8lWro2tLdk0abu4aUfZHfOTNZxj8XcESChEQxhbARtztJc9LFD6Lpj26BXfaBH5lA0WtlkrEXeFB3zI2p7eYHnK-PAOqC8URmZQtQjbRk0-r5ghfQyG6fjJelVsSdyPmF0-qwgHdXs/"/><strong>Twitter</strong> Follow my tweets!</a></li>
<li><a href="your-link-here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6OAphJfAToD-M37QyqNPHwT2zzXUeIesN1_3oWxVfjR3EUuBtRyF7to6i42EDDMIxJ-RC-3Otv2fNvHDK3gliC3JrLpZAoNnVXM59T9bd-1ciwLFJNv40kvJc2OKPX9e08SKQh4MD_H47/"/><strong>Flickr</strong> Some photos of mine.</a></li>
<li><a href="your-link-here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXQCiIqVEk9dhxaQGc8Ao420UTXVoyS7zGRaSl9HmqfKIroq5S8ZMvkCMa5GwJkPUR83uBUZg7RZ9j89OLP3zbHOkwP-xyVthjJumYbcYGhdB8VArdUUNAp6iM1pxtDVXJICMgRGdwDCCu/"/><strong>Delicious</strong> What I've been reading.</a></li>
<li><a href="your-link-here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN7BEQjgv5Bmw2_sfCm5weDD2cTwiDyXikp0tpZSi9Pdbj3jPoPlRzD6JbXz3N1ogUEexURAlyGWHM6Ur37oHalHOHYi-GYz7_e0tc3tYKJ4RabHUChg0GqMvPeZr0aZ1O-WTKOaHCV0GY/"/><strong>Blogger</strong> What I'm writing.</a></li>
<li><a href="your-link-here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiELOe74j39BUTOmT0HPY4QQYSaYOmv6cUVPN2rfkX7BfhfgkuB2ju6TqQ6rq_nfT1NPvqfgLJKgL4E2b0OF3Yl4NcPF9TkyAmD_7AcujKqFaAhhg5HMNJDLddQ844oJMPYHQIgOSA8sh0/"/><strong>Behance</strong> My artworks.</a></li>
<li><a href="your-link-here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DDulUI0sZxBM6z3io-ufeLUedHPAv_jF7nuZ6jVKRC-8ohLObkowXxzppk-ZoY77kcOQ3FvsBtuh0e2zJ3FfsVlPoE_arg4HgKfUXuMx5D38qgpZ5KByKIps6JGbck3LCf2m-3XEwK5-/"/><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é!
A actualizar....
