Botones sociales con CSS3

Una buena forma de mantener a nuestros lectores al tanto de lo que actualizamos es mostrando nuestros enlaces a redes sociales en las que tengamos cuentas, como Facebook, Twitter, Delicious, etc.

Para esto les recomiendo unos geniales botones que me recomendó @PP_Grillo del sitio Free Tux. Pueden ver un ejemplo en mi blog de pruebas, en la parte superior del sidebar.

Para agregarlo tenemos que ir a Diseño/Edición de HTML y buscamos el código ]]></b:skin> y antes de él, pegamos el siguiente código:

/* ICONOS SOCIALES */
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:32px; height:32px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
text-align:center;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6C_ruIK79h7LSHrUuTlCf6_RGtKIOXjQM4fycY6SpqR490D9m-biAfGqUTgSxUCte4hhk-fO3wWrTgRSyw8YIucsoCjirP52lcpLE-9fmlYwHD1a_szD7QkOYtrO3WfyusTtziy3hxMI/s1600/delicious.png"); }
li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwqUvIfPX-aj_oppoHB591QL9bFpDRVB4xG0uN2smMMhMWYDpnkwayRY4NJRjg1Yon9ll97NiYUmiqnRIFJiJMlWpQyD2M3qXpGKvtnESCeU5Mrbd9wP2HBoHEyZtG_THMsj4aPPhoMaA/s1600/digg.png"); }
li.facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4TFx5AZDGk3PQKx7TF9RYTs7fDL7EIhj0fYBmHTsEIWYkAVxZpNnx19g2Yu5hxA8nDghwlM7rHgEDVnw0FYUkXaZi7PHq6SFJF4YEsi7HUf58Jh4RQUv8OWxAEY5xfdUgajTdw1cSoQ/s1600/facebook.png"); }
li.mail { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY5Ku5aczuuAZnY0hSQOJORWNc03lGds60hhQMmH5NiQlWNJBeM0evETgn1QS4oZlr3MUH4cnbg0OzjnFGi3j1rqVmtuOdbBl0AHDLjTCo5ab1P6EBjUQiqgSzcNBBO9-Hk9rrm5nVY5A/s1600/gmail.png"); }
li.stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJs4uKq6WknaUv_GSfbrplhv7JVS7Ki_ga9hDnN1uH-MG4i0uHUBzTApn4dlrD4iDQV0CyMwTW_hejwMb9bI-tOU0DrX4w-fx-VdJ-jut2cQlKJl_K7cl7FNyrPq1L2T_T0bBdsr6WdMQ/s1600/stumbleupon.png"); }
li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcloOcMRnb60XjZMKNQuok2lyJMxC8_TatppolkvKGxpGBLKucya3T_yHpjc85HlwvfgU5XHfZ0gJ8Mi_b3JNdba0HGgz0I5WUXZpEZqGtxWgQm9yfutk65MM6veK8oLy213CShOm2rBQ/s1600/reddit.png"); }
li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzLihWP-i5guzl3PgIC4lAwYKVgO5OTg5AIT6uDuW3M_fWvrT7hGQUNiMp2BDpAbw3AacMPESp69rOA6wsGVvktmdSS9Kj9NJHf82LQfc2i_3OKJDCOOKHAnL6DUTtHudDsNWVoMWCpIY/s1600/rss.png"); }
li.twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1lQ7_QAGpW6PcDx4byHJEeK8Ngz9RjqBNlnGypvyOXOOGmj_XoMjXE-bBBhH1dfFDwhL0zs1GlVNwviKwelrDgFtS0NVE4-YkdjZBzFc6Rldr1gpcqaWWtEsFXY_RsPHtL2TFweGqY4/s1600/twitter.png"); }
li.google { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc6ly__pK1ZC6PDZn131GlzP_dUkJXleFaDJDnovGQZ_k1SNd556NOeWgmwbJHJN5l_VltliQcufnm2M_Ft3QE7xXVEQb5NCbe4pqTvahmkFMoQjaTzAee9EyWxSPdLB0G_TvAfgs_7d0/s1600/google.png"); }
li.technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhytzX-cBGZ84LpCRN66vDqMx9BeURpnnHK5qLjLMHTIb_olG64qmjVdlrRge56Ec6X8a48FELqcAryKjrQUUf7zf3jRTsa9BwF0XLJ7PyR7F5d6PflaSQ3ayH8z9JUHkS2Xs8OMMFD7Ho/s1600/technorati.png"); }
li.youtube { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDkI-sA4a61iZHU2-le4mdGsmdLGCY3BoK57xn2oOkjkg_d80YV4QQa1CXgpKpGYVD1Wxsdk0Yz500NsoESHyyRzae_CNBR86sD-sK_pYWLnl6TpTHgxCScodyClcpnSHS0G4DNUVVjgQ/s1600/youtube.png"); }

/* CSS3 DE LOS ICONOS SOCIALES */
#css3:hover li { opacity:0.2; }

#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#css3 li a strong { opacity:0;
-webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
-moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }

#css3 li:hover { opacity:1; }
#css3 li:hover a strong { opacity:1; top:-10px; }

Luego de guardarlo, vamos a Diseño y Agregamos un gadget HTML/javascript para pegar el último código:




<ul class="social" id="css3">
<li class="delicious">
<a href="http://www.delicious.com/NOBREDEUSUARIO"><strong>Delicious</strong></a>
</li>
<li class="digg">
<a href="http://digg.com/NOBREDEUSUARIO"><strong>Digg</strong></a>
</li>
<li class="facebook">
<a href='http://es-la.facebook.com/NOBREDEUSUARIO'><strong>Facebook</strong></a>
</li>
<li class="twitter">
<a href="http://twitter.com/NOMBREDEUSUARIO"><strong>Twitter</strong></a>
</li>
<li class="mail">
<a href="mailto:tumail@mail.com"><strong>Mail</strong></a>
</li>
<li class="reddit"> <a href="http://www.reddit.com/NOMBREDEUSUARIO"><strong>Reddit</strong></a>
</li>
<li class="youtube">
<a href="http://www.youtube.com/NOMBREDEUSUARIO"><strong>YouTube</strong></a>
</li>
<li class="technorati">
<a href="http://www.technorati.com/NOMBREDEUSUARIO"><strong>Technorati</strong></a>
</li>
<li class="stumbleupon">
<a href="http://www.stumbleupon.com/NOMBREDEUSUARIO"><strong>StumbleUpon</strong></a>
</li>
<li class="rss">
<a href="http://feeds2.feedburner.com/NOMBREDEFEED"><strong>RSS</strong></a>
</li>
<li class="google">
<a href="http://profiles.google.com/NOMBREDEUSUARIO"><strong>Google</strong></a>
</li>
</ul>

Como podrán ver, donde dice NOMBREDEUSUARIO deberán especificar su cuenta en cada red social. Si tienen la cabecera dividida en dos, también pueden probar ubicando el gadget allí.

Espero les sirva.

Share on Google Plus

About Unknown