Header Ads Widget

Ticker

6/recent/ticker-posts

Cree una barra lateral flotante de redes sociales pegajosas con CSS

 Las redes sociales son una de las principales fuentes para hacer crecer los lectores de su blog en estos días. El sitio web de redes sociales tiene millones de usuarios y le ayuda a conectar más audiencia en todo el mundo.

Agregar un botón de redes sociales al blog ayuda al lector a obtener las últimas actualizaciones del canal social.

En este tutorial veremos cómo crear  íconos flotantes de redes sociales  usando css 

Crearemos una  barra lateral flotante Sticky Social media  en el lado izquierdo de la página web usando html y css.

La barra adhesiva  para compartir en redes sociales ayuda a aumentar el tráfico al compartir publicaciones de blog en las redes sociales. También ayuda a los lectores a recomendar artículos útiles a otros.

En este ejemplo, crearemos una barra lateral flotante de Sticky Social media con un código html y css simple que siempre es fijo mientras el usuario se desplaza por la página web para leer su contenido.

Esto agregará botones  para compartir en redes  sociales para compartir su publicación de blog con los lectores de su blog.

HTML

Primero escribimos código html para crear un botón de compartir en redes sociales.

 <div id = "compartir">

            <! - botón para compartir de Facebook ->
            <a class = "facebook" href = " https://www.facebook.com/share.php?u=http://www.phpcluster.com/add-wysiwyg-html-editor-textarea-site/&title= Agregue el editor HTML WYSIWYG a Textarea en su sitio "target =" blank "> <i class =" fa fa-facebook "> </i> </a>

            <! - botón para compartir en Twitter ->
            <a class = "twitter" href = " https://twitter.com/intent/tweet?status=Add WYSIWYG HTML Editor a Textarea en su sitio + http://www.phpcluster.com/add-wysiwyg-html-editor -textarea-site / "target =" blank "> <i class =" fa fa-twitter "> </i> </a>

            <! - botón para compartir de google plus ->
            <a class = "googleplus" href = " https://plus.google.com/share?url=http://www.phpcluster.com/add-wysiwyg-html-editor-textarea-site/ " target = " en blanco "> <i class =" fa fa-google-plus "> </i> </a>

            <! - botón de compartir de linkedin ->
            <a class = "linkedin" href = " https://www.linkedin.com/shareArticle?mini=true&url=http://www.phpcluster.com/add-wysiwyg-html-editor-textarea-site/&title= Agregue el editor HTML WYSIWYG a Textarea en su sitio & source = {{source}} "target =" blank "> <i class =" fa fa-linkedin "> </i> </a>

            <! - botón de compartir de Pinterest ->
            <a class = "pinterest" href = " https://pinterest.com/pin/create/bookmarklet/?media=http://www.phpcluster.com/images/html-text-editor-to-textarea.jpg&url = {{http://www.phpcluster.com/add-wysiwyg-html-editor-textarea-site/}} & is_video = false & description = Agregue el editor HTML WYSIWYG a Textarea en su sitio "target =" blank "> <i clase = "fa fa-pinterest-p"> </i> </a>
</div> 

 CSS

Primero incluye una fuente impresionante 

<link href = " https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css " rel = "stylesheet">

 Ahora que se crea la barra de compartir en redes sociales, ahora escribimos algunos CSS para arreglar su posición y darle un efecto de estilo.

#compartir {
    arriba: 25%;
    izquierda: 0;
    posición: fija;
    índice z: 9999;
}
#comparten un {
    ancho: 35px;
    altura: 35px;
    bloqueo de pantalla;
    relleno: 17px;
    margen superior: 8px;
    tamaño de fuente: 24px;
    color: #fff;
    opacidad: 1;
    transición: opacidad 0,15 s lineal;
}

#share a: hover {
    opacidad: 2;
}

#share i {
    posición: relativa;
    izquierda: 50%;
    arriba: 50%;
    transformar: translateX (-50%) translatey (-50%);
    -webkit-transform: translateX (-50%) translatey (-50%);
    -moz-transform: translateX (-50%) translatey (-50%);


}

.Facebook {
    fondo: # 3b5998;
}

.twitter {
    fondo: # 55acee;
}

.Google Mas {
    fondo: # dd4b39;
}

.linkedin {
    fondo: # 0077b5;
}

.pinterest {
    fondo: # cb2027;
}

Publicar un comentario

0 Comentarios