Botones y/o cajas flotantes con HTML en blog (Blogger)

Estos HTMLs de ventanas deslizantes es muy frecuente en los Blogs (Blogger) nos permite colocar ventanas flotantes o scroll al bajar la página. Al pasar cursor en las pestañas muestran contenido alojado y regresa a su forma oculta tras mover o salir fuera del continido.

El código CSS y HTML de continidos flotantes es ideal para agregar botones de redes sociales, anuncios, novedades o la que mejor se adapte a tu blog tambien se puede cambiar posición, color o incluir más ventanas flotantes.

CODIGO CSS + HTML

<style>
#flotante1 {position:fixed;top:100px;right:-250px;float:right;width:288px;display:block;padding:0;z-index:1002;-moz-transition: all 1s;
-webkit-transition: all 1s;-o-transition: all 1s;}
#flotante2 {position:fixed;top:240px;right:-250px;float:right;width:288px;display:block;padding:0;z-index:1003;border-radius:10px;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
#flotante1:hover, #flotante2:hover{right:0px;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
div.zhaendbox0 {margin-top:-5px;margin-left:-45px;width:238px; height:325px;background-color:#fff;overflow:hidden;border-radius:10px;}
</style>
<!-- Primera pestaña -->
<div id='flotante1'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1LHwUqqC0Ve82hXoFEfLUOguPt7uaf8QjBi82_BS4nvll8IxNTM5kgygMM3qH8hqRzvgChAZIEc2RLVcLIP9BgjD8jlBCaFiPtI1EHPXOYUaihj-pt-diwJol_j9POM7ShqCqV58o1_63kDFiLpDhgIGWOeCyyD_vZNRRS49vsieaPUxf0ycPSPyH/s1600/zhaend_tabFB.png' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'>
  <span>
  <div class='zhaendbox0'>
  <!-- aqui el codigo a editar-->
    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FSantosNetsiOficial%2F&tabs=timeline&width=240&height=325&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2765862653742140" width="240" height="325" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
    <!-- fin del codigo-->
</div></span></div></div>

<!-- Segunda pestaña -->
<div id='flotante2'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj-IvWW3ML_sA_ybxBPW0--uC5bMrg7fx8Oc6GMfdiEHNhYX9_21kzkj_qHMuKfPjNKNGKnX3qqJNLmOfpbQcxwMD50F-_sDUFApgfNkkztWm0D7s2wCKEQB22tHBSeGYezVVG_2BUtk0QsiN3UbS04CaxWFK73io4MMrbQvSl0hd44AeNE4p1Qqxp/s1600/zhaend_tabTW.png' style='float:left;'/>
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'>
  <span><div class='zhaendbox0'>
 <!-- aqui el codigo a editar-->
    <a class="twitter-timeline" data-height="500" data-tweet-limit="5" href="https://twitter.com/zhaend_?ref_src=twsrc%5Etfw">Tweets de @zhaend_</a> <script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
    <!-- fin del codigo-->   
    </div></span></div></div>

NOTA: Copia el código y pégalo en una vista HTML junto a otros códigos. Si es para un blog Blogger, puedes ir a Diseño >Añadir un Gadget > HTML/Javascript. Luego pegar el código en la caja de texto y guardar. Recuerda que puedes editarlo y agregar otra ventana y/o contenido.

Tweets de @zhaend_

Los anuncios van aquí

Publicar un comentario

Labels#blogger, #codigos html

Zhaend Bohemio

¡Qué tal! Soy Zhaend. Me vacila compartir de todo un poco por este blog. Pásense por la sección de 'anécdotas' y métanse en nuestras historias... (PD: No le crean mucho a lo que dice el Rich, ah).

Botones y/o cajas flotantes con HTML en blog (Blogger)

CODIGO CSS + HTML

Comentarios

Search This Blog

Labels

Popular Posts

Labels

Pages

Denunciar abuso

Acerca de mí

Archive

Labels

Formulario de contacto