Widgets y Plugins para Blogger


Widget caja social para Blogger Video tutorial


Una simple caja de suscripción para su blog de Blogger de forma simple y segura, es lo que aprenderán a realizarlo en este tutorial creado para blogs de Blogger.

¿Cómo funciona?

Lo que vamos hacer es copiar un código y lo ingresaremos en un widget HTML/Javascript, y realizaremos unos cambios. Luego lo ubicaremos en el sidebar de nuestro blog.

Características:

- Un título principal
- Una pequeña descripción
- Una dirección de correo electrónico de contacto
- 5 iconos sociales: Facebook, Twitter, Google+, Instagram y Pinterest

Widget caja social para Blogger Video tutorial

Pueden ver su demostración en el siguiente blog de demos


Video Tutorial


Instrucciones:

1 Ir a Blogger.com

2 Un clic en Diseño

Widget caja social para Blogger Video tutorial

3 Un clic en añadir un gadget

Widget caja social para Blogger Video tutorial

4 Busca el widget HTML/Javascript, ábrelo

Widget caja social para Blogger Video tutorial

5 Ingrese las siguientes líneas de código en su interior

<h3 style="color:#000000;font-size: 36px;font-weight: 600;text-align: center;"><span style="color: #DF013A;">Ayudadeblogger</span></h3>
<div style="text-align: justify;">
<p>Sitio web dedicado ayudar a todos los bloggers - Widgets y plugins para Blogger. Ayudadeblogger.com</p></div>
<br/>
<div style="text-align: center;">
<a href="mailto:ayudadeblogger@gmail.com" class="email" data-original-title="" title="" style="
    color: #DF013A;
"><i class="fa fa-envelope" style="
    color: #DF013A;
    float: center;
    padding: 4px 20px 0 0;
"></i>ayudadeblogger@gmail.com</a></div>
<br/>
<br/>
<div style="text-align: center;">
<div id="footer-social-icons">
<a href="https://www.facebook.com/ayudadeblogger" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/ayudadeblogger" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="https://plus.google.com/+ayudadeblogger" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="https://www.instagram.com/ayudadeblogger/" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="https://es.pinterest.com/luischavez/ayudadeblogger/" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
</div></div>
<style>
#footer-social-icons a {
background: #DF013A;
color: #fff;
display: inline-block;
text-align: center;
font-size: 24px;
    width: 50px;
    height: 50px;
    line-height: 50px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#footer-social-icons a:hover{
background: #2e2e2e;
}
.list-label-widget-content li a {
position: relative;
display: block;
background-color: #f7f7f7;
margin-bottom: 5px;
padding: 10px;
font-size: 0.875rem;
text-transform: capitalize;
color: #777;
}
.list-label-widget-content li a:before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #E6E6E6;
position: absolute;
top: 13px;
right: 7px;
}
html[dir="rtl"] .list-label-widget-content li a:before {
right: auto;
left: 7px;
}
.list-label-widget-content li a:hover {
padding-left: 20px;
background-color: #04B404;
color: #fff;
}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css' rel='stylesheet'/>

Realiza estos cambios:

- Remplaza todas las direcciones URLs que están marcadas de color azul, y remplázalos por las direcciones URLs de sus perfiles sociales

- Cambia el título que está marcado de color amarillo

- Cambia la pequeña descripción que está marcado de color verde

- Cambia las dos direcciones de correo electrónico que están marcadas de color purpura

- Si necesitas cambiar el color de los iconos, al igual del título y de la dirección de correo electrónico, basta con cambiar los códigos que están marcados de color naranja, y remplazarlos por el código de color que necesita


- Eso es todo, es momento de dar un clic en Guardar

- Ubique su widget caja social en el sidebar de su blog de Blogger

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir


Enviar por correo
  1. Hola Sr Luis!

    ¿Me podria ayudar con algo?
    Es que necesito que el icono de Telegram me funcione, pero al colocar la linea de codigo de la siguiente manera: fa fa-telegram http://prntscr.com/dkxh86

    No funciona, simplemente se ve el circulo y no el icono de esta manera. http://prntscr.com/dkxg3e

    ¿Me podrías ayudar por favor?

    Saludos

    ResponderEliminar
  2. Ya lo he solucionado. El icono de Telegram fue añadido en la versión 4.7 de Font Awesome, y en este link esta la versión 4.6.2

    ResponderEliminar
    Respuestas
    1. Hola Zontir, gracias por escribir, es bueno saber que dio solución

      Saludos.

      Eliminar

Discusión:

 

Inspiración

Tecnología

Contactos

+593 994589032