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