Inicia sesión




Cómo crear una barra lateral flotante para compartir en redes sociales con CSS

Cómo crear una barra lateral flotante para compartir en redes sociales con CSSLas redes sociales toman una parte importante de su negocio en línea para llegar a más clientes. Los botones de redes sociales son muy útiles para cada sitio web y ayudan al usuario a obtener actualizaciones del sitio web. Además, la barra social fija seguramente aumenta los seguidores de las redes sociales de su sitio web y ayuda a atraer tráfico a su sitio web. En este tutorial, vamos a crear una barra de botones de redes sociales con CSS sin afectar el diseño del sitio web.

Puede encontrar muchos complementos de jQuery para la barra lateral flotante, pero puede afectar la velocidad y el diseño de su sitio. Para superar este problema, proporcionaremos un código CSS simple para agregar una barra social animada adhesiva en el lado izquierdo / derecho de su sitio web. Puede agregar esta barra lateral flotante de redes sociales con un desplazamiento suave sobre la animación usando CSS.

En este código de ejemplo, implementaremos una barra de botones para compartir en redes sociales en el lado derecho con CSS puro. En esta barra social, se incluirán algunos de los enlaces de redes sociales más populares: Facebook, Twitter, Google+, LinkedIn, YouTube y Pinterest.

Código HTML


Coloque el siguiente HTML en el elemento < body > de la página web y agregue los enlaces de su perfil social a los iconos sociales respectivos.
<div class="sticky-container colored-icons">
<ul class="sticky">
<li>
<a href="https://www.facebook.com/sharer/sharer.php?app_id=502597016568810&sdk=joey&u=https://tutorialesenlinea.es/" title="Conectar con Facebook" data-tag="Conectar con Facebook" onclick="window.open(this.href, this.target, 'width=770,height=368'); return false;">
<i class="link-facebook fab fa-facebook-square" style="font-size:35px;margin-left: 2px"></i><p> Conectar con<br>  Facebook</p></a>
</li>
<li>
 <img src="https://polloloco.x10.bz/images/facebook-messengerimg.png" width="39" height="40">
<p><a href="https://m.me/pollolocotulua" title="Conectar con Messenger" data-tag="Conectar con Messenger" onclick="window.open(this.href, this.target, 'width=770,height=600'); return false;"> Enviar en<br> Messenger</a></p>

</li>
<li>
<a href="https://twitter.com/intent/tweet?status=Tutoriales En Linea es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad... Leer Mas...https://tutorialesenlinea.es/" title="Conectar con twitter" data-tag="Conectar con twitter "onclick="window.open(this.href, this.target, 'width=770,height=368'); return false;">
<i class="link-twitter fab fa-twitter" style="font-size: 35px; margin-top: -12px;"></i><p> Enviar en<br>  twitter</p></a>
</li>
<li>
<a href="https://www.pinterest.com/pin/create/button/?url=https://tutorialesenlinea.es/}&media=https://tutorialesenlinea.es/images/pollo-loco.png&description=Tutoriales En Linea es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad... Leer Mas..." title="Conectar con pinterest" data-tag="Conectar con pinterest" target="_blank">
<i class="link-pinterest fab fa-pinterest" style="font-size: 35px; margin-top: -12px;"></i><p> Enviar en<br>  pinterest</p></a>
</li>
<li>
<a href="https://www.youtube.com/channel/UCmLh2x63ZgtDnbTr3ZEi3TQ?sub_confirmation=1" target="_blank">
<i class="link-pinterest fab fa-youtube" style="font-size: 35px; margin-top: -12px;"></i><p> Enviar en<br>  Youtube</p></a>
</li>
<li>
<img src="https://polloloco.x10.bz/images/WhatsApp.png" width="39" height="40">
<p><a href="https://api.whatsapp.com/send?text=Tutoriales En Linea es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad....https://polloloco.x10.bz" aria-label="Compartir en WhatsApp" data-action="share/whatsapp/share" title="Compartir en WhatsApp" rel="noopener external noreferrer" target="_blank"> Enviar en<br> WhatsApp</a></p>
</li> 
</ul>
</div>
Podemos utilizar tanto imágenes como @font-face para el diseño anterior

Código CSS


El siguiente snippets de CSS es suficiente para implementar un sidebar flotante con los típicos botones para compartir en redes sociales en tu sitio web. Coloca este código dentro de la sección <head> de tu página web.
<style>
.sticky-container{
    padding:0px;
    margin:0px;
    position:fixed;
    right:-130px;
    top:230px;
    width:210px;
    z-index: 1100;
}
.sticky li{    border-radius: 8px; margin-top: 2px;list-style-type:none;background-color:#fff;color:#efefef;height:38px;padding:0px;margin:0px 0px 2px 0px;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;cursor:pointer;}
.sticky li:hover{ margin-left:-95px;}
.sticky li img{ float:left;}
.sticky li p{padding-top:5px;margin:0px;line-height:16px;font-size:small;display: inline-block;}
.sticky li p a{text-decoration:none;color:#2C3539;}
.sticky li p a:hover{ text-decoration:underline;}
.social-icons a {padding: 6px 8px; display:inline-block;}
.social-icons.big-icons a{font-size:28px; padding-left: 12px; padding-right: 12px;}
.social-icons.bigger-icons a{font-size:38px;padding-left: 14px;padding-right: 14px;}
.social-icons a:hover { text-decoration: none !important; }
.colored-icons .link-vk, .link-vk:hover{ color:#5181B8; }
.colored-icons .link-facebook, .link-facebook:hover{ color:#3b5998; }
.colored-icons .link-twitter, .link-twitter:hover{ color:#1da1f2; }
.colored-icons .link-telegram, .link-telegram:hover{ color:#28A0D4; }
.colored-icons .link-instagram, .link-instagram:hover{ color:#833ab4; }
.colored-icons .link-youtube, .link-youtube:hover{ color:#d30606; }
.colored-icons .link-pinterest, .link-pinterest:hover{ color:#e60023; }
.colored-icons .link-linkedin, .link-linkedin:hover{ color:#0077b5; }
</style>
Ver resultados

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-27
  • Categorias: Diseño Web Redes Sociales WebSite webmasters Noticias Tutorial

Cómo crear una barra lateral flotante para compartir en redes sociales con CSS
Cómo crear una barra lateral flotante para compartir en redes sociales con CSS Cómo crear una barra lateral flotante para compartir en redes sociales con CSS...
Tutoriales en linea




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Una guía para principiantes sobre discos duros externos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-28
  • Categorias: Windows Apple hardware Nuevas Tecnologias Noticias Tutorial

Access desde cero

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-26
  • Categorias: Herramientas Ofimaticas Microsoft Cursos Noticias Tutorial

Mejoras en los graficos y tablas en Google App

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Google Apps Herramientas Ofimaticas Noticias Tutorial

Access desde cero

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-26
  • Categorias: Herramientas Ofimaticas Microsoft Cursos Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial