Template DFMarine para Blogger

Template DFMarine para Blogger

Já faz algum tempo que visito o Deziner Folio, um site que disponibiliza material para quem trabalha com designer, de altíssima qualidade. Embora visitasse com frequência a página, não havia notado os templates criados pelos irmãos Navdeep e Naveen de Bangalore, Índia. Uma leitora aqui do Templates me chamou a atenção para o tema dfMarine, pelo qual me encantei imediatamente. Convertí o template para o Blogger e com autorização obtida pelo autor (Navdeep Raj, thank you!), estou disponibilizando agora para vocês.

Em tempo: hoje eu descobrí que este template já foi convertido para o Blogger mas, como de costume, não baixei esta outra versão e fiz a conversão ao meu modo. Assim, não posso afirmar nada sobre outras versões e o que vou explicar aqui está relacionado tão somente ao modo como eu convertí o template.

Demo | Download

Então senta que lá vem história...

Colocar links no menu superior


Para editar os links no menu superior ( no detalhe da imagem), procure este trecho do código do seu template (não é preciso expandir modelo de widget):

<div id='navi'>
<ul>
<li class='current_page_item'><a href='#'>
Home</a></li>
<li class='page_item page-item-2'><a href='#' title='About'>About</a></li>
<li class='page_item page-item-4'><a href='#' title='Gallery'>Gallery</a></li>
</ul>
</div>

Procedimento: substitua os # pelos links que desejar.

Para inserir os links sociais

Procure por este trecho:

<h2>Socialize</h2>
<div style='float:left'><a class='social rss' href='#'>Subscribe to RSS</a></div>
<div style='float:left'><a class='social tech' href='#'>Favorite</a></div>
<div><a class='social digg' href='#'>DIGG</a></div>

Procedimento: substitua os # pelos links respectivos.

Para inserir links abaixo do cabeçalho

Para inserir estes links basta ir em Layout/Modelo -> Adicionar Elemento de Página e criar uma lista de links (no máximo tres para cada espaço, ou desfigura o template!) e arrastar para os espaços correspondentes, como mostra a imagem abaixo:


Para colocar os links no Menu da Sidebar

Se você olhar o Demo deste template verá que na sidebar há um menu fixo muito interessante, obtido com o JQuery, chamado de menu accordian (acordeão ou sanfona), devido ao efeito produzido na demostração dos links. O script acompanha o pacote com o código do template, bem como todas as imagens utilizadas e eu aconselho mesmo que você hospede tanto o script quanto as imagens e use sua hospedagem, para não ter problemas futuros. Para quem não sabe, basta hospedar o script no Goolge Pages, por exemplo, e inserir o link obtido neste trecho que se encontra no código do template:

<script language='javascript' src='http://ariane1673.googlepages.com/accordian.js' type='text/javascript'/>

Substitua o meu link (em negrito) pelo link oferecido por sua hospedagem.

Para editar os links do menu, procure por estes trechos do código:

1º parte:

<!-- Inicio Menu Sidebar -->
<div class='df_menu_head header_highlight' id='test1-header'>Título</div>
<div class='df_menu_cont' id='test1-content' style='display:block;'>
<ul>
<li class='cat-item cat-item-3'><a href='#' title='#'>Link 1</a>
</li>
<li class='cat-item cat-item-1'><a href='#' title='#'>Link 2</a>
</li>
</ul>
</div>

Procedimento: coloque o título e os links onde estão indicados.

2º parte - formulário de Busca:

<!-- Search Coloque o endereço do seu blog -->
<div class='df_menu_head' id='test2-header'>Search</div>
<div class='df_menu_cont' id='test2-content'>
<form action='#' id='searchform' method='get'>
<div>
<input alt='search' id='s' name='s' type='text' value='Enter Search Here'/>
</div>
</form>
</div>
<!-- Final Search -->

Procedimento: coloque o link do seu blog onde está #

3º parte

Logo abaixo do código do formulário de busca você encontrará todo este trecho, onde os títulos, subtítulos e links devem ser inseridos conforme indicado:

<div class='df_menu_head' id='test3-header'>Título 2</div>
<div class='df_menu_cont' id='test3-content'>
<ul>
<li><a href='#' title='#'>Link 1</a></li>
</ul>
</div>
<div class='df_menu_head' id='test4-header'>Título 3</div>
<div class='df_menu_cont' id='test4-content'>
<ul>
<li class='linkcat' id='linkcat-2'><h2>Subtítulo</h2>
<ul>
<li><a href='#'>Link1</a></li>
<li><a href='#'>Link2</a></li>
<li><a href='#'>Link3</a></li>
<li><a href='#'>Link4</a></li>
<li><a href='#'>Link5</a></li>
<li><a href='#'>Link6</a></li>
<li><a href='#'>Link7</a></li>
</ul>
</li>
</ul>
</div>
<div class='df_menu_head' id='test5-header'>Título 4</div>
<div class='df_menu_cont' id='test5-content'>
<ul> <li><a href='#' title='#'>Link1</a></li>
<li><a href='#' title='#'>Link2</a></li>
<li><a href='#' title='#'>Link3</a></li>
<li><a href='#' title='#'>Link4</a></li>
</ul>
</div>
<div class='df_menu_head' id='test6-header'>Título 5</div>
<div class='df_menu_cont' id='test6-content'>
<center><a href='#'>Link1</a></center>
</div>

Configurando a data da postagem:

Para não desconfigurar a data da postagem, use este formato:

Para ativar o formulário de comentários abaixo do post, leia este artigo.

Para quem deseja mostrar a data em todas as postagens do mesmo dia (originalmente, o Blogger suprime a data em uma segunda postagem de um mesmo dia) recomendo a leitura deste artigo.

Espero que tenham compreendido e apreciem este belíssimo template!

PS. Óbviamente, é proibido retirar os créditos do template.