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_