Widget de redes sociales para blogger
Las redes sociales son muy dispensables
para todos los blogs y paginas web, compartir sus artículos en las redes
sociales y conseguir seguidores es el mejor método para darse conocer en el mundo del internet. Ayudadeblogger.com
les presenta un nuevo widget de redes sociales para blogger, la incrustación del
código es muy fácil de realizarlo, no necesitaran introducir el código en el
editor HTML de su plantilla, solo tendrán que copiar un código y ponerlo en un
widget y ubicarlo donde mejor les parezca. Este widget de redes sociales
funciona en todos los navegadores web como Firefox, Google Chrome, Internet
Explorer, Etc. Tendrán que realizar 4 cambios en el código, el widget de redes
sociales para blogger mostrara las imágenes de Facebook, Twitter, Google + y
RSS para su suscripción.
Si necesitan ver otros widgets para
blogger, les dejo algunos enlaces que he publicado
A continuación mire su demostración en
mi blog de demos, el widget esta ubicado en el sidebar de la derecha y tiene
como nombre “Widget de redes sociales para blogger”
Les gusto verdad!
Vamos a trabajar
1 Ir a blogger
2 Da un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que tiene como nombre “HTML/Javascript”
5 Inserta las siguientes líneas de código
en su interior
<style> #WG-social { width:305px; float:left;
margin-top:10px; } #WG-social li { position:relative; cursor:pointer; padding:0!important; }
#WG-social .fb,.tw,.gp,.fd {
position:relative;
-moz-transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition:all .4s ease-in-out; z-index:5;
display:block; float:left; margin:1px;
} #WG-social .fb { width:150px; height:152px; background:url(//goo.gl/6xmUk) no-repeat
center center #3b5998; } #WG-social .tw { width:150px; height:74px; background:url(//goo.gl/oyiFK) no-repeat
center center #3b5998; } #WG-social .gp { width:150px; height:74px; background:url(//goo.gl/oT0kF) no-repeat
center center #3b5998; } #WG-social .fd { width:302px; height:74px; background:url(//goo.gl/ncoLY) no-repeat
center center #3b5998; } #WG-social li:hover .fb { -moz-transition:all .1s ease-in-out; -webkit-transition:all .1s ease-in-out; background:url(//goo.gl/MH8AP) no-repeat
center center #3468b6; } #WG-social li:hover .tw { background:url(//goo.gl/hHRHv) no-repeat
center center #4099ff;
-moz-transition:all .1s ease-in-out;
-webkit-transition:all .1s ease-in-out; }
#WG-social li:hover .gp {
background:url(//goo.gl/wva4B) no-repeat center center #e44524; -moz-transition:all .1s ease-in-out; -webkit-transition:all .1s
ease-in-out; } #WG-social li:hover .fd { background:url(//goo.gl/JFGqn) no-repeat
center center #f60;
-moz-transition:all .1s ease-in-out;
-webkit-transition:all .1s ease-in-out; }
</style> <div
class="WG" id="WG">
<ul id="WG-social">
<br/><a
href='http://www.ayudadeblogger.com/'></a> <li><a class="fb"
href="http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017"
target="_blank"></a></li> <li><a class="tw"
href="https://www.twitter.com/ayudadeblogger"target="_blank"></a></li> <li><a class="gp"
href="http://plus.google.com/114283163993086871162"target="_blank"></a></li> <li> <a class="fd"
href="http://feeds.feedburner.com/ForoAyudaDeBlogger"target="_blank"></a></li> </ul>
</div> <br/><a
href='http://www.ayudadeblogger.com/'></a>
|
Realiza estos cambios:
He marcado de color azul las URLs en las
cuales tendrán que remplazarlas por las URLs de sus redes sociales, realiza los
cambios en todas.
Eso es todo, ahora dale un clic en “Guardar”,
ubica tu nuevo widget de redes sociales donde tú quieras.
Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Comentarios