.

sábado

Textual description of firstImageUrl

Principais Redes Sociais Com Efeito Hover

ACESSOS:
Deixe seu comentário


Nesta postagem ire compartilhar com vocês outro código bem prático para o seu blog. Ele é simples, mas, contém um efeito bem interessante quando passamos o mouse sobre eles. Esse gadget também colabora muito para um bom Design do seu blogger.


Siga-nos no twitter:

         

Recomende esta postagem no Google:





Para coloca-lo no blogger não tem segredo... Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript", cole o seguinte código
<style type="text/css">
#pbt-social-v1 {
width: 300px;
height: 35px;
margin: 0;
padding: 0;
list-style: none inside none;
margin-left:-80px;}
#pbt-social-v1 li {
float: right;
padding: 0;
margin: 5px;}
#pbt-social-v1 li a {
width: 32px;
height: 32px;
background: url("http://1.bp.blogspot.com/-92vOSpOW4GA/T2hx6NhBIZI/AAAAAAAABIY/tJjMJvgA5Po/s1600/cats2.jpg") 100% 0 no-repeat;
display: block;
transition-property: background-position;
transition-duration: .2s;
-o-transition-property: background-position;
-o-transition-duration: .2s;
-webkit-transition-property: background-position;
-webkit-transition-duration: .2s;
-moz-transition-property: background-position;
-moz-transition-duration: .2s;
}#pbt-social-v1 #pbt-pin {
background-position: -160px 0;}
#pbt-social-v1 #pbt-pin:hover {
background-position: -160px 100%;}
#pbt-social-v1 #pbt-facebook {
background-position: 0px 0;}
#pbt-social-v1 #pbt-facebook:hover {
background-position: 0px 100%;}#pbt-social-v1 #pbt-twitter {
background-position: -40px 0;}
#pbt-social-v1 #pbt-twitter:hover {
background-position: -40px 100%;}
#pbt-social-v1 #pbt-gplus {
background-position: -80px 0;}
#pbt-social-v1 #pbt-gplus:hover {
background-position: -80px 100%;}#pbt-social-v1 #pbt-rss {
background-position: -120px 0;}
#pbt-social-v1 #pbt-rss:hover {
background-position: -120px 100%;}
</style>
<div>
<ul id="pbt-social-v1">
<li><a id="pbt-pin" href="http://pinterest.com/#"></a></li>
<li><a id="pbt-gplus" href="https://plus.google.com/#"></a></li>
<li><a id="pbt-twitter" href="https://twitter.com/#"></a></li>
<li><a id="pbt-facebook" href="http://www.facebook.com/#"></a></li>
<li><a id="pbt-rss" href="http://feeds.feedburner.com/#"></a></li>
</ul>
<div>
</div>
</div>
Substitua os # pelo seu nome em cada rede social; tendo feito isto, está pronto!!!

Cursos Online com Certificado - Cursos 24 Horas

RESPONDA: DE 0 A 5 O QUANTO ESTE CONTEÚDO FOI ÚTIL PARA VOCÊ?
{[['']]}