Cajon "Popup" de Bienvenida Usando jQuery para Blogger

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:

Ver Demo

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.

Si tienen alguna pregunta pueden dejarla en los comentarios!!! Saludos!!