Ventana Flotante.

Nueva Ventana Flotante PopUp para blogger para poner lo que uno quiera dentro y con botón de cerrar ventana.

Todo tiene que ir en un widget y funciona perfecto.

COPIA Y PEGA EL SIGUIENTE CÓDIGO EN UN WIDGET-HTML

<div id='ventana-flotante'>
   <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<div id='contenedor'>
<div class='contenido'>
<style> 
#R91481-WG { width:300px;  border:5px double #DF0101;   padding:0px 0; border-radius: 10px;}    
.R91481-WG-wrapper {background:url(http://tellastoryphotography.com/wp-content/uploads/2014/12/Vintage-Retro-Paper-Background003a.png) no-repeat scroll 0 0 #f7f7f7;  color:#111;  font-size:10px;  line-height:20px;  text-align:center;  text-transform:uppercase;  padding:1px 20px 10px;  border-radius: 5px;}    
.R91481-WG-form {  clear:both; display:block;  margin:10px 0;}    
form.R91481-WG-form {  clear:both;  display:block;  width:auto;  margin:10px 0 0;}    
.R91481-WG-email-field { -moz-border-radius:4px;  -webkit-border-radius:4px;  background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWNZiZGLedSaSpcwKR3SsPH2XUcL6gX4Gcj0cU95aqvIqBljQTd9epkaFVVufz7z_mQ6DnSzABGGGKTFcFKXIzAVKXyVCQE2WzCDTMVvGvyr6MmIMG0VJJeYsrn-83nLb7I4G9hwovt-I/s1600/icons.png) no-repeat 0 -27px;  border:1px solid #ccc;  border-radius:4px;  color:#444;  width:68%;  margin:0 0 15px; padding:10px 40px;  }    
.R91481-WG-email-button {  background:#09f;  border:1px solid #007fff;  box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;  color:#fff;  cursor:pointer;  font-family:verdana;  font-weight:700;  text-shadow:1px 1px 0 rgba(0,0,0,.4);  text-transform:uppercase;  width:100%;  padding:10px;  }   
.R91481-WG-email-button:hover,.R91481-WG-email-button:focus {background:#1ca4ff;}    
.R91481-WG-email-button:active {  -moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;  -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;  box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;  outline:0;  }    
iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table {width:100%;} embed {border-radius:3px;  -moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);  -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);  background:#FFF;  border:1px solid #ddd;  box-shadow:0 2px 4px rgba(0,0,0,0.2);  margin:0;  padding:4px;}    
#footer-section {  border-top:1px solid #aaa;  box-shadow:inset 0 4px 6px -3px #aaa;  font-family:cambria;  font-size:14px;  height:100px;  text-align:center;  width:100%;  margin:10px -30px 5px;  padding:0 30px;  }
#iconos-sociales {text-align: center; /* Centrar los iconos */
}
#iconos-sociales a {color: #000000; /* Color de los iconos */
  margin: 0px 1px; /* Espacio entre los iconos */
  font-size: 13px; /* Tamaño de los iconos */
}
#iconos-sociales a:hover {
  color: #2E9AFE; /* Color de los iconos al pasar el ratón */
}
 </style>

<div id="R91481-WG">  <div class="R91481-WG-wrapper">  
<marquee bgcolor='#088A29' style='color:#ffffff; border-radius: 10px;'>   NUESTRO BLOG UTILIZA COOKIES PROPIAS Y DE TERCEROS. AL ACEPTARLAS ACEPTA NUESTROS SERVICIOS Y EL USO QUE HACEMOS DE LAS COOKIES. *Alicante en la Mochila* -  - </marquee>  

 <a href='http://www.ayudadeblogger.com/'></a> <font face="verdana"><h4><b>SUSCRIPCION GRATUITA ¡SUSCRIBASE YA!</b></h4>
<p><b>Reciba los Artículos en su Email</b></p></font>  <div class="R91481-WG-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/AlicanteMochila&amp;loc=es_ES" class="R91481-WG-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/AlicanteMochila&amp;loc=es_ES', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="blogspot/AlicanteMochila" />  <input name="loc" type="hidden" value="es_ES" /><input class="R91481-WG-email-field" name="email" autocomplete="off" placeholder=" Escriba aqui su E-Mail "/>  <input class="R91481-WG-email-button" title="" type="submit" value="SUSCRIBIRSE" /></form>  </div>

<div id="iconos-sociales"> 
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-facebook"></i></a> 
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-google-plus"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-pinterest"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-tumblr"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-vimeo"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-windows"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-youtube"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-apple"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-dropbox"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-skype"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-chrome"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-flickr"></i></a>
<a href="enlace-a-tu-red-social" target="_blank"><i class="fa fa-twitter"></i></a>
</div>
<a href='http://www.ayudadeblogger.com/'></a></div></div>
       </div></div>

<div id='reibbon-2';/>
<div style="position: relative;">
<style> 
#reibbon-2 {
width: 100px; height: 100px;
        position: absolute;
        top: 10px;
        left: 10px;
        bottom: 10px;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaOPb3_XVdip8DqkmK9-8Hof-zaN0wi_cAG0qlpG4NlWnE6uhQZ-CKiBt2R1xwuoKLM1h4RCsxZQVSVKtEWq0JiGNiDfKZrgzL1YRX9e-lscHJAOoV627oanz-bp9lDwNJ5f2pr0S5NTs/s1600/Reibbon_109x109.png) no-repeat;
        z-index: 1;
    }
</style>

<style>
#ventana-flotante {
width: 350px;  /* Ancho de la ventana */
height: 275px;  /* Alto de la ventana */
background:url(https://n6-img-fp.akamaized.net/free-vector/black-vintage-pattern-design_1217-31.jpg?size=338&ext=jpg) repeat scroll 0 0 #f7f7f7;/* Imagen exterior y Color de fondo */
position: fixed;
top: 150px;
left: 50%;
margin-left: -180px;
border: 2px solid #ffffff;  /* Borde de la ventana */
box-shadow: 10px 10px 20px #2E2EFE;/* Sombra */
z-index:999;
}
#ventana-flotante .cerrar {
float: right;
border-bottom: 1px solid #bbb;
border-left: 1px solid #bbb;
color: #ff6868;
background: white;
line-height: 17px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 18px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#ventana-flotante .cerrar:hover {
background: #ff6868;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#ventana-flotante #contenedor .contenido {
padding: 20px;
box-shadow: inset px 1px white;
border: 0px double #fbbc15;  /* Borde del mensaje */
font-size: 13px;  /* Tamaño del texto del mensaje */
}
.oculto {-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;opacity:0;-ms-opacity:0;-moz-opacity:0;visibility:hidden;}
</style>
<!--[if IE]>
<style>
.oculto {display:none}
</style>
<![endif]--></div></div></div>