Widget para blogger Popout 4 en 1
Existen cientos de widgets para blogger,
pero solo los mejores widgets para blogger sobre salen en el mundo de Blogger.
Blogger es una plataforma en la cual podemos insertar cientos de widgets y
realizar los mejores trucos para blogger. Es muy fácil de implementar los códigos
en Blogger. Hoy compartiré con ustedes un truco muy simple, se trata de un
widget para blogger llamado 4 en 1, ya que es un popout que se despliega cuando
pasa el cursor en cada uno de ellos, y se habilita las redes sociales mas importantes,
como Facebook, Twitter, Google + y también aparecerá una caja de suscripciones
para que los usuarios que visiten su blog puedan suscribirse a sus nuevas
actualizaciones. La implementación de los códigos es muy fácil, solo deben
seguir este tutorial tal como lo muestro y podrán disponer de este grandioso
popout para que lo muestren en su blog de blogger y así los usuarios puedan
suscribirse mediante estas grandiosas cajas de suscripciones.
A continuación mire su demostración en
mi blog de demos
Te gusto! Verdad, vamos a trabajar
1 Ir a Blogger
2 Da un clic en “Plantilla”
3 Ahora debes dar un clic en “Editar
HTML”, también debes presionar en la parte superior izquierda la casilla que
dice “Expandir plantillas de artilugios”
4 Presiona la tecla “F3” de tu teclado
para que puedas buscar el siguiente código
Busca este código </head> y arriba
de el inserta las siguientes líneas de código
<link
href='https://blognpctricks.googlecode.com/svn/css/4in1widgetv2.css'
rel='stylesheet'/>
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'
type='text/javascript'/>
<script
src='http://apis.google.com/js/plusone.js'
type='text/javascript' type='text/javascript'/>
<script
src='http://yourjavascript.com/1073331024/fanbox-init.js'
type='text/javascript'/>
<script
type='text/javascript'>
jQuery(document).ready(function(){
jQuery("#facebook_right").hover(function(){
jQuery(this).stop(true,false).animate({right:
0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right:
-200}, 500); });
jQuery("#twitter_right").hover(function(){
jQuery(this).stop(true,false).animate({right:
0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right:
-250}, 500); });
jQuery("#google_plus_right").hover(function(){
jQuery(this).stop(true,false).animate({right:
0}, 500); },function(){
jQuery("#google_plus_right").stop(true,false).animate({right:
-154}, 500); });
jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){
jQuery("#feedburner_right").stop(true,false).animate({right:
-303}, 500); }); });
</script>
|
5 Da un clic en “Guardar plantilla”
6 Dirígete a “Diseño”
7 Da un clic donde dice “Añadir un
gadget” y se abrirá una ventana en la cual deberás buscar el widget que dice “HTML/Javascript”
e inserta el siguiente código, realizando algunos cambios.
<div
id="on"><div id="facebook_right" style="top:
18%;"><div id="facebook_div"><img src="
http://4.bp.blogspot.com/-j1tHJK2zl7M/UVdF4jNyLmI/AAAAAAAACsQ/-5OG8nqIx_M/s1600/ayudadeblogger.PNG"
alt="" /><iframe
src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017&locale=en_gb&width=200&connections=9&stream=&header=false&show_faces=0&height=356"
scrolling="no"></iframe></div></div></div><div
id="on"><div id="twitter_right" style="top:
35%;"><div id="twitter_div"><img
id="twitter_right_img" src=" http://4.bp.blogspot.com/-Hsq4WWeA8ug/UVdGAgzZT5I/AAAAAAAACsY/HMHCOS_TMBA/s1600/ayudadeblogger.PNG"
/><div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("ayudadeblogger");</script></div></div></div><div
id="on"><div id="google_plus_right"
style="top: 52%;"><div
id="google_plus_div"><img
id="google_plus_right_img" src="
http://2.bp.blogspot.com/-937sRe4p_0o/UVdGFjBCJ3I/AAAAAAAACsg/OIrc6NJxAWM/s1600/ayudadeblogger.PNG"
/><div style="float:left;margin:10px 10px 10px
0;"><g:plusone size="tall"
expr:href="data:post.url"></g:plusone></div></div></div><div
id="on"><div id="feedburner_right" style="
top: 69%;"><div id="knfeedburner_div"><center><h4
style="color:#f66303;">Recibe mis actualizaciones en tu
email:</h4><form action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ForoAyudaDeBlogger',
'popupwindow', 'scrollbars=yes,width=550,height=520');return
true"><input gtbfieldid="10" class="enteryouremail"
name="email" value="enter your email here..."
onblur="if (this.value == '') {this.value =
'enter your email here...';}" onfocus="if
(this.value == 'enter your email here...') {this.value =
'';}" type="text" /><input value="ForoAyudaDeBlogger"
name="uri" type="hidden" /><input
value="submit" class="submitbutton"
type="submit" /></form></center><img
id="feedburner_right_img" src=" http://3.bp.blogspot.com/-mQXZbakUqCY/UVdGOg0FNJI/AAAAAAAACso/y18IgSDN-y8/s1600/ayudadeblogger.PNG"
/></div></div></div></div>
|
Realiza estos cambios:
Borra el link que esta marcado de color azul y pon el link perteneciente de tu Fanpage de Facebook
http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017
También debes borrar el nombre que esta
marcado de color rojo y sustitúyelo por el nombre de tu página de Twitter, solo
el nombre y no el link.
ayudadeblogger
Y por ultimo, deberás borrar los dos nombres
que están marcados de color verde por el nombre de tu pagina de FeedBurner,
recuerda, solo pon tal como lo digo y no vayas a poner el link de tu FeedBurner,
solo es el nombre nada mas.
ForoAyudaDeBlogger
Ahora dale un clic en Guardar y ubica el
widget donde tú quieras.
Revisa tu blog y mira tu nuevo cambio
¿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
Hola Luis, este truco es fantástico. Lo utilicé en la plantilla Tiempos Modernos, pero al modificar el archivo para agregar el widgets por Java, y guardarlo, el resultado fue que el carrusel salía triplicado. El error es mio, de interpretación con el nombre que hay que poner de FeedBourner, o hay algo que revisar en el widgets. Cuando puedas, mejora la explicación porque en la parte final hay cierta confusión, según mi interpretación.
ResponderEliminarHola Juan, por ejemplo el link de mi feedburner es este;
Eliminarhttp://feeds.feedburner.com/ForoAyudaDeBlogger
Ves que lleva el nombre al final y dice ForoAyudaDeBlogger, asi es como va aparecer en tu feedburner pero con el nombre que le hayas asignado...
Cualquier pregunta estoy para ayudarte saludos..
Gracias Luis de nuevo por tu disposición a la ayuda para agregar nuevos productos a la plantilla. Como otras veces, tus tutoriales me han ayudado a conseguir los objetivos, seguiremos intentando, y si te necesito, te lo haré saber. Saludos.
ResponderEliminarDe nada saludos.
EliminarMuchas gracias, lo acabo de poner en mi blog ♥ aunque tal vez tenga que hacerle unos arreglos ya que el estilo de mi blog es algo oscuro, de todas maneras gracias, funciona genial n.n
ResponderEliminarDe nuevo por aca molestando, cambie el look de los botones, pero no logro cambiar el color de las cajas porque el codigo no trae esa opcion, nisiquiera en el de fb para cambiar la caja de light a dark :(
ResponderEliminarAyuda!!Ayuda! Me gustaria poner las cajas oscuras o transparentes, & los links en #B10000
Hola, te enviarwe un nuevo codigo en estos dias. Esperalo para que puedas colocarlo en dark..
EliminarSaludos.