Artigos relacionados com miniaturas e efeito hover

Saiba como adicionar artigos relacionados com miniaturas e efeito hover no rodapé dos posts do blog

Há muitos artigos publicados sobre artigos relacionados com imagem em miniatura, porém o truque que apresento, como diz o título traz incorporado o efeito hover, se não sabe que é o efeito hover, então explico:

O efeito hover consiste na alteração da aparência de um elemento da interface gráficas quando se posiciona o ponteiro do mouse sobre ele, pórem ainda não foi selecionado.


Siga o @bloggermin agora e fique por dentro das novidades para o seu blog

O efeito ficará da seguinte maneira:

artigos relacionados
Artigos relacionados com minitura. Imagem: Spice Your Blog

O script pertence ao Spice Your Blog e fiz algumas alterações para atender as nossas necessidades.

Para adicionar este truque há três possibilidade:
  • Se estiver usando a interface antiga entre em Design | Designer de modelo | Avançado | Adicionar CSS.
  • Se usa a nova interface entre em Modelo | Personalizar | Avançado | Adicionar CSS.
  • Ou entre Design/Modelo | Editar HTML e antes de ]]></b:skin>.
Coloque o seguinte código:
ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

Em Editar HTML, marque "Expandir modelos de widgets", logo abaixo de <div class='post-footer'> adicione:
Visualize e se estiver tudo certo clique em Salvar Modelo.

Espero que seja útil e continuem visitando o Bloggermin e se tiver alguma dúvida não deixe de comentar.

COMENTÁRIOS

Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Artigos relacionados com miniaturas e efeito hover
Artigos relacionados com miniaturas e efeito hover
Saiba como adicionar artigos relacionados com miniaturas e efeito hover no rodapé dos posts do blog
http://4.bp.blogspot.com/-bLelD_6l_NE/T-pJK1ZnOdI/AAAAAAAAAe8/hHWTZqEKtS0/s1600/related-posts-screenshot-hover.jpg
http://4.bp.blogspot.com/-bLelD_6l_NE/T-pJK1ZnOdI/AAAAAAAAAe8/hHWTZqEKtS0/s72-c/related-posts-screenshot-hover.jpg
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/06/artigos-relacionados-miniaturas-efeito.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/06/artigos-relacionados-miniaturas-efeito.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar