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 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.