12/07/2017

Tutorial: Galeria/Slide de postagens recentes no topo do blog

||

Hi bunnuie's! Como estão? Peço desculpas pelo blog estar fechado a tanto tempo, estava organizando algumas coisas, estou criando um mapa com todos os tutoriais do blog, para facilitar a navegação. Também estou excluindo algumas postagens antigas, quais os temas não tem nada haver com o que posto atualmente, então peço só um pouco da paciência de vocês. rs

Agora vamos falar da postagem de hoje... bom venho um "slide de postagens recentes no topo do blog". Esse tutorial eu encontrei lá no blog site Enjoy Things, se utilizar credite! Esse modelo eu utilizei em um dos meus layouts, e o resultado foi realmente lindo! Ele possui efeito hover, como é mostrado na imagem mais abaixo, caso queira ver o efeito online/ao vivo basta clicar no link abaixo. Sem mais delongas vamos ao tutorial! É rápido e super fácil de aplicar.



1) Vá até o blog qual deseja aplicar o código, em seguida vá em HTML e procure por ]]></b:skin>, e acima dele cole o seguinte código:
#box_recentes{width: 100%; }
.recentes{overflow: hidden; position: relative; border: 3px solid #fff; padding: 0px; float:left; margin-left: 5px; margin-bottom: 40px; opacity: 0.6; width: 174px; height: 174px; border-radius: 90px}
.recentes .mask, .recentes .content {background-color: rgba(238, 175, 179, 0.7); width: 174px; height: 174px; position: absolute; overflow: hidden; opacity: 0; transition: all 0.5s linear; top: 0; left: 0}
.recentes:hover .mask {opacity: 1;}    
.recentes img {display: block; position: relative -webkit-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000);  -moz-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); -ms-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); -o-transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000); transition: all .6s cubic-bezier(.190, 1.000, .220, 1.000);}
.recentes:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2);-ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);  opacity: 8;}
.recentes p {opacity: 0; font-family: Arial, sans-serif;font-style: italic; line-height: 1.3em; font-size: 14px; position: reltive; color: #fff; padding: 30px 16px 0px; text-align: center;}
.recentes:hover p {opacity: 1;}
.recentes a.info {font-size: 11px; display: inline-block; text-decoration: none; padding: 5px 10px; background: #fff; color: #ff8f8f; text-transform: uppercase; box-shadow: 0 0 1px #fff; margin-left: 48px;}
.recentes a.info:hover {box-shadow: 0 0 5px #fff;}

2) Agora vá em Layout abra um novo gadget java/script e dentro cole:
<div id='box_recentes'>
<div class="recentes">
<img src="http://i.imgur.com/PKrIsGY.jpg" />
<div class="mask">
<p>Apple pie sesame snaps cake chocolate bar</p>
<a href="link da postagem" class="info">Leia mais</a>
</div></div>
</div>

3) Clique no botão salvar. Agora posicione o Gadget abaixo do gadget do cabeçalho, ou no topo dos gadgets. 

___________________(Entendendo o código)___________________

# A div: <div id="box_rencetes"> não pode ser alterada em nome, somente seu conteúdo.
#  Se desejar colocar mais um slide, basta duplica o código em rosa:

<div id='box_recentes'>

<div class="recentes">
<img src="http://i.imgur.com/PKrIsGY.jpg" />
<div class="mask">
<p>Apple pie sesame snaps cake chocolate bar</p>
<a href="link da postagem" class="info">Leia mais</a>
</div></div>

<div class="recentes">
<img src="http://i.imgur.com/PKrIsGY.jpg" />
<div class="mask">
<p>Apple pie sesame snaps cake chocolate bar</p>
<a href="link da postagem" class="info">Leia mais</a>
</div></div>

</div>
___________________(fim da explicação)___________________

É isso queridos! Espero que tenham gostado do efeito e da explicação. Os créditos do tutorial vão para o blog Chá com Anjos. 

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram