TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Widget simple de iconos para compartir en redes sociales para Weebly

23

Hoy en día, el intercambio social es una parte esencial de cualquier sitio web. Permiten a los usuarios correr la voz instantáneamente con unos pocos clics al compartir su artículo. Si bien el marketing en redes sociales es un tema popular, los creadores de sitios como Weebly no ofrecen un widget para compartir en redes sociales para los usuarios. Lamentablemente, incluso los usuarios de planes de negocios en Weebly no tendrán íconos decentes para compartir en redes sociales en su sitio después de pagar casi $ 25 por mes. En este artículo, crearemos un widget CSS personalizado para compartir en redes sociales para el sitio Weebly y explicaremos cómo agregarlo en su sitio Weebly con enlaces para compartir en redes sociales.

Desafortunadamente, esto se debe hacer en cada página agregando la URL de la página. Consulte nuestro artículo separado sobre cómo agregar íconos sociales predeterminados y un widget de íconos giratorios especiales básicamente para agregar perfiles sociales en su sitio Weebly.

Widget de iconos CSS personalizados para compartir en redes sociales

Dado que el objetivo de este artículo no es discutir el aspecto del diseño, proporcionaremos el código CSS completo como se muestra a continuación. Básicamente, usamos íconos de fuentes increíbles para íconos sociales con un ancho de contenedor de 300px para acomodar cinco íconos sociales: Facebook, Twitter, Google+, Pinterest y LinkedIn.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <style> /* Container */ .column { width: 300px; } /* Individual Icons with first Box for Facebook */ .box { background-color: #3b5998; color: rgba(251, 244, 217, 0.99); display: block; width: 17%; text-align: center; float: left; margin-right: 1px; border-radius: 50%; } /* Twitter */ .box:first-child + .box { background-color: #55acee; } /* Google+ */ .box:first-child + .box + .box { background-color: #dc4e41; } /* Pinterest */ .box:first-child + .box + .box + .box { background-color: #bd081c; } /* LinkedIn */ .box:first-child + .box + .box + .box +.box { background-color: #0077b5; } /* Link Effects */ .column a { text-decoration: none; color: #ffffff; outline: none; -webkit-transition: 0.5s ease; transition: 0.5s ease; } /*Font Awesome Icons Effects */ .box .fa { margin: 10px; display: block; font-size: 26px; } /* Box Hover Effects */ .box:hover { opacity: 0.7; } </style>

HTML para el widget de iconos para compartir en redes sociales

A continuación se muestra el código HTML junto con la URL para compartir para el widget social:

<div class="column"> <a href="https://www.facebook.com/sharer/sharer.php?u=www.webnots.com" class="box"> <div class="fa fa-facebook"></div> </a> <a href="https://twitter.com/home?status=www.webnots.com" class="box"> <div class="fa fa-twitter"></div> </a> <a href="https://plus.google.com/share?url=www.webnots.com" class="box"> <div class="fa fa-google-plus"></div> </a> <a href="https://pinterest.com/pin/create/button/?url=http%3A//img.webnots.com/2015/06/header_logo_home_2x.png&media=www.webnots.com&description=" class="box"> <div class="fa fa-pinterest"></div> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=www.webnots.com&title=YOUR%20TITLE%20HERE&summary=&source=" class="box"> <div class="fa fa-linkedin"></div> </a> </div>

El widget se verá a continuación en el sitio publicado:

Usamos la URL de este sitio, asegúrese de reemplazar el contenido relevante como se indica a continuación del HTML:

  • Facebook, Twitter y Google+: reemplace la URL del sitio por la suya.
  • Pinterest: reemplaza la imagen y la URL.
  • LinkedIn: reemplace la URL y el título del sitio.

En caso de que desee utilizarlo como un widget "síganos", simplemente reemplace las URL dentro de la parte "href" con sus propios enlaces de perfil social.

Agregar CSS y HTML en Weebly

  • Pegue el CSS en la sección "Código de encabezado" de la página que necesita o colóquelo debajo de "Configuración" para que el código sea efectivo en el nivel del sitio. Obtenga más información sobre cómo agregar CSS en el sitio de Weebly.

Widget simple de iconos para compartir en redes sociales para Weebly

Agregar código de encabezado en la página

  • Agregue el contenido HTML en una página donde desee colocar los íconos, usando el elemento " Código incrustado ".
  • Publique su sitio para ver los íconos para compartir en acción.

Personalización del widget

  • Aunque explicamos con cinco íconos, puede agregar cualquier número de íconos. Consulte los códigos de color de los iconos sociales para elegir el color de sus iconos.
  • El ancho del contenedor completo es de 300 px para alinear los íconos automáticamente en los dispositivos móviles. En caso de que esté agregando más íconos, asegúrese de usar las consultas de @media para alinear los íconos en el móvil de manera adecuada.
  • El ancho del icono individual es del 17% en la clase CSS ".box", que puede reducir o aumentar según sus necesidades.
  • El tamaño del icono es 26px con la clase CSS ".box .fa" que puede cambiar según sus necesidades.
  • Si agrega más iconos, simplemente agregue “+ .box" y defina el color de fondo de los iconos.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More