Tweet Template Classic Style – Com Galeria de Fotos “Fancy JQuery”

Vi esse modelo  para site e  descobri que estava à disposição para free download. Não resisti em converte-lo para o Blogger. Ficou maravilhoso (sem modéstia nenhuma) não só pela funcionalidade, mas pela beleza do design minimalista. Cores neutras e espaço suficiente para não ofuscar a beleza das fotos.
A galeria Fancy JQuery apresenta um efeito lindo na ampliação das fotos além de funcionar como um slidshow fantástico. As fotos que aparecem ampliadas, podem ter o tamanho que você quiser. Muito bom!!!
Criei 7 páginas estáticas personalizadas para os links, nas quais não aparecem a galeria, nem a sidebar, dando assim um visual de site mesmo.

Veja o modelo DEMO .  Clic nas fotos para ver o efeito.

DEMO

DOWNLOAD XML

DOWNLOAD PASTA ZIPADA

Disponibilizei dois arquivos para download.  O primeiro é o código para instalação direta e o segundo é a pasta zipada que inclui as imagens utilizadas no layout (exceto fotos) mais os scripts e imagens da galeria Fancy. Escolha o que quiser, mas eu aconselho a salvar a pasta zipada, hospedar as imagens eu seu próprio site de preferencia, assim como os scripts…Assim, se der algum problema, você já tem tudo organizado.

Propriedades:

• Ícones para redes sociais no topo
• Menu de navegação “Dropdown”
• Galeria de fotos Fancy JQuery
• Espaço para “Boas vindas” Editável na página “Layout”
• Widget de Posts Relacionados no footer do post
• Páginas Estáticas Personalizadas (7)
• Footer editável na página “Layout”

Tutorial para instalação

Editar Menu:

No painel, clic em “layout” e depois em “Editar HTML”

Manter a caixa “Expandir modelos de widgets” DESMARCADA e procurar pelo trecho

<ul class=’dropdowns’><!—menu –>

Mude o endereço do link ( grifado em verde na imagem abaixo) e os nomes (se quiser) “Home”… “Gallery”, etc… (grifados em vermelho).

Detalhe importante:

Os links Retratos, Paisagens, Viagens, Arte e About me são dirigidos para as páginas estáticas.

Os links Cidades e Brasil são dirigidos a uma página de marcadores.

Esqueleto “Layout'’




 Editar as fotos da galeria



Clic no elemento indicado na imagem,  HTML/JavaScript e na caixa de edição que abrir repare no seguinte código:

<div id="gallery"><!-- gallery -->
<ul>
<li>

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FOXcEYM_KV6MMKnBqH3CFC2sRlNUPD6yyhb5FpK88_MHRmC7aX5A5ITpqJh5rZuqWPegvfz-8NSGRd0xHxhjlgGokfqnzYs_tlDszN_CRI_mQLUKHgE8kxTCXeFdM95HYFMAmkXpoPo/s320/v.jpg
" title="pic"  class="fancybox" rel="group"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQj0Wrp01HKq96kbMZKO6SUu1HY5kr8ByrBVK9rwpRaHl9VQKYF_kcN89P1NMGtHXg4JQmkZ0KwRYycZ4K5UY0PuzIdIw0PmAkwi7palNMb6lr-ElIs0zQXKZt8i2mIjwL1zD68fsXT_U/s320/tumb2.jpg" alt="demo" /></a>

</li>

Repare que entre as tags <li> e </li> estão os endereços das fotos hospedadas. O Primeiro endereço é da foto grande e o segundo, da foto pequena.
Esse trecho se repete oito vezes porque temos 8 fotos na galeria sendo que para cada quadradinho, usamos duas imagens, a grande e a pequena. Substitua todas as fotos.

Editar a mensagem de “Boas Vindas”



Clic em “Editar” como indicado na imagem e no box que abrir você verá o espaço determinado para o texto apropriado.

<div id="intro">
<p><span>Benvindo ao meu blog.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis risus ligula. Proin rhoncus felis at ipsum consequat eget commodo libero semper. Morbi sed purus arcu.</p>
</div>

Editar as colunas do footer



Clic em “Editar” e no box você verá os códigos e os espaço para editar os textos e links.

<div id="intro">
<p><span>Volte sempre.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis risus ligula. Proin rhoncus felis at ipsum consequat eget commodo libero semper. Morbi sed purus arcu.</p>
</div>
<div id="box_left">
<h3>Sobre o Blog</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus dolor hendrerit lacus egestas sollicitudin. Nullam pharetra commodo sem, sit amet mattis metus vestibulum at. Suspendisse in tellus metus. Ut lobortis gravida magna, et mollis nisl luctus et. Ut quis neque eros</p>
<a href="http://demonovoestilo.blogspot.com/p/about-this-blog.html"><img src="images/more.png" class="more" width="68" height="24" alt="mais..." /></a>
</div>
<div id="box_right">
<h3>Trabalhos Recentes</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus dolor hendrerit lacus egestas sollicitudin. Nullam pharetra commodo sem, sit amet mattis metus vestibulum at. Suspendisse in tellus metus. Ut lobortis gravida magna, et mollis nisl luctus et. Ut quis neque eros</p>
<a href="http://demonovoestilo.blogspot.com"><img src="images/more.png" class="more" width="68" height="24" alt="mais..." /></a>
</div>
<div id="box_middle">
<h3>Serviços</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus dolor hendrerit lacus egestas sollicitudin. Nullam pharetra commodo sem, sit amet mattis metus vestibulum at. Suspendisse in tellus metus. Ut lobortis gravida magna, et mollis nisl luctus et. Ut quis neque eros</p>
<a href="http://demonovoestilo.blogspot.com/p/services.html"><img src="images/more.png" class="more" width="68" height="24" alt="mais..." /></a>
</div>

Repare que as colunas são direcionadas para páginas estáticas e para a principal, quando o leitor clicar em “mais…”. Aí você pode mudar o texto também para “Leia mais..” por exemplo.

Editar Páginas Estáticas:


Para editar as páginas estáticas, você deve clicar na aba “Postagens” e depois “Editar Páginas”
Clicando na opção “Editar” (sobre a miniatura de página) vai abrir a caixa de postagens onde você poderá inserir imagens e textos apropriados. Depois clic em Visualizar e copie o endereço do Browser (navegador do seu computador) . Cole esse endereço nos links relacionados no menu e nas colunas do footer do template.
Ex 1: No menu
Galerias , Retratos, Cidades,  Brasil, Viagens, Arte,  About me
Ex2: No footer
Serviços, About this blog


Parece um pouco complicado, mas com atenção, paciência e muita vontade, você consegue instalar esse template lindo e ter um blog profissional, com cara de site.

Caso você queira que eu faça as instalações a adequações a sua necessidade, fale comigo pelo Formulário de Contato ou por email e a gente pode combinar. Claro que o serviço será cobrado.

Beijos da Mama

NOTA IMPORTANTE!
Como esse template foi convertido de um modelo para site, as configurações precisaram de  ajustes. O problema com os títulos da sidebar foram solucionados.
Se você instalou o Classic Style antes  desta data, 06 de Abril de 2010, por favor queria salve novamente o arquivo XML e reinstale. Fiquem a vontade para tirar dúvidas e para pedir ajuda!

DESCULPEM O TRANSTORNO