13/05/2015

Tutorial: Postagens Populares com efeito no titulo

||

Oi biscoitinhos com carinha de coelhos, como vão nesse dia? Hoje eu não tenho muito o que dizer então vou direito ao assunto da postagem. No tutorial de hoje vou mostrar como personalizar o widget de postagens populares, personalizada com efeito no título. Eu usei ele no layout free Oliver Vocal. É muito simples é fácil adicionar em seu blog, achei esse tutorial uma gracinha além do efeito diferente dele. Para quem quiser dar uma olhada basta acessar aqui: www .

Ao passar o mouse sobre a imagem aparece o titulo em forma de balão, que pode se personalizar de várias formas. No demo esta bem simples, pois o layout pede isso, mas vocês podem arrumar da forma que desejar. Esse tutorial encontrei a bastante tempo porém estava dando alguns errinhos, recentemente criei coragem de arruma-lo e trazer para vocês, eu não me recordo de onde havia encontrado ou criado o código original, então se souberem por favor me avisem para creditar, obrigada. Esse tutorial é executado em dois passos bem simples, mas o código é um cadinho longo. 


01. O primeiro passo é bem simples vamos adicionar o widget/gadget de Postagens Populares. Para isso vá ate a pagina Layout > Adicionar um Gadget > Postagens Populares. Não desmarque nada, apenas arrume a quantidade de postagens a serem exibidas ao seu agrado e salve.

02. Agora siga ate Editar HTML, e usando o atalho CTRL+F procure por ]]></b:skin>, acima dele cole:
/*Postagens Populares
----------------------------------------------- */
.popular-posts {
margin-top:10px;
}
.popular-posts ul {
margin: 0 auto;
text-align:center;
}
.popular-posts .item-snippet{
display: none;
}
.popular-posts ul li {
position:relative;
float:left;
list-style-type: none;
padding: 0 0 0 5px ;
}
.popular-posts ul li a {
text-decoration:none;
color: #000;
}
.popular-posts li img {
background: #ccc;
width: 65px;
height: 70px;
padding: 3px;
filter:alpha(
opacity=100);
-moz-opacity:1;
-webkit-opacity:1;
-o-opacity:1;
-ms-opacity:1;
opacity:1;
transition: all .5s linear;
-o-transition: all .5s linear;
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
}
.popular-posts li img:hover {
filter:alpha(opacity=60);
-moz-opacity:.6;
-webkit-opacity:.6;
-o-opacity:.6;
-ms-opacity:.6;
opacity:.6;
}
.popular-posts li .item-title a {
z-index:1;
width: 150px;
height: auto;
line-height: 16px;
padding: 5px;
font-style: italic;
font-size: 10px;
text-decoration:none;
text-align: center;
border: 1px solid #cbcbcb;
background: rgba(255,255,255,0.8);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 5px;
pointer-events: none;
position: absolute;
left: 50%;
margin-left: -75px;
bottom:190px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
filter:alpha(opacity=0);
-moz-opacity:0;
-webkit-opacity:0;
-o-opacity:0;
-ms-opacity:0; opacity:0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.popular-posts li:hover .item-title a {
bottom:80px;
filter:alpha(opacity=100);
-moz-opacity:1;
-webkit-opacity:1;
-o-opacity:1;
-ms-opacity:1;
opacity:1;
}

Salve e prontinho! Agora é só divar deixando ele lindo e combinando com seu site/blog.

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