Principais Redes Sociais Com Efeito Hover

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:

         Seguir @DicashotBlogger

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu8dUhvooDlPqMagpjxWK-pCtF1AgMRiUHnsYASNE9ZNmm0gb8ZIASOCFnzXBgvvP6e1iyjXk-JY7m9fjzUuBedOBRtNBuSLIBHWpoZPQuWP7hvpIi_7Y41HH6k5FkRRwJ-qAV5vCS_AR6/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!!!