Página Principal blogger codigos html Recursos Online

Crear cajas deslizantes para promocionar redes sociales

Por: Zheard (Lennyn)

abril 25, 2022

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

<br /><style><br />#flotante1 {position:fixed;top:100px;right:-250px;float:right;width:288px;display:block;padding:0;z-index:1002;-moz-transition: all 1s;<br />-webkit-transition: all 1s;-o-transition: all 1s;}<br />#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;}<br />#flotante1:hover, #flotante2:hover{right:0px;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}<br />div.zheardbox0 {margin-top:-5px;margin-left:-45px;width:238px; height:325px;background-color:#fff;overflow:hidden;border-radius:10px;}<br /></style><br /><!-- Primera pestaña --><br /><div id='flotante1'><br /><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXH10X-vpwSibySc4W2m3iJgJ92tI_SJ4qm_L0pru0nS7-2c5OxPHfRYfJFPo3BVT5W1JuPyfREDffCDrtWTqnWGSlkN5ztXvaaEovAnu1VTsL0qe4H6ay-12AVl9sf1aKyg5HXdZq9o/' style='float:left;'/><br /><div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><br />  <span><br />  <div class='zheardbox0'><br />  <!-- aqui el codigo a editar--><br />    <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><br />    <!-- fin del codigo--><br /></div></span></div></div><br /><br /><!-- Segunda pestaña --><br /><div id='flotante2'><br /><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8H6HNFJQGrSgXjukjpkAjsXo8SVmy86uKjMmca8H2_bGBK0s5qXuaP0791uxpSBPAeopE8ieu152uJVpNMxikuVke3JsxShYLnPFeFSjWVqD631kP8el6oGdptk_Ufgrln8c-JZQ-Mu0/' style='float:left;'/><br /><div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><br />  <span><div class='zheardbox0'><br /> <!-- aqui el codigo a editar--><br />    <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><br />    <!-- fin del codigo-->   <br />    </div></span></div></div><br />

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

Comentar WhatsApp Telegram

Zheard (Lennyn)

Hola soy Zheard. Me gusta compartir de todo un poco en este blog. No olviden visitar la sección 'anécdotas' y leer un loco de nuestras historias... (Pdta. No crean todo lo que dice Rich!)

Ver Comentarios / Publicar un comentario

Publicar un comentario