Free Blogger Template: Hybrid Gallery

Criar um template no estilo galeria não foi fácil, até porque não existem tutoriais [pelo menos não encontramos nenhum] ensinando como proceder. Então nós dissecamos, literalmente, todos templates desse estilo que encontramos pela internet para aprender. Foi bem cansativo, devo admitir, mas foi uma ótima experiência.

O Hybrid Gallery possui cores sóbrias e um desenho arrojado e ao mesmo tempo simples, e esse é o seu verdadeiro charme. Antes de apresentá-lo, gostaríamos de agradecer à Kelly Melissa que melhorou o javaScript para resumo de post automático para Blogger, transformando as imagens em links para o post.

DEMO | DOWNLOAD

Dados Técnicos:

- Retirada da Navbar do Blogger;

- Blockquote personalizado;

- Footer com 3 colunas;

- Espaço para banners 125x125 na sidebar (vide tutorial no final do post);

- Estilo galeria;

- Menu já instalado e editável somente na inserção de novos links (vide tutorial no final do post);

- Busca auto-limpante personalizada ao lado do menu;

- Funciona perfeitamente nas versões mais recentes de todos os navegadores, com exeção do IE, que não suporta CSS3;

- Uso de CSS3 para bordas arredondadas, efeito de sombra no título, descrição, links, menu, área do post na página principal, nos títulos da Sidebar e do Footer do blog. Infelizmente esses efeitos não são visualizados no IE;

- Links para compartilhamento em redes sociais já instalado.


Tutorial para o Template Hybrid Gallery

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

Adicionando banners de propaganda – Os banners devem ter o tamanho 125 por 125px. No painel do seu blog vá na aba Layout >Editar HTML pressione CTRL+F e procure por<ul id='advertise' >, substitua a imagem advertise.jpg pelo banner que deseja e o # pelo link desejado.

Adicionando novos links no menu – Vale lembrar que o menu é um atalho para o que há de mais importante no seu blog, então tente colocar poucos links, evite pôr os das suas redes sociais e coloque-os na sidebar, que ficara bem melhor. No painel do seu blog vá em Layout> Editar HTML pressione CTRL+F e procure por <ul id='navigation'>. Substitua somente o que está em vermelho:

<li> <a title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a title='About' href='URL_HERE'>About</a></li>
<li><a title='Contact' href='URL_HERE'>Contact</a></li>
<li><a title='Edit' href='URL_HERE'>Edit</a></li>

Para inserir um novo link basta repetir a última linha, sempre nessa ordem.

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!