Para crear una barra adhesiva de redes sociales en cualquier sitio web , se utilizan HTML y CSS . Si desea adjuntar los íconos con las redes sociales adhesivas, entonces necesita un enlace CDN con una fuente impresionante. En estos días, las redes sociales son la mejor plataforma para publicitar tus cosas. Redes sociales, donde puede informar fácilmente al cliente o al usuario sobre su producto, el usuario puede compartir los detalles del producto en su cuenta de redes sociales si le gusta su producto. Por lo tanto, crear una barra de redes sociales fija a veces hace que su sitio sea más lento (si está utilizando complementos de jQuery para la barra de redes sociales fija). En este artículo, aprenderá cómo adjuntar una barra adhesiva de redes sociales en su sitio web. Este artículo está dividido en dos secciones Creando Estructura y Diseñando Estructura.
Vistazo de Sticky Social Media Bar completo:
Creación de estructura: en esta sección, crearemos una estructura básica del sitio y también adjuntaremos el enlace CDN de Font-Awesome para los íconos que se usarán como una barra adhesiva de redes sociales.
- Enlaces CDN para los iconos de Font Awesome:
<enlace rel=”hoja de estilo” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
- Código HTML para hacer la estructura:
HTML
<!DOCTYPE html> <html> <head> <title>Sticky Social Media Bar</title> </head> <body> <center> <h3>Sticky Social Media Bar</h3> <!-- Icons for the sticky Social Bar --> <div class="body-part"> <div class="icon-list"> <a href="#instagram" class="instagram"> <i class="fa fa-instagram"></i> </a> <a href="#facebook" class="facebook"> <i class="fa fa-facebook"></i> </a> <a href="#twitter" class="twitter"> <i class="fa fa-twitter"></i> </a> <a href="#linkedin" class="linkedin"> <i class="fa fa-linkedin"></i> </a> <a href="#google" class="google"> <i class="fa fa-google"></i> </a> <a href="#youtube" class="youtube"> <i class="fa fa-youtube"></i> </a> </div> <!-- Content of the Page --> <h2>GeeksforGeeks</h2> <p> An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. </p> <p> Only the zeal to learn and improve yourself is all we need. Anyone who has a passion for learning and writing is welcome to write for us. Contribution on GeeksforGeeks is not limited to writing articles only, below are the details about the ways in which you can help us and other fellow programmers: </p> <p> If you like GeeksforGeeks and would like to contribute, you can also write an article using write.geeksforgeeks.org or mail your article to review-team@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks. </p> </div> </center> </body> </html>
Estructura de diseño: en la sección anterior, hemos creado la estructura del sitio web básico donde vamos a utilizar barras adhesivas de redes sociales. En esta sección, diseñaremos la estructura y adjuntaremos los íconos adhesivos de la barra de redes sociales.
- Código CSS para que quede bien la estructura:
HTML
<style>
/* Styling Body-part */
.body-part {
width: 600px;
height: 200px;
border: 3px solid black;
overflow: auto;
}
h2 {
color: green;
}
/* Justifying Content text */
p {
text-align: justify;
margin: 40px;
}
/* Styling icons */
.icon-list {
position: fixed;
top: 242px;
right:40%;
transform: translateY(-50%);
}
.icon-list a {
display: block;
text-align: center;
padding: 8px;
transition: all 0.5s ease;
color: white;
font-size: 20px;
float:right;
}
/* HOver affect on icons */
.icon-list a:hover {
color: #000;
width:50px;
}
/* Designing each icons */
.instagram {
background: #3f729b;
color: white;
}
.facebook {
background: #3b5998;
color: white;
}
.twitter {
background: #00acee;
color: white;
}
.linkedin {
background: #0e76a8;
color: white;
}
.google {
background: #db4a39;
color: white;
}
.youtube {
background: #c4302b;
color: white;
}
</style>
Combine el código HTML y CSS: este es el código final después de combinar las dos secciones anteriores. Creará una barra adhesiva de redes sociales de un sitio web.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sticky Social Media Bar</title>
<!-- Linking Font-Awesome For the Icons -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Styling Body-part */
.body-part {
width: 600px;
height: 200px;
border: 3px solid black;
overflow: auto;
}
h2 {
color: green;
}
/* Justifying Content text */
p {
text-align: justify;
margin: 40px;
}
/* Styling icons */
.icon-list {
position: fixed;
top: 242px;
right:40%;
transform: translateY(-50%);
}
.icon-list a {
display: block;
text-align: center;
padding: 8px;
transition: all 0.5s ease;
color: white;
font-size: 20px;
float:right;
}
/* HOver affect on icons */
.icon-list a:hover {
color: #000;
width:50px;
}
/* Designing each icons */
.instagram {
background: #3f729b;
color: white;
}
.facebook {
background: #3b5998;
color: white;
}
.twitter {
background: #00acee;
color: white;
}
.linkedin {
background: #0e76a8;
color: white;
}
.google {
background: #db4a39;
color: white;
}
.youtube {
background: #c4302b;
color: white;
}
</style>
</head>
<body>
<center>
<h3>Sticky Social Media Bar</h3>
<!-- Icons for the sticky Social Bar -->
<div class="body-part">
<div class="icon-list">
<a href="#instagram" class="instagram">
<i class="fa fa-instagram"></i>
</a>
<a href="#facebook" class="facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="#twitter" class="twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="#linkedin" class="linkedin">
<i class="fa fa-linkedin"></i>
</a>
<a href="#google" class="google">
<i class="fa fa-google"></i>
</a>
<a href="#youtube" class="youtube">
<i class="fa fa-youtube"></i>
</a>
</div>
<!-- Content of the Page -->
<h2>GeeksforGeeks</h2>
<p>
An IIT Roorkee alumnus and founder of GeeksforGeeks.
He loves to solve programming problems in most
efficient ways. Apart from GeeksforGeeks, he has
worked with DE Shaw and Co. as a software developer
and JIIT Noida as an assistant professor.
</p>
<p>
Only the zeal to learn and improve yourself is all
we need. Anyone who has a passion for learning and
writing is welcome to write for us. Contribution
on GeeksforGeeks is not limited to writing articles
only, below are the details about the ways in which
you can help us and other fellow programmers:
</p>
<p>
If you like GeeksforGeeks and would like to
contribute, you can also write an article using
write.geeksforgeeks.org or mail your article
to review-team@geeksforgeeks.org. See your article
appearing on the GeeksforGeeks main page and help
other Geeks.
</p>
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA