Widgets para Blogger - Widget de perfiles sociales
Los Widgets de perfiles sociales es la mejor forma de dar a conocer nuestros perfiles sociales a los usuarios que visitan nuestros blogs. Con este método los usuarios del internet podrán seguirnos en nuestras cuentas sociales. Dando como lugar a un incremente de trafico web en nuestros blogs. Cada vez que realices una nueva publicación los usuarios que están suscritos a sus cuentas sociales les llegara lo que publicaste. Lo que vamos hacer es ingresar un código en un widget HTML/Javascript y ubicarlo en el sidebar de nuestro blog o donde mejor nos parezca, además podrás insertar este código en una entrada en particular. Este widget de perfiles sociales funciona perfectamente en todos los navegadores web.
Pueden ver su demostración a continuación
Vamos a insertar el código en un widget
1 Ir a Blogger
2 Un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que tiene como nombre “HTML/Javascript”
ábrelo
5 Ingresa el siguiente código en su
interior
<style>
.social-ayudadeblogger {
margin:0 auto;
padding:0px;
text-decoration: none;
}
.social-ayudadeblogger ul li
{
list-style-type: none;
border-bottom:none;
margin:0 auto;
background: none;
padding:0px;
line-height: 0!important;
}
.social-ayudadeblogger li a {
margin:5px 3px 0px 0px !important;
padding:0px;
width:50px;
height:50px;
text-indent:-99999px;
float:left;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.social-ayudadeblogger li a.facebook1 {
background: #314d91
url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px 0px;
-webkit-transition:All 0.3s
ease-out;
-moz-transition:All 0.3s
ease-out;
-o-transition:All 0.3s
ease-out;
}
.social-ayudadeblogger li
a.facebook1:hover {
background: #314d91
url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px -73px;
}
.social-ayudadeblogger li a.twitter1 {
background: #07beed
url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px -127px;
-webkit-transition:All 0.3s
ease-out;
-moz-transition:All 0.3s
ease-out;
-o-transition:All 0.3s
ease-out;
}
.social-ayudadeblogger li
a.twitter1:hover {
background: #07beed
url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px -204px;
}
.social-ayudadeblogger li a.google-p1 {
background:#a7291b
url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px -254px;
-webkit-transition:All 0.3s
ease-out;
-moz-transition:All 0.3s
ease-out;
-o-transition:All 0.3s
ease-out;
}
.social-ayudadeblogger li a.google-p1:hover {
background: #a7291b
url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px -330px;
}
.social-ayudadeblogger li a.rss1 {
background:#ffaa31
url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px -381px;
-webkit-transition:All 0.3s
ease-out;
-moz-transition:All 0.3s
ease-out;
-o-transition:All 0.3s
ease-out;
}
.social-ayudadeblogger li a.rss1:hover {
background: #ffaa31
url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px -454px;
}
.social-ayudadeblogger li a.pinit1 {
background:#cb2027
url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px -508px;
-webkit-transition:All 0.3s
ease-out;
-moz-transition:All 0.3s
ease-out;
-o-transition:All 0.3s
ease-out;
}
.social-ayudadeblogger li
a.pinit1:hover {
background: #cb2027
url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px -580px;
}
.social-ayudadeblogger li a.linkdin1 {
background:#1698E3 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px -635px;
-webkit-transition:All 0.3s
ease-out;
-moz-transition:All 0.3s
ease-out;
-o-transition:All 0.3s
ease-out;
}
.social-ayudadeblogger li
a.linkdin1:hover {
background: #1698e3
url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png)
no-repeat 0px -711px;
}
</style>
<div
class='social-ayudadeblogger'>
<ul>
<li><a
class='facebook1' href='http://www.facebook.com/ayudadeblogger'
target='_blank' title='Facebook' rel='nofollow'></a></li>
<li><a
class='twitter1' href='http://twitter.com/ayudadeblogger'
target='_blank' title='Twitter' rel='nofollow'></a></li>
<li><a
class='google-p1' href='https://plus.google.com/+Ayudadeblogger'
target='_blank' title='Google Plus' rel='nofollow'></a></li>
<li><a class='rss1'
href='http://feeds.feedburner.com/foroayudadeblogger' target='_blaank' title='RSS
Feed' rel='nofollow'></a></li>
<li><a
class='pinit1' href='http://www.pinterest.com/'
target='_blank' title='Pinterest' rel='nofollow'></a></li>
<li><a
class='linkdin1' href='http://ec.linkedin.com/pub/luis-chavez/53/549/a91'
target='_blank' title='Linkedin' rel='nofollow'></a></li>
</ul>
</div>
|
Realiza estos cambios:
He marcado de color azul a las URLs de
mis perfiles sociales, tienes que realizar sus diferentes cambios por sus
perfiles sociales.
Y por último borra el nombre que dice foroayudadeblogger
por el nombre de tu cuenta de suscripción FeedBurner
Eso es todo, da un clic en “Guardar” y
ubica tu nuevo widget de perfiles sociales donde mejor te parezca
Fácil verdad!
Recuerda suscribirte y recibirás mis
nuevas actualizaciones directamente en tu correo electrónico
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
0 comments:
Publicar un comentario