0
Las 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 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.futbolgratis.org/" 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.webp" 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 el desarrollo de algún procedimiento o los pasos para realizar determinada actividad... Leer Mas...https://tutorialesenlinea.futbolgratis.org/" 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.futbolgratis.org/}&media=https://tutorialesenlinea.futbolgratis.org/images/pollo-loco.webp&description=Tutoriales En Linea es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al 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.webp" 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 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>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>
Comentarios