add

Widget perfiles sociales para Blogger Video Tutorial


La capacidad para implementar nuevos widgets y plugins para Blogger en nuestros blogs es realmente sorprendente. Blogger.com es una plataforma web que no tiene límites para crear cientos de widgets.

El día de hoy aprenderá a insertar un widget perfiles sociales en sus blogs de Blogger

¿Cómo funciona?

La implementación del código es muy simple, tendrán que seguir las instrucciones claras de este tutorial creado exclusivamente para usuarios de Blogger.com

Nuestra caja de perfiles sociales nos mostrara 5 apartados, como: Facebook. Twitter, Google+, Instagram y una caja para insertar nuestra dirección de correo electrónico como contacto

Se puede ingresar cualquier número como contador de cada perfil social, el cual lo hace ver de una manera diferente a los demás widgets sociales

Widget perfiles sociales para Blogger Video Tutorial

Pueden ver su demostración en la siguiente página web


Video Tutorial


Empezamos

1 Ir a Blogger.com

2 Un clic en “Plantilla

Widget perfiles sociales para Blogger Video Tutorial

3 Un clic en “Editar HTML

Widget perfiles sociales para Blogger Video Tutorial

Ahora se le abrirá el Editor HTML de su plantilla

Widget perfiles sociales para Blogger Video Tutorial

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

Widget perfiles sociales para Blogger Video Tutorial

4 Busca este código

<head>

5 Ingresa los siguientes estilos justo abajo del código que encontró

<!--CSS Style Sheets íconos Sociales-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" type="text/css"></link>

6 Busca este código

]]></b:skin>

7 Ingrese las siguientes líneas de código justo arriba del código que encontró

/*---- Widget Social-----------*/
.zd-social{min-width:250px;margin:10px 0}
.zd-social a{color:#fff;position:relative;display:block;overflow:hidden}
.zd-social .sq{width:50%;height:0;padding-bottom:50%;float:left}
.zd-social .icon{left:0%;top:0;width:100%;height:100%;position:absolute;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}
.zd-social a:hover .icon{left:-100%}
.zd-social a:hover .content{left:0}
.zd-social .content{-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;position:absolute;top:0;left:100%;word-wrap:break-word;width:90%;height:100%;margin:0 5%;font:400 14px 'open sans',sans-serif;text-align:center}
.zd-social .display{margin-top:40px;display:block}
.zd-social .count{font-weight:bold;display:block;margin-top:5px}
.zd-social .icon span{position:Absolute;left:50%;top:50%;color:#fff;text-align:Center;width:40px;height:40px;text-shadow:2px 2px 2px rgba(0,0,0,0.2);display:block;margin-top:-20px;margin-left:-20px;border:2px solid #fff;font:400 20px 'fontawesome';line-height:40px}
.zd-social .facebook{background:#3b5998}
.zd-social .twitter{background:#00aced}
.zd-social .google{background:#dd4b39}
.zd-social .instagram{background:#9b6954}
.zd-social .email{background:#6dc993}
.zd-social .rec{height:0;padding-bottom:40%}
/*---- Fin Widget Social-----------*/

8 Un clic en Guardar plantilla

Widget perfiles sociales para Blogger Video Tutorial

9 Diríjase a Diseño

Widget perfiles sociales para Blogger Video Tutorial

10 Un clic en Añadir un gadget

Widget perfiles sociales para Blogger Video Tutorial

11 Busca el widget HTML/Javascript, ábrelo

Widget perfiles sociales para Blogger Video Tutorial

12 Ingrese el siguiente código

<div class='zd-social'>
  <a class='sq facebook' href='https://www.facebook.com/ayudadeblogger/' target='_blank'>
    <div class='icon'><span><i class='fa fa-facebook'></i></span></div>
    <div class='content'>
    <span class='display'>Ayudadeblogger</span>
    <span class='count'>12k</span>
    </div>
  </a>
  <a class='sq twitter' href='https://twitter.com/ayudadeblogger' target='_blank'>
    <div class='icon'><span><i class='fa fa-twitter'></i></span></div>
    <div class='content'>
    <span class='display'>@Ayudadeblogger</span>
    <span class='count'>2K</span>
    </div>
  </a>
  <a class='sq google' href='https://plus.google.com/+Grupodelecluse' target='_blank'>
    <div class='icon'><span><i class='fa fa-google-plus'></i></span></div>
    <div class='content'>
    <span class='display'>+ Ayudadeblogger</span>
    <span class='count'>4K</span>
    </div>
  </a>
  <a class='sq instagram' href='https://www.instagram.com/ayudadeblogger/' target='_blank'>
    <div class='icon'><span><i class='fa fa-instagram'></i></span></div>
    <div class='content'>
    <span class='display'>@ayudadeblogger</span>
    <span class='count'>5k</span>
    </div>
  </a>
  <div style='clear:both'/>
  <a class='rec email' href='mailto:ayudadeblogger@gmail.com' target='_blank'>
    <div class='icon'><span><i class='fa fa-envelope'></i></span></div>
    <div class='content'>
    <span class='display'> ayudadeblogger@gmail.com</span>
    </div>
  </a>
</div></div>

Realice estos cambios:

Remplace todas las direcciones URLs que están marcadas de color azul, por sus perfiles sociales.

Cambia la dirección de correo electrónico que está marcado de color rojo por su cuenta de correo

También, puede cambiar los números que están marcados de color negro:

12k
2K
4K
5k

Y por ultimo, cambia todos los siguientes nombres:

Ayudadeblogger
@Ayudadeblogger
+ Ayudadeblogger
@ayudadeblogger

Eso es todo, un clic en Guardar

Ubique su widget social donde mejor le parezca

Visite su blog

¡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