O Bloggerpress surgiu da nossa vontade de criar um template no estilo magazine com o último post em destaque e o restante dividido em duas colunas, logo abaixo dele. Um conceito completamente novo para nós e que, satisfatoriamente, conseguimos.
Seu título vem da elegância presente nas suas cores e da sua estrutura, que inevitavelmente se assemelha aos temas pagos para Wordpress.
Dados Técnicos:
- Retirada da Navbar do Blogger;
- Blockquote personalizado;
- Footer com 3 colunas;
- Data personalizada nas páginas internas dos posts;
- Menu automático para feeds acima da sidebar;
- Slider para exibição de imagens abaixo do Header (vide tutorial no final do post);
- Hack de resumo do post automático com imagem, já instalado;
- Busca auto-limpante personalizada ao lado do título do blog;
- 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, títulos da Sidebar e do Footers do blog. Infelizmente esses efeitos não são visualizados no IE;
- Linkbar configurada para usar como menu acima do Header (vide tutorial no final do post);
- Links para compartilhamento em redes sociais já instalado.
Tutorial do Template Bloggerpress
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:
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 – As imagens do slider devem ter as seguintes dimensões: 150 x 100px. No painel do seu blog vá na aba Layout> Editar HTML pressione CTRL+F e procure por <div class='panel' id='panel_1'<. Siga o modelo abaixo para colocar suas próprias imagens e links, basta substituir o que está em vermelho pela referiência feita:
<div class='panel' id='panel_1'>
<div class='inside'>
<ul class='gallery'>
<li><a href='LINK'> <img alt='Image 1' src='URL-DA-SUA-IMAGEM'/> </a> </li>
<li> <a href='LINK'> <img alt='Image 2' src='URL-DA-SUA-IMAGEM'/> </a> </li>
<li> <a href='LINK'> <img alt='Image 3' src='URL-DA-SUA-IMAGEM'/> </a> </li>
<li> <a href='LINK'> <img alt='Image 4' src='URL-DA-SUA-IMAGEM'/> </a> </li>
</ul>
</div>
</div>
O mesmo procedimento deve ser feito no panel_2. Esperamos que gostem. Até!
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!
