Cajon «Popup» de Bienvenida Usando jQuery para Blogger

  • mayo 26, 2013

Hola a todos, estuve fuera por un tiempo pero ya estoy en esto de nuevo, en esta ocacion 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.

Tambien puesdes 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.

No Comments Found