> > > > > > > > >

Pon tus Redes Sociales en tu Blog

26 marzo, 2015


Hola!
Feliz Jueves Love mini graphics
Les traigo este fácil tutorial.
Este consiste en poner los iconos de tus redes sociales en tu blog.
Es bastante sencillo, solo deben seguir los pasos al pie de la letra y poner atención en lo que deben hacer. 
Espero les guste este tutorial y les sirva para enchular tu blog ;)
Si les queda alguna duda me pueden dejar un comentario y les ayudaré
Besos Kisses mini graphics


El tutorial es para poner los iconos así:
Este código deja los iconos fijos, pero al subir o bajar en tu blog se mueven.

1. En tu blog das click en Diseño
o

Te debe aparecer una pantalla como esta:

2. Das click en Añadir un Gadget

Te aparece un recuadro como este:

3. Buscas donde dice HTML/Javascript y das click en el +

Te aparece un recuadro así: 

4. En titulo lo dejan en blanco, agregan el código y dan guardar.

Este es el CÓDIGO:
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:140px; left:-12px;'>
<a class='linkopacity' href='LINK RED SOCIAL' imageanchor='1' rel='nofollow'
style='margin-left: 1em; margin-right: 1em;' target='_blank' title='NOMBRE RED SOCIAL'><img
border="0" src="LINK DEL ICONO/IMAGEN" /></a><br />
</div>

Deben reemplazar donde dice LINK RED SOCIAL por el link directo a tu red social, en NOMBRE RED SOCIAL ponen si es Twitter, Facebook, etc... y en LINK DEL ICONO/IMAGEN ponen el link del icono que quieren ahí. 

Si quieren agregar varias redes sociales solo deben agregar otra vez 
<a class='linkopacity' href='LINK RED SOCIAL' imageanchor='1' rel='nofollow'
style='margin-left: 1em; margin-right: 1em;' target='_blank' title='NOMBRE RED SOCIAL'><img
border="0" src="LINK DEL ICONO/IMAGEN" /></a><br />

y al final del código deben terminar con </div>

EJEMPLO:
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:140px; left:-12px;'>
<a class='linkopacity' href='LinkTUTwitter' imageanchor='1' rel='nofollow' 
style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Twitter'><img 
border="0" src="LinkImagenIconoTwitter" /></a><br />
<a class='linkopacity' href='LinkTUFacebook' imageanchor='1' rel='nofollow' 
style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Facebook'><img 
border="0" src="LinkImagenIconoFacebook" /></a><br />
<a class='linkopacity' href='LinkTUTumblr' imageanchor='1' rel='nofollow' 
style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Tumblr'><img 
border="0" src="LinkImagenIconoTumblr" /></a><br /></div>

Si desean más redes agregan el pedazo anterior y no deben olvidar el </div> al  final de todo el código y LISTO! Ya tienes tus iconos de redes sociales en tu blog.

Para iconos que puedes utilizar 
subir imagenes

1 comentario:

  1. ¡Menudo cambio que le has dado al blog! Por cierto, ahora me gusta mucho más que antes, y eso que ya estaba realmente bonito. Un abrazo.

    ResponderEliminar

¡Anímate a comentar! Me encantaría saber tu opinión sobre este post.
No se permiten mensajes que falten al respeto, el spam está permitido siempre y cuando también opinen sobre la entrada, de lo contrario serán eliminados.
Si me sigues, sigo devuelta.
Siempre devuelvo los comentarios