add

Me gusta Facebook Google + y Twitter Popout para blogger


Atraer a los usuarios que visitan su blog a que compartan su pagina web en las redes sociales es algo que no puedes perder la oportunidad de hacerlo con un solo widget. Es de suma importancia dar a conocer nuestro blog en las redes sociales mas conocidas como, Facebook, Google + y Twitter, poder compartir lo que haces y que la gente lo comparta, en sus perfiles, dará como lugar a que tu blog sea visitado por mas personas en todo el mundo. Una buena opción para promocionar tu blog de blogger. No voy hacer este tutorial demasiado extenso ya que solo deberán insertar un solo código en un widget y realizar tres simples cambios. El widget que van aprender a insertar en su blog de blogger se mostrara al momento que un visitante abra su blog y se abrirá automáticamente un popout de bienvenida en la cual estará presente los iconos  de  compartir un me gusta de Facebook, Google + y Twitter. Así que es un código que no le dará errores en el proceso de SEO.  

Me gusta Facebook Google + y Twitter Popout para blogger

A continuación mire su demostración en mi blog de demos


Te gusto!!!!

Algunas páginas web o blogger ya utilizan este sistema así que no es cosa de otro mundo.

Implementación del código

1 Ir a blogger

2 Da un clic en “Diseño

Me gusta Facebook Google + y Twitter Popout para blogger

3 Busca el gadget “Añadir un gadget” y ábrelo

Me gusta Facebook Google + y Twitter Popout para blogger

4 Se te abrirá una nueva ventana en la cual tendrás que buscar el widget que dice “HTML/Javascript” ábrelo e inserta en su interior las siguientes líneas de código


<style>
#stp-bg{
            display:none;
            position:fixed;
            _position:absolute; /* star by ayudadeblogger.com*/
            height:100%;
            width:100%;
            top:0;
            left:0;
            background:#000000;
            z-index:998;
}

#stp-main{
            position:fixed;
            top:220px;
            _position:absolute; /* hack for IE 6*/
            display:none;
            width:450px;
            border:7px solid #2f2f2f;
            background:#fff;
            z-index:999;
        border-radius: 9px;
            -moz-border-radius: 9px;
            -webkit-border-radius: 9px;
            margin:0pt;
            padding:0pt;
            color:#333333;
            text-align:left;
            font-family:arial,sans-serif !important;
            font-size:13px;
}

#stp-title{
            font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
            font-size:18px;
            padding:13px 0 13px 15px;
}

#stp-close{
            float:right;
            font-size:14px;
            font-weight:bold;
            font-family:Verdana, Geneva, sans-serif;
            color:#777777 !important;
            margin:0 13px 0 0;
            border-bottom:0px !important;
            text-decoration:none !important;
}

#stp-close:hover{
            text-decoration:none !important;
}

#stp-msg{
            background:#4074CF;
            padding:10px 15px;
            color:#ffffff;
            font-family:Arial, Helvetica, sans-serif !important;
            font-weight:bold;
            line-height:20px;
}

#stp-buttons{
            margin:25px 0px 25px 120px;
            padding:0 0 0 15px;
}

#stp-bottom{
            padding:15px 10px;
            background:#EFEFEF;
            color:#95989F;
            border-top:1px solid #DDE0E8;
}

#stp-counter{
            font-size:11px !important;
            text-align:right;
            font-weight:bold;
}

.stp-button{
            float:left;
            width:120px;
}

.stp-clear{
            clear:both !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://connect.facebook.net/es_LA/all.js#xfbml=1"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
<script type="text/javascript" src="http://yourjavascript.com/114356611/jquery-stp-min.js">
</script>       
<script>       $(document).ready(function(){                                                           $().socialTrafficPop({                      timeout: 30,                    title: "Bienvenido a Ayudadeblogger.com",                 
message: 'No te olvides de Recomendarnos  <em> en las redes sociales</em>! ',                     google_url: "http://www.ayudadeblogger.com/", google_size: "tall",                     fb_url: "http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017",   fb_layout: "box_count",                     closeable: true,                      advancedClose: false,                      opacity: '0.45', twitter_on: true             
});                 
});     
</script>

Realiza estos cambios:

He marcado tres puntos de diferentes colores en los cuales tendrás que cambiarlos, donde dice Bienvenido a Ayudadeblogger.com cámbialo por un tema de bienvenida de tu blog.

También deberás remplazar el link que esta marcado de color azul http://www.ayudadeblogger.com/ y poner el link de tu blog de blogger.

Y por ultimo en la misma posición vas a encontrar un link marcado de color verde http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017 este link es el que uso en mi Fanpage de Facebook, deberás borrarlo y poner el link de tu Fanpage de Facebook.

Eso es todo ahora dale un clic en “Guardar” y ubica tu widget donde tu quieras, y mira tus nuevos cambios en tu blog.

Viste que era tan fácil.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Saludos.


34 comentarios:

  1. Hol amigo como estas bueno mi pregunta es que yo pongo el cuadro pero no me aparece en la pagina aparte tambien quiero poner botones para compartir redes sociales abajo de las entradas y tampoco aparecen a que se debe agradeseria tu respuesta saludos

    ResponderEliminar
    Respuestas
    1. Hola intentalo asi, borra todo el codigo que tenias antes, y buelve a insertar todo el codigo que esta en este post y no cambies nada luego le das un clic en guardar y mira tu blog, si aun no te sale me avisas ok.
      Saludos.

      Eliminar
  2. Nada amigo no sale aqui esta mi blog por si las moscas http://info-utilidades.blogspot.com/

    ResponderEliminar
  3. hola amigo queria preguntarte e puesto la caja pop up en mi blogg, y funciona bien pero cuando las pongo los slideshows y gadgets de mi blogg no funcionan y la elimino y vuelven a funcionar y lo mismo pasa con otros codigos de cajas de facebook, que es lo que pasara?
    te dejo el link de mi blogg
    http://animexmonton.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola, es por que esta ocacionando problemas con los scripts de este codigo, https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js y http://yourjavascript.com/114356611/jquery-stp-min.js. El slideshow que tu tienes tiene un script y algunas scripts, mas estas utilizando es recomendable tener solo uno..
      Saludos.

      Eliminar
    2. entonces como le hago para que funcione que es lo que tengo que eliminar? ayudame porfavor

      Eliminar
    3. Hola, tendre que esculcar en tu codigo y darte la respuesta al final del dia, espera mi comentario..
      Saludos.

      Eliminar
    4. gracias yo espero tu respuesta XD

      Eliminar
  4. Hola amigo esta todo super bien explicado con el metodo antiguo de blogger asi que hay que actualizarse jejeje pero perfecto para lo que ya conocemos blogger
    Solo una pregunta como puedo hacer que aparesca cuando cierren el blog no al comienzo si me podrias ayudar desde ya muchas gracias por tu grandioso esfuerzos

    ResponderEliminar
    Respuestas
    1. Hola, ese metodo no se lo puede hacer ya que esta configurado en el script para que aparesca solo al inicio de tu pagina princial o cuando abran cualquier post. Pero es una buena idea la tuya la tendre en mente.
      Saludos

      Eliminar
    2. Gracias por tu rapidez en comentar
      es una pena que no este ese scprit, pero seria mejor al final
      ejemplo cuando cierras un blog puedes poner seguro que quieres
      irte de esta pagina o puedes ponerle lo que quieras pues asi, pero con tu scprit ya que aveces la gente no es muy paciente o algunos que se pierden en el camino por no saber que hacer etc.. etc.. XD Gracias y Saludos

      Eliminar
  5. Hola luis funciona perfecto pero me puedes ayuda he usado el codigo y es pero quiero saber como quitar la x o ocultarla que es para cerrar el cartel espero tu respuesta gracias por todo

    ResponderEliminar
    Respuestas
    1. Hola, no es posible ya que esta insertado en el Script.
      Saludos

      Eliminar
    2. Gracias por responder pero habia visto unos sin la x habrian puesto algo para ocultarla o a lo mejor seria otro codigo iwal muchas gracias siempre son utiles tus blog

      Eliminar
    3. Hola ZONADEBARRIO DANI , claro que es posible!!!, busca en el código "closeable: false," y sustituyelo por un "TRUE" quedaría "closeable: true," , No te olvides de seguirnos: http://www.graficx.com.mx

      Eliminar
  6. Hola Luis , como se hace para que solo le aparezca la caja una vez a cada usuario y no siempre que ingrese en mi pagina web? saludos.

    ResponderEliminar
    Respuestas
    1. Hola, el codigo esta creado para que aparesca las veces que sea necesario, al momento que habran cualquier pagina, Asi que tendra que quedarse, asi, tal vez para prosimas publicaciones, se implementara un script para que solo se habra en una sola vez.
      Saludos.

      Eliminar
  7. HOLA LUIS CHAVEZ E INTENTADO BASTANTE PERO NO PUEDO PONERLO LO PUSE Y DESPUES SE DESAPARECIO GRACIAS ESTE ES MI BLOG WWW.BONAOMUSICAL.COM VISITALO Y AYUDAME POR FAVOR GRACIAS

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, abre el widget que contiene el codigo, y borra esta linea de codigo: https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
      Eso es todo, ahora dale un clic en guardar y veras que te funciona
      Saludos.

      Eliminar
    2. hola como esta quiero k me ayude con mi blog quiero poner los botones de facebook,twitter y googles+1 en mi blog de bajo de cada entrada me podria ayudar en eso te lo agrade seria...

      Eliminar
    3. hola como esta quiero k me ayude con mi blog quiero poner los botones de facebook,twitter y googles+1 en mi blog de bajo de cada entrada me podria ayudar en eso te lo agrade seria...

      Eliminar
  8. Sobre el Widget Me gusta Facebook Google + y Twitter Popout para blogger .
    Lo estoy probando en notepad++ antes de subirlo y funciona, lo que no aparecen los botones de twittrer y google

    ResponderEliminar
  9. Hola,
    En el siguiente widget: Me gusta Facebook Google + y Twitter Popout para blogger.

    Lo estoy probando en notedap++ y va bien lo que pasa es que sólo sale el botón de twiter.
    El de Facebook y google si.

    Gracias ,

    ResponderEliminar
    Respuestas
    1. HOla, no entiendo a tu pregunta "Lo estoy probando en notedap++ y va bien lo que pasa es que sólo sale el botón de twiter. El de Facebook y google si."
      Espero otro comentario
      Saludos.

      Eliminar
  10. No se que pase, pero e intentado con muchos po pups y ya no se ve el boton de "like" y sale en blanco :/ e igual en otros blogs

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a tu pregunto, si sale perfectamente el boton LIke de facebook, tal vez en tu navegador no tengas habiliatado algun complemento, y es por eso que no se te muestra.
      Saludos

      Eliminar
    2. Hola Luis chávez, tengo una una duda con el popout, quiero que se comparta el blog en facebook y no una fanpage de facebook, ¿cómo puedo hacerlo?

      Tu popout es el mejor que encontré, gracias.
      Muchos saludos y un abrazo.

      Eliminar
  11. Quisiera colocar el boton " sigueme " de twitter que podria hacer?

    ResponderEliminar
  12. Muchas gracias por la explicación. Yo tengo una "pagina" profesional de Facebook, que obligatoriamente tiene que ir asociada a una cuenta personal. Cuando realizo este procedimiento que explicáis, el botón me gusta queda asociado a la cuenta personal, no a la página profesional. Si intento hacer este procedimiento, estando logeado en la página profesional, facebook me hace cambiar a la cuenta personal. ¿alguna idea? Muchas gracias.

    ResponderEliminar
  13. Capo,una cosa D:
    Es que puse el código y cambie las cosas pero luego sólo me salía para twitter :c

    ResponderEliminar
    Respuestas
    1. Hola, vuelva a insertar nuevamente todo el código y ha realizar los cambios donde lo indico en este tutorial, Saldos

      Eliminar
  14. El boton de facebook no aparece debe faltar algún arreglo lo mismo que dice LITTLE_ DREAMER

    ResponderEliminar
  15. Hola, acabo de agregar la caja y funciona pero no logro ver los iconos de Twitter ni el de Facebook. ¿Porque?


    AYUDAME, FUE LA ÚNICA CAJA QUE FUNCIONO PERO ME FALTA ESE DETALLE.

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios