Mil Trucos Bloggers

Tutoriales y recursos para Blogger

Select Menu
  • Home
  • Blogging
    • Tutorial Blogspot
    • CSS
    • jQuery
    • Widget
  • Tools
    • Font Awesome
    • HTML Editor
    • HTML Encrypter
    • Code Color
    • Responsive Cek
  • Sitemap
  • Static Page
  • Error Page
Home » Gadgets y Widgets » Recomendados » Cajon "Popup" de Bienvenida Usando jQuery para Blogger

sábado, 18 de mayo de 2013

Cajon "Popup" de Bienvenida Usando jQuery para Blogger

Add Comment
Gadgets y Widgets, Recomendados
sábado, 18 de mayo de 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.

Anuncios patrocinados por Google AdSense


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!!

Share

Like

G+

Tweet

Tweet
0 Komentar untuk "Cajon "Popup" de Bienvenida Usando jQuery para Blogger"

Add Comments

Entrada más reciente Entrada antigua Página Principal
Suscribirse a: Comentarios de la entrada (Atom)

Popular Week

  • Scroll infinito en Blogger
    Scroll infinito en Blogger
    Una de las nuevas formas de cargar una pagina web o blog, es el scroll infinito , el cual consta en que a medida que se vaya bajando el con...
  • Últimas Entradas Personalizadas con Icono
    Últimas Entradas Personalizadas con Icono
    Hace unos dias publique una entrada titulada  Ultimos Comentarios Personalizados con Icono ,pues bien despues de probar un rato con los codi...
  • Pop Up Me gusta de Facebook para Blogger
    Pop Up Me gusta de Facebook para Blogger
    Un usuario anonimo me pidio un truco tipo PopUp en el se mostrase el boton Me Gusta de Facebook,y buscando un poco he encontrado el tutorial...
  • Plantilla BloggerTube
    Plantilla BloggerTube
    BloggerTube es una de las plantillas mas populares entre los Bloggeros en especial para aquellos que desean crear un blog de videos o musica...
  • Las 5 etapas en la vida de un blogger,¿En qué fase te Encuentras ya?
    Las 5 etapas en la vida de un blogger,¿En qué fase te Encuentras ya?
    Hola estimados lectores. Creo que este artículo lo verán un tanto familiar algunos colegas, porque probablemente se apegará a varios sucesos...
  • Cambiate a facturas electronicas
    Cambiate a facturas electronicas
    Las facturas de papel fueron en su momento una gran idea pero en este siglo que ha sido denominado "el siglo de la tecnologia" han...
  • No olvides hacerle SEO a tu web
    No olvides hacerle SEO a tu web
    Ya en Mil Trucos Blogger hemos hablado sobre el SEO, pero hoy hablaremos para que sirve verdaderamente el SEO ya que he recibido muchas duda...
  • ¿Blogger es el producto favorito de Google?
    ¿Blogger es el producto favorito de Google?
    ¿Blogger es el producto favorito de Google?, esa es la pregunta que muchos se harán, luego de leer mi post de ayer el cual se titulaba  ¿Blo...
  • Juegos Android- Otro acierto de Google
    Juegos Android- Otro acierto de Google
    Desde que los celulares con el sistema operativo de Google: Android se volvieron muy populares ha crecido en torno a ellos una gran comunida...
  • Añadir el gadget de seguidores de Google+
    Añadir el gadget de seguidores de Google+
    El gadget de seguidores de Google +, salio hace muy poco tiempo y ya ha sido muy renombrado en los circulos sociales de los bloggeros, y hoy...

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

Blog Archive

  • ►  2014 (20)
    • ►  enero (20)
  • ▼  2013 (322)
    • ►  diciembre (34)
    • ►  noviembre (31)
    • ►  octubre (35)
    • ►  septiembre (33)
    • ►  agosto (42)
    • ►  julio (13)
    • ►  junio (17)
    • ▼  mayo (26)
      • Seguidores Blogger, Twitter y Facebook - Flotantes...
      • Programar la Publicación de tus entradas en blogger
      • Dividir el texto de una entrada en dos Columnas
      • No olvides hacerle SEO a tu web
      • Instalar Google Analytics en Blogger fácilmente
      • Joderinga- Mi nuevo blog
      • Scroll infinito en Blogger
      • Elegante Widget de suscripción para Blogger
      • Sexy Drop Down, Menú Desplegable para Blogger
      • Cajon "Popup" de Bienvenida Usando jQuery para Blo...
      • Gadget de Formulario de Contacto en Blogger
      • Google Play- La tienda de aplicaciones de Android
      • Samsung Galaxy S4- La sensación del momento
      • Sube posiciones rápidamente en Google con un buen ...
      • Mensaje del formulario de comentarios, siempre vis...
      • Cambiar los enlaces de navegación por el titulo de...
      • El desarrollo web y el diseño web (Un modo de vida)
      • Google Glass (Gafas de realidad aumentada)-La nuev...
      • Nueva Zona de Negocios en Mil Trucos Blogger
      • Como elegir el fondo adecuado para tu sitio web
      • Fanbox de Facebook, Twitter, y Google +, flotantes...
      • DCM Dark- Plantilla Premium para Blogger
      • Los mejores juegos de vestir para ti
      • Facebook en tu celular-Una gran app para Bloggeros
      • Banahosting-El mejor hosting para alojar tu web
      • Añadir los comentarios de Google Plus en WordPress
    • ►  abril (30)
    • ►  marzo (22)
    • ►  febrero (15)
    • ►  enero (24)
  • ►  2012 (171)
    • ►  diciembre (19)
    • ►  noviembre (20)
    • ►  octubre (13)
    • ►  septiembre (15)
    • ►  agosto (10)
    • ►  julio (10)
    • ►  junio (8)
    • ►  mayo (15)
    • ►  abril (12)
    • ►  marzo (15)
    • ►  febrero (19)
    • ►  enero (15)
  • ►  2011 (186)
    • ►  diciembre (20)
    • ►  noviembre (16)
    • ►  octubre (16)
    • ►  septiembre (16)
    • ►  agosto (18)
    • ►  julio (19)
    • ►  junio (22)
    • ►  mayo (25)
    • ►  abril (28)
    • ►  marzo (6)

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

© Mil Trucos Bloggers Published By Kaizen Templates powered by Blogger.com.
All Right Reserved By .