Galeria de Postagens Recentes

  • 12:57
  • 02 outubro 2016


Olá meus amigos, andei sumida por alguns dias aqui né... Então eu andei estudando sobre Java Script, para melhora meus desenvolvimentos dos layouts. Ainda sou novata nesse assunto mas para minha alegria estou conseguindo compreender os códigos. Por isso para comemorar essa conquista vou compartilhar com vocês minha primeira galeria de imagens, eu não sabia qual seria o resultado, e no final gostei muito do efeito que ele faz.

Eu nomeei os códigos como "adorável design" e "ad" por ser meu blog de layouts, já o numero "1" representa meu primeiro teste. Irei testar mais outros tipos de efeitos. Agora sem mais delongas, vamos ao tutorial!

1. Acima de ]]></b:skin> cole o seguinte código.

/* Galeria
----------------------------------------------- */
.total {
width: 100%;
margin: 0 auto;
padding: 10px 0px 10px 0px;
text-align: center;
}
/* Base */
ad1.adoraveldesign1 {
position: relative;
display: inline-block;
margin: 10px 5px;
width: 190px;
height: 180px;
overflow: hidden;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ad1.adoraveldesign1 ad2 {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
-webkit-transform-origin: center 0;
transform-origin: center 0;
}
/* Img */
ad1.adoraveldesign1 * {
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
width: 100%;
height: 180px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: block;
opacity: 1;
box-sizing: border-box;
}
ad1.adoraveldesign1 img {
opacity: 0.25;
max-width: 100%;
position: relative;
top: 0;
left: 0;
}
ad1.adoraveldesign1:hover img,
ad1.adoraveldesign1.hover img {
opacity: 1;
}
/* H2 */
ad1.adoraveldesign1 a {
position: absolute;
width: 100%;
padding: 50px 20px;
color: #000;
font-size: 20px;
font-family: sans-serif;
text-align: center;
outline: 1px solid #000;
outline-offset: -8px;
text-shadow: 1px 1px #fff;
text-decoration:none;
}
ad1.adoraveldesign1 ad2 h2 {
margin: 0 auto;
background: rgba(255, 255, 255, 0.68);
}
/* Bordas */
ad1.adoraveldesign1 ad2:before,
ad1.adoraveldesign1 ad2:after {
}
ad1.adoraveldesign1 ad2:before {
top: 0;
}
ad1.adoraveldesign1 ad2:after {
bottom: 0;
}
/* Hover */
ad1.adoraveldesign1:hover ad2,
ad1.adoraveldesign1.hover ad2 {
transform: translateY(-45%) scale(0.9);
}
/* Leia Mais */
.leia {
display: inline-block;
margin-bottom: 10px;
padding: 4px 13px;
font-weight: bold;
line-height: 70px;
font-size: 12px;
color: rgba(255, 255, 255, 0)!important;
text-shadow: none!important;
text-decoration:none;
}
.leia:hover {
background-color: #000;
color: #fff!important;
outline: 1px solid #fff;
outline-offset: -8px;
}

2. Agora procure por </head> e abaixo dele cole o script abaixo.

<script src='http://static.tumblr.com/pfobaef/7proea6dg/galeria_adoravel_design_1.js' type='text/javascript'/>
<script>
imgr = new Array();
imgr[0] = &quot;http://static.tumblr.com/pfobaef/qtOoea4pk/sem_img.png&quot;;
showRandomImg = true;
adoraveldesignumero1 = 5;
</script>

3. Para aqueles que usam o layout com html do modelo travel e quer colocar acima do post procure por </header> e cole o código abaixo. caso queira colocar no rodapé do blog cole ele abaixo de </footer>.

<div class='total'>
<div class='adoraveldesign1'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+adoraveldesignumero1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=adoraveldesign1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div> </div>

Para quem optou usar o tutorial do layout que ensinei a fazer do zero e quer colocar acima do post, cole o código da terceira etapa abaixo de <div class='container post-e-sidebar'>. Para ficar no rodapé cole acima de <b:section id='fixodoblog' showaddelement='yes'>

Se não encontrar nenhuma dessas tags no html do seu blog, entre em contato comigo pelo chat ou pelo face. Espero que gostem, qualquer dúvida é só chamar... Bjinhos e até mais!

Compartilhe

Veja Também:

Comentário(s)
0 Comentário(s)