TUTORIAL BIG: LAYOUT ESTILO GALERIA

TUTORIAL BIG: LAYOUT ESTILO GALERIA

Quer Aprender? Continue Lendo!

Yo coelhos, Como vao? Peco hum 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 fóruns Estive. Entao Muito obrigada miguxa, Nem sei Como Agradecer. Eu prometi Opaco compensaria ASSIM Que Volta-se, e ESTOU Pensando los disponibilizar Dois layouts de UMA Vez Só é grátis. Cais Quais d'Orsay JÁ tenho guardado um sândalo tempo, o Opaco Acham? Para Comecar a Pagar Minha Divida trago hum  Big tutorial , Vou ensinar a CRIAR UM disposição Estilo galeria. Havia postado hum disposição Desse Estilo e vi Que muitas PESSOAS gostaram, comeu perguntaram Como eu Fiz. Ensinar legal ACHEI, mas Cade a Coragem? QUANDO ESSA iniciei postagem fiquei Doente e acabou atrasando hum ... mas Pouco Aqui esta, Espero Que gostem e Opaco compreendam.

 Ela ficou hum Tiquinho grande POIs tentei deixar o Máximo detalhado, QUEM me mostrou Como CRIAR um par de base ESSE FOI layout de minha amiga Scheila D. o resto eu adaptei da Minha forma louca, mas houve detalhes Opaco ficaria Muito Confuso explicar Aqui, entao acabei Pegando hum UO Dois tutoriais de Outro blogue. Créditos de Os Desse blogue se Encontra não da postagem final. Mas continuando ... uma postagem ficou hum Pouco extensa POR MIM detalhar, mas e Muito Fácil e Rápido de Fazer. PODE SE CRIAR UM disposição Desse Simples los Coisa de 20 Minutos UO Menos.

Preparando um Banco de

Primeiramente separe hum blog, Opaco de Preferência Localidade: Não tenha postagem parágrafo Melhor trabalhar. Escolha o  Modelo Simples , O Primeiro Que Aparece na Seleção de layouts fazer blogger, Caso nao Saiba Como colocar SIGA o mini-tutorial abaixo:

Painel  >  Modelo  >  Personalizar  >  Modelos de layout   >  Modelo Branco

 Panelinha na Imagem Para visualizar Melhor

AINDA Dentro fazer Modelo (na pagina Que se Encontra), clique na Opção  de layout . Iremos arrumar OS aparelhos parágrafo Ficar perfeitinho, IREI ensinar hum disposição SEM barra lateral não Momento parágrafo Ficar Mais Fácil. Fica POR Conta de voces fazerem com UO SEM :

Panelinha na Imagem Para visualizar Melhor

AJUSTE como larguras fazer layout, deixe da LARGURA that desejar. Eu Vou deixar POR 1060, JA Que Gosto de layouts Mais estreitos. APOS ISSO clique SALVAR em, nenhum laranja Botão:

 Panelinha na Imagem Para visualizar Melhor

Agora Vamos arrumar o Fundo fazer layout, AINDA na pagina Atual. Camarilha los Avançado  >  Plano de Fundo e coloque e coloque no " Plano de Fundo Externo "A Cor Que da deseja sem Fundo, e não" Plano de Fundo principais "e" Plano de Fundo fazer Cabeçalho "transparente. Camarilha los SALVAR como configurações Novas:

 Panelinha na Imagem Para visualizar Melhor

Arrumando o Cabeçalho 

Ao concluir ae tapa Acima Seu Post Footer sumirá. Agora O Vá comeu área de layout; ONDE SE Encontra aparelhos OS. Nessa pagina clique na "Navbar" e equipame DEPOIS camarilha não 'editar' na área de postagens e desmarque Tudo. Em Seguida clique SALVAR em!

Panelinha na Imagem Para visualizar Melhor

Agora Vamos removedor o Cabeçalho, Vou mostrar Três Formas de Fazer ISSO. Lembrando Que Só PODE UMA Fazer dela, POIs como OUTRAS opções ficaram invalidas:

Opção 1)  E Minha favorita e Mais Rápida, VA comeu Modelo ⇒ ⇒ Personalizar Avançado ⇒ Título do Blog. Na área abaixo Opaco modifica o tamanho da Fonte coloque  0px , Como mostro na Imagem abaixo e salve.

 Panelinha na Imagem Para visualizar Melhor

Opção 2)  VA Nenhuma HTML do blog e usando o atalho Ctrl + F Procure POR  . cabeçalho h1 {  abaixo DELE se encontrará alguns Códigos Apague Tudo comeu uma chave  }  e não Lugar cole:

display: none;

Opção 3)  O Vá comeu uma área de layout ONDE SE Encontra aparelhos de sistema operacional, e Abra O Primeiro Gadget fazer topo Chamado " Nome fazer Seu Blog (Cabeçalho) ". Duas de Vai aparecer barrinhas; UMA parágrafo enviar uma Imagem e outra adicionar UMA url, entao Vamos adicionar UMA Imagem transparente e Pequena, mas lembrando Opaco desen deixar uma Opção "em Vez de Título e DESCRIÇÃO" Marcada. PODEM utilizar ESSA Imagem: www 

Panelinha na Imagem Para visualizar Melhor

Removendo links Internos

Agora Vamos arrumar a Navegação do blogue. Para Comecar exclua de Todos os aparelhos estiverem that nenhum rodapé do blog (rodapé fazer blog). O Vá comeu o HTML do blog e usando o atalho Ctrl + F Procure POR  / * Acentos , ASSIM Que Encontra-lo equipame TODO Código de Propriedade SUA OU SEJA comeu uma chave  } . ISSO remover como bolinhas Opaco se Encontra na área.

Panelinha na Imagem Para visualizar Melhor

Agora em Vamos fazer algumas removedor de layout, Como Attribuition, postagens Assinar (Atom) e Pós rodapé. Vou mostrar Duas Formas de Tirar o Attribuition UMA excluindo e outra ocultando, a Só utilizar UM DOS MÉTODOS.

Para retirar o Assinar postagens (Atom), VA comeu o HTML e Procuradoria POR  ]]> </ b: skin> , cole Acima DELE: 

. Ligações de alimentação {display: ninguém importante;} 

Para o removedor de Pós rodapé, VA comeu o HTML e Cima de  ]]> </ b: skin> , cole: 

. Pós-footer {display: none; }

Opção 1)  Ocultando Attribuition: VA comeu o HTML que o blog e cole Acima de  ]]> </ b: skin> : 

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

Opção 2)  Excluindo Attribuition: VA comeu o HTML e Procuradoria POR <b:section class='foot' id='footer-3' showaddelement='no'> "e Troque o ' não 'POR' sim 'Um Pouco abaixo. Disso, Troque o " verdadeiro "por" falso ". DEPOIS Disso O Vá comeu o layout e exclua o Gadget Attribuition: 

 Panelinha na Imagem Para visualizar Melhor

Pois ISSO ira Sumir ligações OS Opaco FICAM nenhum rodapé fazer blogger.

Título das postagem   (Opcional)

Agora Vou mostrar ESSE Método opcional, when se posta los hum Modelo P-ics, Deixa-se como postagens sem título, porem me perdia parágrafo encontrar NAS Pesquisas DEPOIS ... ASSIM ESSE Fiz Passo parágrafo mostrar Como Ocultar o Título da postagem na Frente Dentro do blog e Poder USAR OS Títulos tranquilamente. Entao O Vá comeu Seu HTML e Procuradoria POR  h3.post-título, comentários h4 {.  Apague Opaco estiver abaixo DELE comeu uma chave   }  e não Lugar cole:

display: none;

Postagem de Teste

Apos uma Etapa Acima CRIE Duas postagens de teste; apenas com Imagens usando o Código Mais abaixo. Cole a  url  NAS contraditório indicativas fazer Código, Caso preciso colocar Mais Imagens E apenas repetir hum abaixo Do Outro:

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

Coloque qualquer tamanho that desejar do Médio grande UO, DEPOIS de PUBLICAR como Imagens Vao aparecer na Frente do blog Meio desorganizadas e desalinhadas. Mas ISSO E normal!


Alinhando como Imagens

Ate ESSE Ponto o esquema AINDA Localidade: Não estara galeria, entao Vamos aplicar ISSO ágora Nele e alinhar como Imagens. Vai Parecer hum Pouco grande mas E o Porque coloquei Bem explicado, mas e Bem Rápido e pratico de Fazer. O Vá comeu o HTML e Procuradoria POR  / * Mensagens , Vamos trabalhar nessa área ágora. Dentro Dessa área adquirir Pelos Códigos Que Vou DiZer abaixo:

1  - Procure POR  . palmo data-header { , equipame OS Códigos Relacionados um elemento OU SEJA comeu uma chave  }  e não Lugar cole isso:

display: none;

2  - Agora POR Procuradoria  principal-{interior. , equipame OS Códigos abaixo DELE e não coloque Lugar:

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

3  - Um Pouco abaixo Vai Achar ESSE Código  centro-column-interior {main-interior.. , equipame also OS Códigos abaixo DELE e não coloque Lugar:

padding: 0 20px-;

4  - Procure POR  principal centro-interior-column-interior section {... , equipame OS Códigos abaixo DELE e não coloque Lugar:

margin: 0 1em;

5  - Agora Vamos adicionar los Vez de removedor, abaixo da chave fazer Código anterior cole isso:

Centro coluna-exterior. Principal-interior. {
margin-top: 20px-;
}

6  - Agora Procure POR  . pós { , Apague o Opaco estiver empreendedorismo como chaves e No Lugar cole isso:

margin: 0 0-3px 0;

7  - Agora Procure POR  ..... img pós-corpo, corpo pós-tr-caption-container, img perfil, img Imagem,
.. BlogList img item de miniaturas { , Apague Tudo comeu uma chave  }  e não Lugar cole ISSO . Altere OS Valores das Imagens se desejar:

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

8  ... - Agora Procure POR img pós-corpo, corpo pós-tr-caption-container {, Apague o Que se Encontra empreendedorismo como chaves e cole ISSO não Lugar:

margin: 9px;

9  - JA ESTAMOS Quase acabando, ágora Procuradoria POR  .. pós-corpo img tr-caption-container { , Apague o Que se Encontra empreendedorismo como chaves e cole ISSO não Lugar:

padding: 0;
background: transparente;
border: none;

10  . - Procure POR pós-header {, Mais UMA Vez Apague o Opaco estiver empreendedorismo como Chaves e coloque nenhum Lugar:

display: none;

11  - Ágora O Último rs, Procuradoria POR pós-footer {, Apague o Opaco estiver empre como chaves e cole nenhum Lugar:.

. Pós-footer {

Agora salve! DEPOIS deusas Passos Seu esquema JÁ estara Galeria Em Estilo, PODE visualizar parágrafo conferir.

 Panelinha na Imagem Para visualizar Melhor

Personalização de como Imagens

BOM na Imagem Acima JÁ coloquei Personalizado, Más a fazer Código that passei Anteriormente Localidade: Não possui a efeito apenas o Fundo e hum tamanho Padrão Das Imagens. Agora Vou mostrar Como colocar Nele hum Efeito hover. Pará ISSO O Vá comeu o HTML e Procuradoria POR  ]]> </ b: skin> , cole Acima DELE:

. Pós img {
opacidade: 1,0;
filter: alpha (opacity = 100);
-Moz-opacity: 1.0;
-Webkit-transition-duration: 0,50 s;
}
. Pós img: hover {
opacidade: 0,80;
filter: alpha (opacity = 80);
-Moz-opacity: 0.80;
-Webkit-filtro: contraste (1,2);
-Webkit-transition-duration: 0,50 s;
}

Menu de Navegação

Existe Vários TIPOS de  menus  Opaco PODE se utilizar nenhum layout, mas Vou ensinar hum Padrão de topo. Pará ISSO ACESSEM ESSE tutorial:  www  UO  www

 Panelinha na Imagem Para visualizar Melhor

Ultimos detalhes

Agora Realmente ESTAMOS Quase nenhum, Vamos apenas arrumar OS ULTIMOS detalhes finais. Para Comecar Vamos arrumar colocar o   dica . Para QUEM SABE Localidade: Não e hum balãozinho Que Aparece com Texto when passamos POR Cima de sândalo ligação UO Imagem linkada. Eu Localidade: Não Vou POSTAR o tutorial Aqui deixarei o link, DEPOIS de executarem, retornem here for Próxima Etapa. Efeito Dica nenhum blog:  www

 Panelinha na Imagem Para visualizar Melhor

Vamos colocar ágora UMA barra de  rolagem personalizada  par dar hum charme a Mais nenhum layout. ASSIM Feito Ficara Como na Imagem abaixo. Pará ISSO ACESSEM ESSE tutorial:  www

Essa Parte E 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 'type =' text .com/0xqvkot/sqymptu8c/infinite.js / javascript '> </ script>

Se preferir colocar PODE UMA Imagem de subir ao Topo, fica bem legal e facilitador o Mecanismo de Navegação do Blog Para O Leitor. AINDA MAIS SE Tiver muitas Imagens, parágrafo ISSO basta USAR o Código abaixo colando Dentro hum 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 hum dispositivo de seguidores Nesse layout, entao se desejarem coloquem hum Botão de Seguir, utilizando ESSE tutorial:  www

Se não estiver com disposição Seu hum Espaço  de menu Muito Grande empre mensagens OS EO , use ESSE parágrafo tutorial subir o Cabeçalho do blog:  www

Agora prontinho Seu esquema ESTA pronto!

CRIAR ESSE Modelo de disposição e Bem Mais Fácil que Opaco o tradicional, Precisa-se apenas ter hum Pouco de Paciência parágrafo Ler e executar. Mas o Que importa E não Resultado ver o último, Nao E? Pará ISSO Aqui esta o link de parágrafo QUEM Quer conferir Melhor.

Preview:  www

Se desejarem also PODEM Fazer modelos galeria com barra lateral, basta ir los Modelos e adicionar UMA Coluna, Deixando um transparente não Avançado. DEPOIS ältere uma Novamente LARGURA. APOS ISSO CRIE UM classe Código parágrafos POR OS Códigos da barra lateral, salve e O Vá Novamente sem Avançado e coloque Todas como opções Como Texto, ligação 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 .