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

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

DOWNMLOAD 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”

Detalhes 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

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:

• 
  
  http://1.bp.blogspot.com/_DCJ4PAWLOdE/S7SWSBVeGRI/AAAAAAAAD98/7LmH7OwQwLk/s320/v.jpg
  " title="pic" class="fancybox" rel="group"> http://4.bp.blogspot.com/_DCJ4PAWLOdE/S7On4RLZoII/AAAAAAAAD7A/oK9BBVaJVEc/s320/tumb2.jpg"alt="demo" />
  
  

Repare que entre as tags

> e

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.

Benvindo ao meu blog. 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.

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.

Volte sempre. 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.

Sobre o Blog

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

http://demonovoestilo.blogspot.com/p/about-this-blog.html">mais..." />

Trabalhos Recentes

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

http://demonovoestilo.blogspot.com">mais..." />

Serviços

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

http://demonovoestilo.blogspot.com/p/services.html">mais..." />

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 peloFormulário de Contato ou por email e a gente pode combinar. Claro que o serviço será cobrado.

Atualizado 25/07/2010 e já foi devidamente corrigido.

Download XML
http://www.4shared.com/document/G3mxqwDG/ClassicStyle2010.html

Download psta zipada
http://www.4shared.com/account/file/rDWKWYqO/ClassicTemplate2010.html

Leia Mais

As Musas da Mafiadofunk.com

As Musas da Mafiadofunk.com

As Musas da Mafia do Funk.com

Clique na foto e veja um Slides show de bola das Funkeiras ousadas da mafiadofunk.com

Clique na foto e veja todas As Musas da

Mafia do Funk.com desfilando em roupa prvocantes que mexem com a nossa IMAGINAÇÃO.

Isabel a Tiazinha Musa da Mafiadofunk.com

TIAZINHA Nova Musa do Mez de Junho na frente puxando o bonde

As Musas da Mafia do Funk.com

Leia Mais

integração Adsense agora mais fácil com o guia Monetize Blogger

integração Adsense agora mais fácil com o guia Monetize Blogger

Você já notou o novo "rentabilizar" a aba no topo do seu painel do Blogger?

Esta nova seção de painéis nosso Blogger torna mais fácil a integração do Google Adsense em nossos blogs e ver o quanto nossos blogs estão ganhando.


do programa Google Adsense é uma solução simples que muitos blogueiros utilizam para monetizar seus sites. Por algum tempo, Blogger fizeram fácil para nós incluir anúncios do AdSense na barra lateral (como um elemento de página) e cerca de posts (como uma opção na> seção Page Layout Elements, quando você clica no link "Editar" para suas postagens no blog).

Se você já tiver configurado o Adsense em seu blog, adicionando um elemento de página do Adsense para o layout, ou permitir que os anúncios entre os posts, clicando na guia Monetize você será capaz de ver as estatísticas do seu salário, como este:

Nesta página, há também links para visualizar o seu Histórico de Pagamentos Adsense relatórios, receitas e mudar a conta associada a este blog particular. Você também pode escolher "remover os anúncios" de todos os aspectos do layout do seu Blogger com o clique de um botão.

Para aqueles que ainda não tenham optado por rentabilizar os seus sites com Adsense, ou que tenha configurado manualmente Adsense em seus modelos, você verá uma página assim:

Isto significa que a sua conta Adsense não tem sido associada a este blog. Não há relatos salário será exibida, mesmo se - como eu - você tem configurado manualmente Adsense, adicionando o JavaScript necessário para o seu modelo do Blogger código.

Para aqueles de você ainda pode adicionar o AdSense ao seu layout, basta escolher uma das opções de layout do anúncio, mais adequado às suas necessidades, clique anc o botão "Avançar". Pode ser necessário criar uma conta Adsense (ou associar uma conta já existente com o seu perfil do Blogger), após o que os seus anúncios será imediatamente colocado em seu layout. Então, quando você visita o guia Monetize, você será capaz de ver detalhes de seus ganhos do AdSense para os anúncios que você colocou no seu layout.

O que você precisa saber sobre monetização Adsense e guia Monetize novo

Apesar de ter feito Blogger é muito fácil para os membros para adicionar Adsense em seus blogs, nem todos os candidatos serão bem sucedidos na obtenção de sua conta Adsense própria.

Adsense analisa todos os candidatos ao programa antes de aceitar (ou recusar) uma nova conta. A fim de aplicar-se para uma conta do AdSense, você deve ter mais de 18 anos e tem um site que cumpra com as políticas do AdSense. Se você publicar qualquer conteúdo questionável em seu site, você realmente deve verificar estas políticas para garantir que seu site está em conformidade, antes de apresentar sua candidatura.

Além disso, os relatórios apresentados no separador Monetize só irá mostrar exibições de página e ganhos a partir do momento que você conectado a sua conta Adsense com este blog. Se você já tiver ligado a sua conta Adsense com o perfil do Blogger, parece que o "All Time" salário irá mostrar resultados a partir de hoje (um dos meus blogs Adsense utiliza um elemento de página, mas é apenas exibir ganhos a partir de hoje).

Um novo canal em sua conta Adsense para cada blog Blogger você monetize

Se você entrar em sua conta Adsense, você notará um novo canal foi criado para cada um de seus blogs, que contém a URL do seu blog no título.

A informação deste canal é o que é usado para apresentar os dados do salário para a seção Monetize de cada blog que você escreve.

Não vost uma solução ideal para todos ...

Estou muito feliz em ver que a equipe do Blogger como um esforço no sentido de integrar todos os serviços do Google, blogueiros usam atualmente. No entanto, estou um pouco desiludido com alguns aspectos deste novo recurso.

Para o meu próprio blog, eu adicionei Adsense manualmente, editando o modelo do Blogger e inserir os códigos de anúncios onde eu gostaria que eles sejam exibidos. Por esta razão, eu sou incapaz de ver todos os relatórios na guia Monetize. Na verdade, ele aparece como se eu não tiver definido Adsense em tudo.

Por outro lado, os ganhos apresentados na página Monetize incluirá apenas os resultados para este blog particular, e não os seus ganhos totais a partir de qualquer diferentes locais operados.

No entanto, estas são questões pequenas, e talvez estas questões não afetará a maioria dos outros usuários do Blogger.

O que você acha?

Será que este novo "Monetize" recurso painel tornar mais fácil para você conectar sua conta Adsense com seus blogs? Como você acha que esse recurso funciona tão longe?

Por favor, sinta-se livre para deixar os seus comentários e sugestões abaixo.

Leia Mais

Como usar a API do Google Font com o Blogger

Como usar a API do Google Font com o Blogger

fontes Web tornaram-se uma tendência de design web popular nos últimos meses. Como expliquei em um post anterior, o @ font-face técnica pode ser problemático quando aplicado a modelos do Blogger. Mas desde que o Google já lançou seu API fonte, somos capazes de mostrar fontes não-standard em nosso Blogger templates com facilidade!

Aqui está uma visão geral da API do Google Font e como podemos usar isso para melhorar nossos projetos baseados no Blogger.

Qual é a API fonte do Google?

O Google Font API permite-nos mostrar fontes de web em qualquer página web. Podemos optar por exibir o texto em uma variedade de qualidade open-source fontes web de alta para ambos e comercial de projetos pessoais. Nenhum sinal-up é necessária, e é realmente fácil de configurar.

O que podemos usar fontes?

Todas as fontes disponíveis para uso com a API estão listados na Fonte do Google Directory. Aqui está alguns exemplos de estilos que podemos usar:

No momento da escrita, há uma pequena seleção de fontes disponíveis para utilização através da API. Como a palavra espalha que o Google é pioneiro neste projeto, tenho certeza que muitos desenvolvedores de fonte e fundições vai começar a adicionar as variantes de código aberto para o diretório.

Como usar a API do Google Font

Usando Font Google API para exibir fontes não-padrão é muito fácil, e requer apenas alguns minutos para configurar.

Em primeiro lugar, você vai querer escolher o tipo de letra que você gostaria de usar a partir de fontes Google Directory. Clique sobre a fonte que você gostaria de usar para ser levado a uma página mostrando como o tipo de letra aparece em diferentes tamanhos.

Para este exemplo, vou usar Cantarell por Dave Crossland:

Agora clique no destaque "Obter o código" guia para gerar o código, precisamos adicionar ao nosso modelo do Blogger:

Copie o código embed para o clipboard ou colar em um editor de texto simples para uso posterior.

Agora vá para Design> Editar HTML no seu painel do Blogger, e uso do navegador função de busca para localizar a sua abertura tag. Cole o código imediatamente após esta linha.

Você também vai precisar adicionar uma barra antes do fechamento símbolo ">" no seu código, de modo que este:

Cantarell"rel =" stylesheet "type =" text / css ">

torna-se o seguinte:

Cantarell"rel =" stylesheet "type =" text / css "/>

Isso acontece porque o Blogger usa uma marcação HTML rigorosa e considera que a fonte original do código embed para ser uma tag de abertura, a barra "auto-fecha" da marca e permite que o modelo a ser devidamente analisado.

Por fim, salve o seu modelo.

Esta etapa adiciona o CSS necessário para incorporar as fontes que nós gostaríamos de usar em nosso projeto Blogger, que essas fontes não serão exibidos, a menos que especifique as áreas textual do layout, que deve ser mudado. Para fazer isso, nós precisamos adicionar estilo declarações adicionais ao parte do nosso modelo.

Por exemplo, se quisermos usar a fonte Cantarell para os títulos pós, poderíamos adicionar a seguinte linha logo abaixo do fechamento tag:

título h2.post (font-family: Cantarell, Sans Serif =;)

Eu listei algumas declarações de CSS você pode adicionar texto para várias áreas do modelo ao longo desta página(abre em uma nova aba / janela).

Depois de adicionar as declarações estilo apropriado para o seu projeto, visualizar o seu modelo para ver como as mudanças vão aparecer. Se tudo estiver bem, você pode proceder para salvar o seu modelo.

Por que isso é bom para os usuários do Blogger?

Esta nova API permite-nos ter um maior controle sobre os projetos de nossos modelos do Blogger, sem ter de se inscrever para um serviço web fontes ou se preocupar com políticas de domínio cruzado.

Todas as fontes disponíveis para utilização através da Font Google Directory são open source. Nós somos capazes de usá-los sem restrições em ambos os projetos pessoais e comerciais, sem a necessidade de solicitar uma licença.

Blogger template designers podem agora usar essas fontes para aumentar as suas máscaras e se certificar de que as fontes vão mostrar como se pretende na maioria dos browsers (na verdade, este era um problema que me impediu de web, incluindo fontes no meu próprios projetos até agora!).

Gostaria também de saber se a fonte API será integrado no novo modelo do Blogger designer nos próximos meses ...?

Mais informações sobre a fonte da API do Google

Neste post, eu expliquei apenas o básico da incorporação de fontes na Web com fonte do Google API. Eis alguns recursos úteis que você pode gostar de procurar mais informações:

• Google Font home page API
• Começando com a API fonte
• Google Web Fonts FAQ
• Como usar a nova API do Google Font (DesignShack)

O que você acha?

Você estará usando a API do Google Font para adicionar fontes novas para o seu web designs baseados Blogger?Ou se você já estiver usando essas técnicas, você encontrará a implementação tão simples como se pretende?

Por favor, sinta-se livre para deixar os seus comentários e opiniões abaixo.

Leia Mais