Widget social de suscripciones horizontal para blogger
Los widgets sociales de suscripciones
para blogger es la forma en la que los usuarios que visitan sus blogs lo podrán
seguir. El día de hoy aprenderán a insertar un código que les mostrara en un
widget de forma horizontal una nueva forma o método de suscripción social para
blogger, el cual hará que algunos usuarios lo puedan seguir en sus redes
sociales como Feed Rss, Twitter, Facebook, Google+, Linkedin, con esto
aumentara el trafico web de su blog al momento que ustedes publiquen un nuevo
tema en su blog de blogger. El widget social funciona perfectamente en todos
los navegadores web como Firefox, Internet Explorer, Google Chrome etc. Al momento
de la instalación no le causara ningún daño en el diseño de su blog.
Además en anteriores publicaciones di a
conocer algunos métodos de suscripciones de los cuales les dejo los enlaces
A continuación mire su demostración en
mi blog de demos, el widget social está ubicado arriba de la cabecera principal
de mi página de demos.
Les gusto verdad!
Vamos a trabajar
1 Ir a blogger
2 Un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript”,
ábrelo e inserta las siguientes líneas de código en su interior
<style>
.ayudadeblogger-Social-metro {
width: 960px;
float: left;
margin: 0;
padding: 1em 0;
}
.ayudadeblogger-Social-metro ul {
margin: 0;
padding: 0;
}
.ayudadeblogger-Social-metro ul li {
list-style: none;
list-style-type: none;
padding: 0;
text-transform: none;
margin: 0;
float: left;
display: inline-block;
width: 20%;
}
.ayudadeblogger-Social-metro ul li a {
font-size: 80%;
color: #fff!important;
display: block;
}
.ayudadeblogger-Social-metro ul li a:hover {
color: #000!important;
background-color: #999;
text-decoration: none;
}
idc-scoail ul li a, ul li a:hover {
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.ayudadeblogger-Social-metro ul li .rss {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjl5UXLIf_FERkx5ko2_S8klvWNgCRtQLGoG7e_fbk2Tq1BpHApV5vXAm-ahUZTQp27T4asALUhzpb4WGGEMj6X4ZJipvkx9vrx1HZI6i754I-5subqIgKBbCMKGQSTsWRIuVm0eOVqYmg/s1600/RSS-1.png")
no-repeat scroll 10px center #F87E12;
background-size: 20px;
padding: 10px 50px;
}
.ayudadeblogger-Social-metro ul li .twitter {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwNE0rC4n2gipCcFs0NeiJVWq3qtg9X0l3Snx48zG_wgpEBTGyJx2-BtniWyTbhakXo7Y8uPYyHqMai7Q6dPgwj3xn8rt6sZZUnd5Qq-pN_In6VWbLrvha7Y8MHfpCPfNesvE5vcqb8v_I/s1600/Twitter.png")
no-repeat scroll 10px center #4CACEE;
background-size: 20px;
padding: 10px 50px;
}
.ayudadeblogger-Social-metro ul li .facebook {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIS2eunKR03L67569OovZPwrw6n9r9uZk9H-kuth6k5ipeh0s1iYpk-s0pI9bfRXVfPhE8BGO4UVErlKphI93XIhGxRk_txsJqncnq6YD88jkCZXLlr1dNmjTmaxsVvhmpOp2N_p6AgWEe/s1600/Facebook-1.png")
no-repeat scroll 10px center #3B5998;
background-size: 20px;
padding: 10px 50px;
}
.ayudadeblogger-Social-metro ul li .google {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx2qd8hkrAk2bmWYN9x5mDmZ9O3yulf068y8MmXor8AwC8Y2QKKzg28vmoplnJJGXOR0WPuraHYVYzPfURBXnIwRmeb113oguf-DOO_v-XBKBetAZIeiPLLoC2DMCoS1DxVVJl1_76Z9AP/s1600/google.png")
no-repeat scroll 10px center #D44937;
background-size: 20px;
padding: 10px 50px;
}
.ayudadeblogger-Social-metro ul li .linkedin {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYafx_7_sUXl4kavHxI_bH0h35udxQDZvTN5Hah2RbInnzdt7lz9zyk9TPRK9zQIcqDI68FiJEDjP4xCFR9cWxRi5oQj77YzfYwHyEPemT1nFWstKMygz4CG5PIq_4pC8uMWBs6c4fKiAR/s1600/LinkedIn-1.png")
no-repeat scroll 10px center #3692C3;
background-size: 20px;
padding: 10px 50px;
}
/* width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.ayudadeblogger-Social-metro ul li {
width: 50%;
};
}
/* width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.ayudadeblogger-Social-metro ul li {
width: 50%;
};
}
/* width of 320px */
@media only screen and (max-width: 480px) {
.ayudadeblogger-Social-metro ul li {
width: 100%;
};
}
</style>
<div class='ayudadeblogger-Social-metro'>
<ul>
<li><a class='rss' href='http://feeds.feedburner.com/foroayudadeblogger'>Suscribete
Feed</a></li>
<li><a class='twitter' href='https://twitter.com/ayudadeblogger'>Siguenos
en Twitter</a></li>
<li><a class='facebook' href='http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017'>Fan
en Facebook</a></li>
<li><a class='google' href='https://plus.google.com/109642587966892719343'>Siguenos
en Google+</a></li>
<li><a class='linkedin' href='http://www.linkedin.com'>Siguenos
en LinkedIn</a></li>
</ul>
</div>
|
Realiza estos cambios:
He marcado de color azul en las URLs que
ustedes tendrán que cambiarlas por sus respectivos perfiles de redes sociales,
cambialas todas.
Eso es todo ahora dale un clic en “Guardar”
y ubícalo arriba o debajo de la cabecera principal de tu blog de blogger, revisa
tu blog y disfruta de este espectacular widget social en tu blog de blogger.
Recuerda suscribirte para que recibas
mis nuevas actualizaciones directamente en la bandeja de entrada de tu correo electrónico.
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Comentarios