Hola Amigos! En esta ocasion te mostrare un hermoso y atractivo widget para compartir en los medios sociales como una manera de aumentar los visitantes a tu blog. Sabemos que cada blogero añade distintos estilos de Widget de Social Media para atraer mas lectores, compartire hoy uno hecho a mano en forma de dibujo de iconos sociales para Blogger.Veras que luce distinto y facil de insertar en tu blog solo en un paso.
Ejemplo:
 |  |
 |
 |
Paso simple para añadir un Widget de Social Media Dibujado a Mano en tu Blog.
- Entra en cuenta de Blogger > Diseño > Añadir un Gadget y selecciona "HTML/Java Script"
- Copia el codigo de abajo y pegalo en html/javascript.
<style class="text/css">
table
{
border-bottom: 0px solid #E6E6E6;
float: center;
width: 260px;
margin:10px 0 0 3px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/trucosdeblogger"
imageanchor="1" target="_blank" rel="nofollow"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijUKF06LgivfijguCXwAo-_5yi4jDlopsCDaMmVDpgST69PBHxXKkLSwtYrRKP7IEO4JF3JXvii8YK31QcyGsP18qbG73j03mxiiMkT-uNm4A2i7oeE6sf16jyo8SQT04TaAR65sU1r9T-/s1600/facebook-48.png"
/></a></div></td><td><div
class="subicons"><a class="Fadeout" href="http://twitter.com/andante772"
imageanchor="1" target="_blank" rel="nofollow"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_kmH3aJH0xfUjRZIQDhlxxcksu1lEaaIj7I0H7B8hi2KAAT5vcpQ7Ew-KFL_ItDrLl143r3-FuK9DUL-MM788b1FY5QcaYBZ-QGbWdwg_2q4Qa8hIg6A4c4O6agSX_fjtlqn3yYxo2nj5/s1600/twitter-48.png"
/></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/supertrucosdeblogger"
imageanchor="1" target="_blank" rel="nofollow"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuc1cEeWaDIMthvXPfiRtaWmUzimLJEiTSrTQlOUrYF8rsFoltzYxAXpxsquBFXOYEreQGx8ROV4NkqclvKi65XQv8fERS_n_xAFZVMZ5HsUM9BnVkbSypj9TsdCFvDOt4Cq5C_KiRX4Z/s1600/rss-48.png"
/></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/116180896434879626623/posts"
imageanchor="1" target="_blank" rel="nofollow"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb6kU2VETc3EJbYfwwKWJq2YlryvPyeo_sNuY-ma5CtRlUegzPe8zPrsxRkVUYj9LsFDY8pmOAPDYWW6XNgpCj033CaqSIRa20lPFX3VTeEtezSdwlRrjYU5famifpENMq4bfjf7YUs2YN/s1600/google-48.png"
/></a></td>
</tr></table>
</div>
Customizacion
Necesitas reemplazar todos los enlaces en color amarillo por tu nombre o id de usuario en estas redes sociales.
Ademas si asi deseas puedes customizar el ancho del widget simplemente reemplazando width: 260px por el ancho deseado.
Si no deseas borde entre cada icono , simplemente reemplace border-right: 1px con border-right: 0px
0 comentarios:
Publicar un comentario