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
Pueden ver su demostración en la siguiente página web
Empezamos
4 Busca este código
<head>
5 Ingresa los siguientes estilos justo abajo del código que encontró
6 Busca este código
]]></b:skin>
7 Ingrese las siguientes líneas de código justo arriba del código que encontró
8 Un clic en Guardar plantilla
9 Diríjase a Diseño
10 Un clic en Añadir un gadget
11 Busca el widget HTML/Javascript, ábrelo
12 Ingrese el siguiente código
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
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
Pueden ver su demostración en la siguiente página web
Video Tutorial
Empezamos
1 Ir a Blogger.com
3 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
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.
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
9 Diríjase a Diseño
10 Un clic en Añadir un gadget
11 Busca el widget HTML/Javascript, ábrelo
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
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
0 comments:
Publicar un comentario