add

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

0 comentarios:

Publicar un comentario en la entrada

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios