2 de out de 2013

Efeito hover no widget postagens populares




É sempre bom poder aumentar o tempo de permanência dos leitores em seu blog, por isso, há widgets tão importantes como é o caso do widget dos posts populares. Que tal então dar a ele maior visibilidade como coloca-lo abaixo do cabeçalho e dar a ele um visual moderno ? Siga a tutorial que é bem facinho. Claro, será necessário ter o widget em seu blog e depois, arrasta-lo para baixo do cabeçalho.



Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"





Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 




Copie o código abaixo e cole no local indicado.




/*Popular post ------------------------------------------------*/

.PopularPost ul {list-style: none;}
.PopularPosts img{padding:0px;border-radius: 5px;-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;display: inline-block;
transition: all 0.2s ease-in-out;border: 0px;
box-shadow: 0px 0px 10px #222;}
.PopularPosts img:hover {-webkit-filter: saturate(1.1);
-moz-filter: saturate(1.1);}
#PopularPosts1 ul li:hover .item-title{opacity:1;top:-23px;width: 100%;padding: 6px;}
.PopularPosts .item-title {
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding-bottom: .2em;
position: absolute;
font-size: 12px;
width: 0px;
background: #ddd;
padding: 0px;
top: -25px;
opacity: 0;
left: 0px;
border-bottom: 1px solid #222;
border-top: 1px solid #222;
font-family: 'Playfair Display SC', serif;
text-align: center;
overflow:hidden;
}
.PopularPosts .item-thumbnail {
float: left;
margin: 15px 5px 25px 0;
height: 72px;
padding: 5px;
}

#PopularPosts1 ul li {padding: 0px;
border: 0px solid #ddd;
float: left;
margin: 2px;
height: 71px;
width: 71px;
margin-left: 37px;}

#PopularPosts1 h2:before {
content: "";
position: absolute;
bottom: 14px;
left: -9px;
border-width: 21px 8px 0px 0px;
border-style: solid;
border-color: transparent #000;
display: block;
width: 0;
}

#PopularPosts1 h2{
position: absolute;
top: -22px;
left: 20px;
background: #ddd;
padding: 5px 15px 5px 15px;
font-size: 18px;
font-weight: normal;
border: 1px solid #666;
box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.8), 0 7px 14px #222;
border-radius: 0px 0px 5px 5px;
font-family: 'Playfair Display SC', serif;
text-shadow: 1px 1px 1px #bbb;
color: #222;
letter-spacing: -1px;}




Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.




Nenhum comentário:

Postar um comentário

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube