Free Blogger Template: Bloggerpress

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.

DEMO | DOWNLOAD

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!