31/03/2014

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.

20 comentários:

  1. *ooo* que tutorial perfeito e muito bem explicado Parabéns >.<
    Kisses || Inside

    ResponderExcluir
    Respostas
    1. Hihi muito obrigada Larý por gostar e comentar. *3*

      Excluir
  2. Nossa muito obrigado, eu estava a procura desse tutorial hoje mesmo kkk'

    ResponderExcluir
    Respostas
    1. Não foi nada Guy é um prazer ajudar. *3*

      Excluir
  3. PROBLEMAS DE SAÚDE? PFVR QUE NÃO SEJA GRAVE. N AGUENTO MAIS AS PESSOAS QUE CONHEÇO INDO PRO HOSPITAL T-T Como eu acho que vou falar pouca coisa demais e eu não gosto de falar pouca coisa aqui no BC pra senhorita Wendy, porque é esquisito, to até acostumada com comment grande meu djsikdjiskidj, enfim, meu cachorro faz 17 dias q ta desaparecido, e eu deixei meu irmão de 8 meses caí da minha cama. Não sabe o meu desespero, minha mãe e meu pai não estavam em casa só a empregada, gente eu chorei tanto to me sentindo a irmã mais horrível do mundo. Pronto agora ta um pouquinho maior djiskdjsij e eu gosto de conta as coisas pra ti, nem que seja em comentários, é legal aheuaheu

    Adorei o tutorial, já tinha visto blogs neste estilo mas nunca tinha encontrado o tuto, fica muito lindo, tipo eu faria um pra mim de icons ou ilustrações ou sei lá, mas eu não tenho photoshop aaaah que merda, eu odeio isso.

    Bjos~
    Panther Pink & Blue || pantherpinkandblue.blogspot.com

    ResponderExcluir
    Respostas
    1. Infelizmente....só foi uma gripe e alergia forte, nada de mais. Mas realmente essa ultima se3mana esta todo mundo ficando doente. Hushaus verdade, fica ate estranho quando é pequeno mas da mesma forma amo quando comenta. Puxa é mesmo? Já colocou cartazes de procura? Ajuda...puxa estou torcendo que ele apareça de coração, sei como é ter um bichinho desaparecido. O.O Nossa... imagino seu desespero e como se sente, mas foi um acidente não significa que seja uma péssima irmã, pelo ao contrario de ficar nervosa e preocupada já mostra que é uma grande irmã. Mas eu entendo isso já aconteceu comigo, estava tocando violão minha irmã na época tinha uns 6 meses, eu tocava violão para ela porque e3la gostava de ouvir, as vezes ate ficava puxando as cordas tentando tocar, mas não faço ideia como...mas ela puxo o braço do violão e acerto na testa dela...ela chorei de nervoso e medo mas que ela na hora... Mas depois ela começo a rir e querer o violão de novo, mas Belly não sabia que tinha um irmãozinho. *3* Hihi e eu amo ler elas, puxa me avisa quando estiver no face que assim conversamos mais. ^^ Mas obrigada por gostar de contas as coisas para mim, fico realmente feliz.

      Obrigada por gostar, eu também nunca tinha visto o tutorial achei no dia que estava fazendo o meu. Também acho esse modelinho muito lindo, é uma pena que não tenha...mas ainda tenho curiosidade faz aqueles lays lindos e não tem Photoshop? Me ensine essa magia? Mas Belly tem modelinhos portátil que nem pesam tanto quando os estaláveis e é praticamente a mesma coisa, espero que possa ter um dia.



      Excluir
  4. Wendy, que bom que você voltou garota <3, o big tutorial é muito bom *o* eu adorei como o seu layout ficou, bem simples e bem fofo. Dá preguiça de fazer um desses quando se vê só o tutorial explicando, mas parece ser bem fácil - eu acho. hsuahsuhauhsua, bem legal.

    Chu~
    KQ!

    ResponderExcluir
    Respostas
    1. Obrigada, é bom estar de volta. Obrigada por gostar, também achei que ficou simples mas era apenas para explicar como fazer, mas ate que ficou fofo; Hushasu entendo, entendo isso. Mas fiz explicado para facilitar ate mais aqueles que estão começando. É sim bem fácil de se fazer, executei ele em 15 minutinhos e claro que fazendo a postagem demoro bem mais, porque criei o layout primeiro e depois fui explicando o tutorial e fazendo para tirar o print, e ainda a pagina fecho e perdi tudo. Ou seja fiz o layout 3 vezes do inicio rsrs em 40 minutinhos. ^^ Mas obrigada por gostar da postagem.

      Excluir
  5. Obrigada! Aprendi. Adorei, você explica tudo direitinho.

    http://onlybangez.tk

    ResponderExcluir
    Respostas
    1. Não foi nada é um prazer ajudar. Hihi thanks

      Excluir
  6. Eu não uso blog e icons.
    Mas é uma ótima dica pra quem tá começando a criar um.
    Parabéns, bem útil mesmo com os minimos detalhes uahs

    Beijos | p-perfectsthings.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Verdade, espero que ajude quem procura. Obrigada por comentar.

      Excluir
  7. O tutorial está super bem explicado,parabéns!
    Quando precisar criar um layout galeria vou correr pra cá usar esse tutorial!

    Beijos :*
    http://myworld-of-crystal.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada Yasmin. :3
      Hihi tomara que seja logo então.

      Excluir
  8. Adorei o tutorial, nem tinha ideia de como fazer um lay assim. Beijos
    Brilliant Diamond

    ResponderExcluir
    Respostas
    1. Que bom que gostou, hehe agora já sabe aonde achar se precisar.

      Excluir
  9. Por favor respondam!
    No meu HTML não tem os códigos :/ Como faço?
    Amei o tutorial,entendi tudo direitinho...Mas quando fui fazer no meu blog,não apareceram os códigos!

    ResponderExcluir
    Respostas
    1. Nessa verifica se não tem espaço antes ou depois das palavras pesquisadas na barra. ^^

      Excluir
  10. Muito obrigada por partilhar esse grande tutorial <3 realmente foi de ajuda para mim e para várias pessoas! O layout que você fez ficou super lindo, além das imagens de Kuroshitsuji que ficaram super amorosas.
    t-fallen-angel.blogspot.pt

    ResponderExcluir
    Respostas
    1. Não foi nada é um prazer poder compartilhar o que sei e conheço. Fico feliz em saber disso. Ah obrigada, fiz bem simples já que era só para explicação, mas obrigada por gostar. As imagens realmente ficaram bastante lá. <3 Muito obrigada Karnipple.

      Excluir