Como poner una ventana emergente (pop up) para compartir y dar a Me gusta en las redes sociales



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

#stp-main{
            position:fixed;
            top:220px;
            _position:absolute;
            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: "Bienvenid@ a Consejos para novatos",              
message: 'No te olvides de Recomendarnos  <em> en las redes sociales</em>! ',                     google_url: "http://consejosparanovatos.blogspot.com", google_size: "tall",                     fb_url: "http://www.facebook.com/pages/Teodorus-Maximus/549671968430429",   fb_layout: "box_count",                     closeable: true,                      advancedClose: false,                      opacity: '0.45', twitter_on: true          
});              
});  
</script>

17 comentarios:

  1. eeey contestenme una pregunta como hago para kitar la tachita para que no lo puedan kitar lo ago para k esperen

    ResponderEliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. Hola, muy buenos recursos y muy llamativa su página. Me gustó el código, pero me gustaría cambiarle el tamaño ya que la parte inferior donde aparece "Aceptar", no se ve. Cómo lo haría? Saludos

    ResponderEliminar
  4. COMO HAGO PARA QUITAR LOS MARGENES QUE LE SOBRAN CUANDO PONGO UN GADGET AYUDA PLIS

    ResponderEliminar
    Respuestas
    1. Hola. Por favor, escribeme en minúsculas. En plantilla, personalizar, avanzado, tienes la opción de gadget. saludos

      Eliminar
  5. Hola un fabor me funciona el codigo de maravilla, pero no quiero que salga lo de twiter y google, que cosas hay que quitarle para que solo me salga el me gusta de facebook porfaaaaaa

    ResponderEliminar
    Respuestas
    1. Hola, estan integrados, no se pueden quitar de aqui. si quieres el de facebook solo, puedes poner el del vídeo 102 https://www.youtube.com/watch?v=ZJxtznjeSnA&index=109&list=PLxrlSPzTYmSweRY4a2adrDLHrHX77ebTm

      Eliminar
  6. bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdbhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbdhgffffffffxbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbd

    ResponderEliminar
  7. hola puse este gadget pero no se si lo puse mal o esque no me sale porque tengo un me gusta o un google + me puedes ayudar

    ResponderEliminar
    Respuestas
    1. Hola, te recomiendo el vídeo 102 https://www.youtube.com/playlist?list=PLxrlSPzTYmSweRY4a2adrDLHrHX77ebTm .saludos

      Eliminar
  8. este es mi blog para que mires y eso
    http://senalesdelaire.blogspot.com.es/

    ResponderEliminar
  9. ando buscando donde se supone que debo poner la cuenta de twitter ma no puedo encontrar exactamente donde ponerla

    ResponderEliminar
    Respuestas
    1. Hola. en ningún sitio, se comparte en tu twitter directamente (en el de la persona que le de al boton), no hace falta meterlo en el codigo. saludos

      Eliminar
  10. hola, la verdad es que es muy util, yo estoy buscando que salga un popup con informacion y alguna foto, tu sabrías indicarme si hay algún código disponible para poner en html en dreamwaver? gracias de nuevo

    ResponderEliminar
    Respuestas
    1. Hola Luz, en la lista de reproducciones tienes mas vídeos con pop ups e incluso la imagen esa que va bajando: https://www.youtube.com/playlist?list=PLxrlSPzTYmSweRY4a2adrDLHrHX77ebTm saludos

      Eliminar
  11. Buen tutorial saludos desde Colombia. Este código lo podría usar como algo informativo que me lleve a un artículo en mi blog..?

    ResponderEliminar