Big Tutorial: Layout estilo galeria

Yo bunnies, como vão? Peço um milhão de desculpas por sumir tanto tempo...estava com uns problemas de saúde, mas quero agradecer a minha amiga Roh por ter tomado conta do blog enquanto estive fora. Então muito obrigada miguxa, nem sei como agradecer. Eu prometi que compensaria assim que volta-se, e estou pensando em disponibilizar dois layouts free's de uma vez só. Quais já tenho guardado a algum tempo, o que acham? Para começar a pagar minha divida trago um Big tutorial, vou ensinar a criar um layout estilo galeria. Havia postado um layout desse estilo e vi que muitas pessoas gostaram, ate perguntaram como eu fiz. Achei legal ensinar, mas cadê a coragem? Quando iniciei essa postagem fiquei doente e acabou atrasando um pouco... mas aqui esta, espero que gostem e que compreendam.

 Ela ficou um tiquinho grande pois tentei deixar o máximo detalhado,  quem me mostrou como criar a base para esse layout foi minha amiga Scheila D. o resto eu adaptei da minha forma louca, mas houve detalhes que ficaria muito confuso explicar aqui, então acabei pegando um ou dois tutoriais de outro blog. Os créditos desse blog se encontra no final da postagem. Mas continuando...a postagem ficou um pouco extensa por mim detalhar, mas e muito fácil e rápido de fazer. Pode se criar um layout desse simples em coisa de 20 minutos ou menos.

Preparando a Base

Primeiramente separe um blog, que de preferência não tenha postagem para melhor trabalhar. Escolha o Modelo Simples, o primeiro que aparece na seleção de layouts do blogger, caso não saiba como colocar siga o mini tutorial abaixo:

Painel > Modelo > Personalizar > Modelos de Layout  > Modelo Branco

 Clique na imagem para visualizar melhor

Ainda dentro do Modelo (na pagina que se encontra), clique na opção Layout. Iremos arrumar os gadgets para ficar perfeitinho, irei ensinar um layout sem sidebar no momento para ficar mais fácil. Fica por conta de vocês fazerem com ou sem:

Clique na imagem para visualizar melhor

Ajuste as larguras do layout, deixe da largura que desejar. Eu vou deixar por 1060, já que gosto de layouts mais estreitos. Após isso clique em salvar, no botão laranja:

 Clique na imagem para visualizar melhor

Agora vamos arrumar o fundo do layout, ainda na pagina atual. Clique em Avançado > Plano de fundo e coloque e coloque no "Plano de fundo externo" a cor que deseja no fundo, e no "Plano de fundo principal" e "Plano de fundo do cabeçalho" transparente. Clique em Salvar as novas configurações:

 Clique na imagem para visualizar melhor

Arrumando o Cabeçalho

Ao concluir a e tapa acima seu Post Footer sumirá. Agora vá ate área de Layout; onde se encontra os gadgets. Nessa pagina clique na "Navbar" e remova depois clique no "Editar" na área de postagens e desmarque tudo. Em seguida clique em salvar!

Clique na imagem para visualizar melhor

Agora vamos remover o cabeçalho, vou mostrar três formas de fazer isso. Lembrando que só pode fazer uma dela, pois as outras opções ficaram invalidas:

Opção 1) É minha favorita e mais rápida, vá ate Modelo ⇒ Personalizar ⇒ Avançado ⇒Título do Blog. Na área abaixo que modifica o tamanho da fonte coloque 0px, como mostro na imagem abaixo e salve.

 Clique na imagem para visualizar melhor

Opção 2) Vá no HTML do blog e usando o atalho Ctrl+F procure por .Header h1 { abaixo dele se encontrará alguns códigos apague tudo ate a chave } e no lugar cole:

display: none;

Opção 3) Vá ate a área de Layout onde se encontra os gadgets, e abra o primeiro Gadget do topo chamado "Nome do seu Blog (Cabeçalho)". Vai aparecer duas barrinhas; uma para enviar a imagem e outra adicionar uma url, então vamos adicionar uma imagem transparente e pequena, mas lembrando que deve deixar a opção "em vez de título e descrição" marcada. Podem utilizar essa imagem: www

Clique na imagem para visualizar melhor

Removendo Links Internos

Agora vamos arrumar a navegação do blog. Para começar exclua todos os gadgets que estiverem no  footer do blog (rodapé do blog). Vá ate o HTML do blog e usando o atalho Ctrl+F procure por /* Accents, assim que encontra-lo remova todo código de sua propriedade ou seja ate a chave }. Isso remove as bolinhas que se encontra na área.

Clique na imagem para visualizar melhor

Agora vamos remover algumas do layout, como Attribuition, Assinar postagens (Atom) e Post Footer. Vou  mostrar duas formas de tirar o Attribuition uma excluindo e outra ocultando, só utilize um dos métodos.

Para retirar o Assinar postagens (Atom), vá ate o HTML e procure por ]]></b:skin>, acima dele cole: 

.feed-links{display:none !important;} 

Para remover o Post Footer, vá ate o  HTML e cima de ]]></b:skin>, cole: 

.post-footer {display: none; }

Opção 1) Ocultando Attribuition: Vá ate o HTML do blog e cole acima de ]]></b:skin>: 

#Attribution1 { clear: both; line-height: 2.5em;display: none;}

Opção 2) Excluindo Attribuition: Vá ate o HTML e procure por <b:section class='foot' id='footer-3' showaddelement='no'> " e troque o 'no' por 'yes'.  Um pouco abaixo disso, troque o "true" por "false". Depois disso vá ate o Layout e exclua o Gadget Attribuition: 

 Clique na imagem para visualizar melhor

Pois isso ira sumir os links que ficam no rodapé do blogger.

Título das postagem  (Opcional)

Agora vou mostrar esse método opcional, quando se posta em um modelo P-ics, deixa-se as postagens sem título, porém me perdia para encontrar nas pesquisas depois...assim fiz esse passo para mostrar como ocultar o título da postagem na frente do blog e dentro poder usar os títulos tranquilamente. Então vá ate seu HTML e procure por h3.post-title, .comments h4 { apague que estiver abaixo dele ate a chave  } e no lugar cole:

display:none;

Postagem de Teste

Após a etapa acima crie duas postagens de teste; apenas com imagens usando o código mais abaixo. Cole a url nas partes indicativas do código, caso precise colocar mais imagens é apenas repetir um abaixo do outro:

<a href="IMAGEM AQUI"><img border="0" src="IMAGEM AQUI" /></a>

Coloque no tamanho que desejar médio ou grande, depois de publicar as imagens vão aparecer na frente do blog meio desorganizadas e desalinhadas.  Mas isso é normal!


Alinhando as imagens

Ate esse ponto o layout ainda não estará galeria, então vamos aplicar isso agora nele e alinhar as imagens. Vai parecer um pouco grande mas é porque coloquei bem explicado, mas é bem rápido e pratico de fazer. Vá ate o HTML e procure por /* Posts, vamos trabalhar nessa área agora. Dentro dessa área procure pelos códigos que vou dizer abaixo:

1 - Procure por .date-header span {, remova os códigos relacionados a  ele ou seja ate a chave } e no lugar cole isso:

display: none;

2 - Agora procure por .main-inner {, remova os códigos abaixo dele e no lugar coloque:

padding-top: -20px;
padding-bottom: 20px;

3 -  Um pouco abaixo vai achar esse código .main-inner .column-center-inner {, remova também os códigos abaixo dele e no lugar coloque:

padding: 0 -20px;

4 - Procure por .main-inner .column-center-inner .section {, remova os códigos abaixo dele e no lugar coloque:

margin: 0 1em;

5 - Agora vamos adicionar em vez de remover,  abaixo da chave do código anterior cole isso:

.main-inner .column-center-outer {
margin-top: -20px;
}

6 - Agora procure por .post {, apague o que estiver entre as chaves e no lugar cole isso:

margin: 0 0 -3px 0;

7 - Agora procure por .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {, apague tudo ate a chave } e no lugar cole isso. Altere os valores das imagens se desejar:

padding: 6px;
border: 1px solid #bdbdbd;
background:#fff;
height:117px;
width:195px;

8 - Agora procure por .post-body img, .post-body .tr-caption-container {, apague o que se encontra entre as chaves e cole isso no lugar:

margin: 9px;

9 - Já estamos quase acabando, agora procure por .post-body .tr-caption-container img {, apague o que se encontra entre as chaves e cole isso no lugar:

padding: 0;
background: transparent;
border: none;

10 - Procure por .post-header {, mais uma vez apague o que estiver entre as chaves e coloque no lugar:

display: none;

11 - Agora o ultimo rs, procure por .post-footer {, apague o que estiver entre as chaves e cole no lugar:

.post-footer {

Agora salve!!! Depois desses passos seu layout já estará em estilo galeria, pode visualizar para conferir.

 Clique na imagem para visualizar melhor

Personalizando as imagens

Bom na imagem acima já coloquei personalizado, mas a do código que passei anteriormente não possui efeito apenas o fundo e um tamanho padrão das imagens. Agora vou mostrar como colocar um efeito hover nele. Para isso vá ate o HTML e procure por ]]></b:skin>, acima dele cole:

.post img {
opacity: 1.0;
filter:alpha(opacity=100);
-moz-opacity:1.0;
-webkit-transition-duration: .50s;
}
.post img:hover {
opacity:0.80;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-webkit-filter: contrast(1.2);
-webkit-transition-duration: .50s;
}

Menu de navegação

Existe vários tipos de menus que pode se utilizar no layout, mas vou ensinar um padrão de topo. Para isso acesse esse tutorial: www ou www

 Clique na imagem para visualizar melhor

Últimos detalhes

Agora realmente estamos quase no final, vamos apenas arrumar os últimos detalhes. Para começar vamos arrumar colocar o  tooltip. Para quem não sabe e um balãozinho que aparece com texto quando passamos por cima de algum link ou imagem linkada. Eu não vou postar o tutorial aqui deixarei o link, depois de executarem, retornem aqui para próxima etapa. Efeito tooltip no blog: www

 Clique na imagem para visualizar melhor

Vamos agora colocar uma barra de rolagem personalizada para dar um charme a mais no layout. Assim feito ficara como na imagem abaixo. Para isso acesse esse tutorial: www

Essa parte é opcional, mas acho que fica muito mais fofo com barra de rolagem infinita. Para adicionar basta ir ao HTML procurar por </head> e acima dele colar esse código:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/><script src='http://static.tumblr.com/0xqvkot/sqymptu8c/infinite.js' type='text/javascript'> </script>

Se preferir pode colocar uma imagem de subir ao topo, fica bem legal e facilita o mecanismo de navegação do blog para o leitor. Ainda mais se tiver muitas imagens, para isso basta usar o código abaixo colando dentro um Gadget Java Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script><a href="javascript:;" id="scrollToTop"><img src="URL DA SETA" border="0"/></a>

Fica dificil adicionar um gadget de seguidores nesse layout, então se desejarem coloquem um botão de seguir, utilizando esse tutorial: www

Se no seu layout estiver com um espaço muito grande entre os posts e o menu, use esse tutorial para subir  o cabeçalho do blog: www

Agora prontinho seu layout esta pronto!!!

Criar esse modelo de layout é bem mais fácil do que o tradicional, precisa-se apenas ter um pouco de paciência para ler e executar. Mas o que importa é no final ver o resultado, não é? Para isso aqui esta o link para quem quer conferir melhor.

Preview: www

Se desejarem também podem fazer modelos galeria com sidebar, basta ir em Modelos e adicionar uma coluna, deixando a transparente no Avançado. Depois altere a largura novamente. Após isso crie um código class para por os códigos da sidebar, salve e vá novamente no Avançado e coloque todas as opções como texto, link e etc como transparente. Talvez futuramente eu faça um tutorial explicando melhor, apesar de ser bem fácil de fazer.

Créditos: Scheila D. - Chá com Anjos.

Desculpem me se estiver com muitos erros de Português, amanha eu corrijo.