Mil Trucos Blogger

Cajon “Popup” de Bienvenida Usando jQuery para Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Hola a todos, estuve fuera por un tiempo pero ya estoy en esto de nuevo, en esta ocasión me gustaría compartir este truco con ustedes, quizás ya hayan visto algo como esto en otras webs y a decir verdad es una truco muy efectivo a la hora de promocionar promocionar nuestro blog en redes sociales.

Este Cajón de Popup, Contiene un diseño emergente usando jquery y css, Para cualquier visitante en su sitio, él o ella debe unirse o seguir a su página de fans, es un truco sencillo y de calidad.
Mas bien es un simple gadget que a su vez puede ser muy beneficioso para nosotros, el gadget contiene una ventana de bienvenida y botones de las redes sociales en las que este nuestro blog.

Pueden ver un demo del gadget en este blog, haciendo click abajo:

Bien Vamos a ponerlo en nuestro blog……..

1. Ir a Diseño >> Añadir un gadget >> Añadir un gadget HTML / JavaScript.
Después añadir este código:

<style>
#stp-bg{
 display:none;
 position:fixed;
 _position:absolute; /* hack for IE 6*/
 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;
}
.step-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/en_US/all.js#xfbml=1"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
<script type="text/javascript" src="http://swflor.googlecode.com/files/jquery.stp.min.js">
</script>       
<script>       $(document).ready(function(){                                                           $().socialTrafficPop({                      timeout: 30,             title: "Bienvenidos a mi Blog ",
message: 'Please Like And  <em>Help Us To Grow</em>! ',                     google_url: "", google_size: "tall",                     fb_url: "https://www.facebook.com/mi-url",   fb_layout: "box_count",                     closeable: true,                      advancedClose: false,                      opacity: '0.45', twitter_on: true             
});                 
});     
</script>

2. Ahora solo reemplaza este link: “https://www.facebook.com/mi-url” por la url de tu pagina de facebook.

Si quieres puedes cambiar el mensaje de bienvenida que esta en color rojo: “Bienvenidos a mi Blog” por el que desees.

También puedes configurar el tiempo del Popup cambiando donde dice:   timeout: 30,
(la cantidad que coloques es el tiempo en segundos que dura la ventana abierta)

Ahora ya tenemos el Popup en nuestro blog.
 
 
Si tienen alguna pregunta pueden dejarla en los comentarios!!! Saludos!!

 

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

23 Comentarios

  1. mayo 19, 2013    

    No consigo que me funcione en mi blogger…

  2. mayo 19, 2013    

    Saludos Hermanos no funciona en mi blog 🙁 le acomode la altura y el ancho y aun nada! lo coloque exactamente como el de usted y tampoco. agradecería mucho tu respuesta ^_^

  3. mayo 19, 2013    

    Buen tutorial hermano, compartido en mis redes sociales 🙂

  4. mayo 19, 2013    

    No me funciona!!!
    ¿Cual podría ser el error? Mi blog es este: http://jreformistas.blogspot.com/
    De todas maneras Gracias!! 😀

    • mayo 19, 2013    

      Antes que nada muy bonito tu blog, con respecto al gadget puede ser que tu plantilla ya contenga la versión de jQuery, te recomiendo agregar el código sin Jquery.

    • Anonymous Anonymous
      abril 1, 2014    

      ¿Como se agrega el código sin Jquery para que funcione correctamente?

    • abril 12, 2014    

      Elimina la siguiente parte:

      <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js”></script>

      Saludos

  5. mayo 19, 2013    

    @Jose casanova y @ANTONIO SANTOS , Me pueden dejar la direccion de su blog para ver si el truco funciona…Saludos!!

  6. mayo 20, 2013    

    como lo hago funcionar blog no jala en mi blog. la direccion es jpgcristianas.net

  7. mayo 28, 2013    

    No me funciona! Sera por la plantilla que utilizo.
    El código sin jQuery como seria me puedes ayudar acá mi blog http://disenowg.blogspot.com/

  8. julio 12, 2013    

    HOLA AMIGO ME GUSTARÍA SABER SI ESE CAJÓN DE GOOGLE + Y EL PLUGIN AÑADE ME A MI CIRCULO PUEDE FUNCIONAR EN UN SITIO WORDPRESS POR FAVOR RESPONDE ME LO MAS RÁPIDO ES PARA UN PROYECTO QUE TENGO EN MENTE

  9. julio 12, 2013    

    hola amigo me gustaría preguntarte algo la pregunta es si ese cajón el de google + junto con el plugin añade me a mi circulo sirvirian para colocarlos en un sitio wordpress

  10. ucv ucv
    septiembre 24, 2013    

    ya no da el codigo ???

  11. marzo 10, 2014    

    no me funciono el truco! que puede ser?

  12. marzo 31, 2014    

    Disculapa aun funciona este gadget?? lo instale en mi blog y no me aprece nada, porfavor diganme si aun sigue funcionando!!?? este es mi blog http://computer0wnez.blogspot.mx/

  13. mayo 31, 2014    

    No me funciono querido amigo u.u , hay alguna manera de solucionarlo?

    • junio 8, 2014    

      Tal vez haya problema con el Jquery, usas alguna versión de esta librería?

      Saludos

  14. junio 26, 2014    

    Este comentario ha sido eliminado por el autor.

  15. diciembre 22, 2014    

    Hola, muy detallada tu explicación. Me funciona pero la parte inferior de la ventana donde se debe dar click en “Acepara”, no se ve. Hay alguna manera de modificar su tamaño y posición? Que debo Modificar? Ya le di me gusta. Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo