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.

   Preview

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!

Vocês já devem ter visto uma mensagem informando que seu blog terá uma versão HTTPS.. certo? Ok beleza, mas eu notei que isso está afetando alguns códigos. Embora eu não entenda muito, procurei saber como desativar, e acreditem, não reparei que tinha no menu do blog essa opção. No artigo que li diz que ao ativar o redirecionamento https o blog teria 3 vantagens:

Agora se vocês opinarão em ter os arquivos em forma de calendário, ou os ícones, vocês podem desativar https nas configurações do blog.

1. No menu do blog à esquerda, clique em configuração > básico > https.

2. Em "Redirecionamento para HTTPS", selecione Não.

Pronto! :) É isso pessoal, beijos e até o próximo post o/

Olá meu povo! Antes de mais nada quero deixar os créditos para o blog da Karoline de "Follow your Dreams", esse código é do blog dela, e eu apenas fiz algumas alterações no script e no css, apenas isso. como vocês podem ver o resultado final clicando aqui. Essa postagem é a continuação de como criar um layout do zero, mas agora estaremos personalizando ele. Acredito que vocês gostam desse tipo de efeito, "yo tambien...!" :D Vamos para o tutorial.

Vocês tem 3 locais onde pode aplicar o script, escolhi o primeiro, fica no critério de vocês.. Blz ;)

1. Procure por <div class='post-footer-line post-footer-line-1'> clique dentro da caixa de código e dê ctrl + f e depois enter, após achar cole o código abaixo  de <div class='post-footer-line post-footer-line-1'>.

<!-- POSTS RELACIONADOS -->

<script type='text/javascript'>

$(document).ready(function() {$(&#39;.resizethumbnail&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s420-p&#39; );});});

</script>

<script src='http://static.tumblr.com/pfobaef/Tp7oc9v3v/posts-relacionados-blogblackrose.js' type='text/javascript'/>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>

</b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=4; /** AQUI... SE QUER MAIS DE 4 IMAGENS ALTERE O NUMERO **/

var relatedpoststitle=&quot;Veja também:&quot;; /** TÍTULO VEJA TAMBÉM **/

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div>

<!-- FIM POSTS RELACIONADOS -->

2. Agora procure por ]]></b:skin> e acima dele cole o código à seguir.

/* Posts Relacionados
----------------------------------------------- */
#related-posts {
width: 100%;
margin-top: 10px; /* margim p/ cima */
margin-left: 4px; /* margim esquerda */
padding: 0 0 180px; /* espaço abaixo */
}
/*** Titulo VEJA TAMBÉM ***/
#related-posts h2 {
color: #000; /* cor da fonte */
font-size: 15px; /* tamanho da fonte */
font-family: sans-serif; /* fonte */
text-align: center; /* fonte centralizada */
text-transform: uppercase; /* fonte em letra maiuscula */
letter-spacing: 1px; /* espaço entre as letras */
}
#related-posts img{
margin: auto;
}
#imagem {
width: 153px; /* largura das imagens */
height: 153px; /* autura das imagens */
border-radius: 50%; /*Retire essa linha se quiser as imagens quadradas*/
}
#texto {
position: absolute;
background: rgba(0, 0, 0, 0.8); /* cor do fundo "background": efeito hover */
border-radius: 50%; /*Retire essa linha se quiser as imagens quadradas*/
width: 113px; /* largura do background */
text-align: center; /* fonte centralizada */
height: 73px; /* autura do background */
margin: -157px 0px; /* margim p/ cima */
padding: 40px 20px; /* espaço */
font-size: 18px; /* tamanho da fonte */
color: #ffffff; /* cor da fonte */
opacity: 0; /* opcacidade 0 */
}
#texto:hover {
opacity: 1;
}

3. Agora só salvar!