Crear cajas deslizantes para promocionar redes sociales

Este código HTML muy popular en los Blogs (Blogger) permite crear ventanas deslizantes en la parte derecha de la página. Al hacer click en las pestañas muestran contenido oculto que desaparece tras volver a dar otro click.

El código CSS y HTML se puede editar para cambiar posición, color o agregar más ventanas flotantes. Es ideal para colocar anuncios, noticias o promocionar tus redes sociales.

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.zheardbox0 {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/AVvXsEjUo_koqJHj10T6VJhXd2kLDDcIZKH_ETTHGZnpILqJKDkvvEDMx6wjNLZLFvb5haj_tYxNzdMT3EkVzhZyEbcCEp4txxTMKg6d6jvDuogjSvfSNpPyddxE8Ry9dkYOJfFm8XLXJzlUEas/' 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='zheardbox0'>
  <!-- aqui el codigo a editar-->
    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FCompuNetsiOficial%2F&tabs=timeline&width=240&height=325&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=201685646561164" 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/AVvXsEh1UPxL8X-RZojoR2t86BUGaTZZ8XjwPHV1yY_kVvyjONnoDj7CJA0CRAQwjaPv0zKD4AY04rMhqBSXjTq26FtoBqzRj4Vukhm3PFMPyS71qGYvZx6gl9KZZEADboLG9M2_vdB__iMv5lw/' 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='zheardbox0'>
 <!-- aqui el codigo a editar-->
    <a class="twitter-timeline" data-height="500" data-tweet-limit="5" href="https://twitter.com/zheard?ref_src=twsrc%5Etfw">Tweets de @zheard</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.

* El ejemplo de este código puedes verlo en esta publicación en la parte derecha.

Tweets de @zheard