Hace unos días me llego un correo de un lector de V-Junker por medio de contáctanos y me pregunto sobre el widget que tengo del lado derecho en la sidebar, pero para Blogger ya que este widget es para WordPress.
Es por eso que les voy a dar los pasos a seguir para obtener este widget en su Blog en la plataforma Blogger para que chequen como se vería les dejo un ejemplo en este Blog de pruebas.
Primero nos vamos a Diseño > Edición de HTML > Expandimos los artilugios, y tenemos que buscar </b:skin> y justo antes de esta etiqueta pegamos el siguiente código:
.subscribe_icons {
width:286px;
height:auto;
margin:0px auto;
}
.subscribe_icons li {
display:inline;
float:left;
margin:0px 2px 5px 2px;
width:52px;
text-align:center;
font-size:11px;
}
.subscribe_icons a {
display:block;
padding:40px 0px 2px;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
color:#444 !important;
}
.subscribe_icons a:hover {
color:#369 !important;
text-decoration:none;
-moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35);
}
.subscribe_icons .subscribe_buzz a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/iconbuzzrvjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_twitter a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/icontwittervjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_facebook a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/iconfacebookvjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_rss a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/iconrssvjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_email a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/iconmailvjunker1.png) center top no-repeat;
}
Guardamos la plantilla y nos vamos a Diseño > Elementos de la página y agregamos un nuevo gadget HTML/Javascript donde tenemos que pegar lo siguiente:
<div>
<ul class="subscribe_icons">
<li class="subscribe_buzz"><a href="USUARIO BUZZ" rel="nofollow" target="_blank">Buzz</a></li>
<li class="subscribe_twitter"><a href="ENLACE DE TWITTER" rel="nofollow" target="_blank">Twitter</a></li>
<li class="subscribe_facebook"><a href="ENLACE DE FACEBOOK" rel="nofollow" target="_blank">Facebook</a></li>
<li class="subscribe_rss"><a href="ENLACE DE FEED" rel="nofollow" target="_blank">Feed</a></li>
<li class="subscribe_email"><a href="ENLACE DE CORREO/CONTACTO O FEEDBURNER MAIL" rel="nofollow" target="_blank">Contacto</a></li>
</ul>
</div>
Por último y antes de guardar, tenemos que modificar algunos aspectos como: USUARIO BUZZ, ENLACE DE TWITTER, ENLACE DE FACEBOOK, ENLACE DE FEED y ENLACE DE CORREO/CONTACTO O FEEDBURNER MAIL, ahora si guardamos el gadget y listo tendrán su widget como lo tengo yo
BajaWallpapersHD
Estimado, buenas tardes, seguí los pasos pero no me aparecen los iconos de las redes sociales en el Blog, al darle clic a un enlace me manda a: http://comunidadneonunoa.blogspot.com/google.cl y no solo a http://www.google.cl
Puse http://www.google.cl como ejemplo.
Espero me ayudes!
@Rodrigo: Que tal, la verdad no sé por qué te mandaba a esos sitios, pero ya arregle el código, en lo correcto estaba mal me había faltado poner <ul class="subscribe_icons"> saludos!
Hola Alberto, me ha venido muy bien este post pero necesito poner también un link a youtube y otro a twenti y no soy capaz, me puedes echar una mano????
gracias
@silvia: Hola, bueno para agregar más enlaces con su icono es cosa de agregar en CSS lo siguiente:
.subscribe_icons .subscribe_youtube a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/youtube.png) center top no-repeat;
}
.subscribe_icons .subscribe_tuenti a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/tuenti1.png) center top no-repeat;
}
Después en el gadget agregar lo siguiente:
<li class="subscribe_youtube"><a href="ENLACE DE YOUTUBE" rel="nofollow" target="_blank">Youtube</a></li>
<li class="subscribe_tuenti"><a href="ENLACE DE TUENTI" rel="nofollow" target="_blank">Tuenti</a></li>
Ojala te haya servido, ahí me cuentas qué tal te quedo, saludos!
que tal. lo hice y me aparece los links es genial pero no me aparece el logo de los links! porque?
@barbara: Lo que pasa es que el enlace de las imágenes estaba roto, pero ya volví a subir las imágenes, nada mas remplaza todo el primer código, saludos!
gracias! ahora me voy a fijar si lo puedo hacer! un apregunta mas, porque no me aparece la imagen flotante? segui todos los pasos y no me sale,
@barbara: Como que flotante? volví a colocar este widget en el blog de pruebas y todo bien, no se a que te refieres.
introduje correctamente todo los codigos y me aparecen los iconos pero cuando clikean dice que la pagina no existe
@carlos: Valla! parece que eres nuevo en esto de Blogger, por lo que veo, apenas estas creando tu Blog, y viendo porque falla es porque no has colocado los enlaces de cada red social, es por eso que no te re direcciona a ninguna página. Saludos!
hola amigo me gusto mucho este post. pero te queria preguntar hacerca de los botones sociales q usas al final del post los contadores de meneame bitacora etc… como los puedo conseguir o unos parecidos para el blogger?.. te cuento lo q pasa es q yo toy usando una plantilla de worpress q la adaptaron pa usarla en blogger y al parecer las opciones de los botones de compartir o social no estan habilidados ni tampoco os comentarios, ni los botones al final de nuevos post o viejos post entre varias otras cosas, lo q me intereza es los botones social bookmarkin… y no se como ponerlos como los q tu tienes dentro de una cajita o imagen asi como estos http://bw.imagenes.info/wp-content/uploads/2009/12/bookmarkshonkiat.png ojala puedas ayudarme soy nuevito en esto de blogs
a mi no me salen los botones solo letras no entiendo por que..????
@christian: Algo estás haciendo mal, borra todo y empieza desde el principio a colocar cada código correcto como lo comento en el post, ya que revise los códigos y esta todo perfecto. Saludos!
Gracias justo andaba buscando este codigo !
Hola,
veo que has puesto el botón de Google Plus y quisiera saber cual es código del gadget tanto como el que se pone en HTML.
Soy @ricardogottheil y necesito hablar con vos de lo del proyecto.
que buen articulo me sirvio mucho gracias !!!