Como insertar y compartir iconos sociales en Blogger
Mostrar iconos sociales de las mejores
redes sociales en su blog de Blogger es una forma de conseguir seguidores y
sobre todo obtener un buen trafico web hacia su blog gracias a la suscripción de
sus perfiles sociales. Las redes sociales son la mejor opción al momento de
querer darse a conocer en el internet. Por medio de los iconos sociales de las
mejores redes sociales que existen actualmente, los usuarios que visitan su
blog podrán suscribirse a sus páginas sociales y así pueden obtener sus
actualizaciones diarias. Y lo más sorprendente muchas personas lo recomendaran
con sus amistades, se dará la vuelta al mundo y podrán construir el mejor blog.
El día de hoy aprenderán a insertar un código en un widget HTML/Javascript el
cual hará que se muestre los mejores iconos sociales para compartir sus
perfiles sociales. Necesitaran realizar unos cambios en donde les indique y lo podrán
ubicar debajo de la cabecera principal de su blog o en donde a ustedes mejor
les parezca. Este nuevo widget de iconos sociales funciona perfectamente en
todos los navegadores web como Firefox, Google Chrome, Internet Explorer etc.
Además, les dejo algunos post que
publique anteriormente sobre widgets sociales:
- Como agregar de forma flotante la caja de seguidores de Facebook y Google+ en Blogger
- Como agregar la barra de recomendaciones de Facebook a Blogger
- Como agregar un widget de redes sociales a blogger
- Como agregar un widget flotante Social Media en blogger
- Como añadir un widget de redes sociales
- Como crear botones flotantes para compartir todas las redes sociales, Crear Bar Flotante
- Como insertar un Popup de Facebook y suscripción en blogger
- Widget de Twitter
- Widget de redes sociales para blogger
- Widget de redes sociales para blogger con efectos
- Widget social de suscripciones horizontal para blogger
A continuación mire su demostración en
la siguiente página web, el widget social está ubicado justo arriba de la entreda
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
5 Inserta las siguientes líneas de código
en su interior
<ul
class="spicesocialwidget">
<li class="facebook">
<a rel="nofollow"
href="http://www.facebook.com/"
target="_blank" title="facebook">
</a></li>
<li
class="googleplus">
<a rel="nofollow"
href="https://plus.google.com/"
target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a rel="nofollow"
href="http://pinterest.com/"
target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a rel="nofollow"
href="http://twitter.com/"
target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow"
href="http://feedburner.com/"
target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow"
href="http://www.skype.com/"
target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a rel="nofollow"
href="http://www.vimeo.com/"
target="_blank" title="vimeo">
</a></li>
<li class="dribbble">
<a rel="nofollow"
href="http://www.dribbble.com/"
target="_blank" title="dribble">
</a></li>
<li class="flickr">
<a rel="nofollow"
href="http://www.flickr.com/"
target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow"
href="http://www.linkedin.com/"
target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow"
href="http://www.youtube.com/"
target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.spicesocialwidget {float:right;}
ul.spicesocialwidget li
{float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipOAjzLOioBJPwNoyH66l-sTgbJsTsDFXAMjKniJ_TOJnZhsiLyyV9kaC1HRI6KWiGUtcswaY4k11zBx_58fpFIq16XGLJqXngSVqLKRF3Rpjeav1VpPjo6hEed26Itw-D8JVRkJ9kfzd1/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto
96px;border:0 none;color:white;direction:ltr;display:block;
height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all
0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8
ul.spicesocialwidget li
a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipOAjzLOioBJPwNoyH66l-sTgbJsTsDFXAMjKniJ_TOJnZhsiLyyV9kaC1HRI6KWiGUtcswaY4k11zBx_58fpFIq16XGLJqXngSVqLKRF3Rpjeav1VpPjo6hEed26Itw-D8JVRkJ9kfzd1/s1600/spice-social-gadget-sprite.png'
)}
ul.spicesocialwidget li.facebook a{
background-position:0 0}
ul.spicesocialwidget li.flickr a{
background-position:-32px 0}
ul.spicesocialwidget li.dribbble a{
background-position:-64px 0}
ul.spicesocialwidget li.googleplus a{
background-position:-96px 0}
ul.spicesocialwidget li.linkedin a{
background-position:-128px 0}
ul.spicesocialwidget li.pinterest a{
background-position:-160px 0}
ul.spicesocialwidget li.rss a{
background-position:-192px 0}
ul.spicesocialwidget li.skype a{
background-position:-224px 0}
ul.spicesocialwidget li.twitter a{
background-position:-256px 0}
ul.spicesocialwidget li.vimeo a{
background-position:-288px 0}
ul.spicesocialwidget li.youtube a{
background-position:-320px 0}
ul.spicesocialwidget li.facebook
a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{
background-position:0 -32px}
ul.spicesocialwidget li.flickr
a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{
background-position:-32px -32px}
ul.spicesocialwidget li.dribbble
a:hover, #sidebar ul.spicesocialwidget li.dribbble a:hover{
background-position:-64px -32px}
ul.spicesocialwidget li.googleplus
a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{
background-position:-96px -32px}
ul.spicesocialwidget li.linkedin
a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{
background-position:-128px -32px}
ul.spicesocialwidget li.pinterest
a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{
background-position:-160px -32px}
ul.spicesocialwidget li.rss a:hover,
#sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px
-32px}
ul.spicesocialwidget li.skype a:hover,
#sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px
-32px}
ul.spicesocialwidget li.twitter
a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{
background-position:-256px -32px}
ul.spicesocialwidget li.vimeo a:hover,
#sidebar ul.spicesocialwidget li.vimeo a:hover{ background-position:-288px
-32px}
ul.spicesocialwidget li.youtube
a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{
background-position:-320px -32px}
</style>
|
Realiza estos cambios:
He marcado de color azul en los lugares
que ustedes tendrán que insertar su URL de perfil social, cámbialos a todos por
las URLs correspondientes de tus perfiles sociales.
Eso es todo, ahora es momento de dar un
clic en “Guardar” y ubica este widget social donde tú quieras.
Fácil verdad!
Recuerda suscribirte y así recibirás mis
nuevas actualizaciones directamente en tu bandeja de entrada
¿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
Buenos días Luis. Es algo que me gustaría para mi blog. Mi pregunta es: si no deseo todos los iconos, solo algunos, ¿qué tengo que borrar del código?
ResponderEliminarUn saludo
Hola, borra el codigo que te interese a partir de < li class haste el termino de < /li > luego buscas mas abajo en el codigo apartir del ul.spicesocialwidget hasta el final del termino 32px} , por ejemplo si quieres eliminar pinterest elimina solo el codigo correspondiente tal como lo explico, espero me hayas entendido lo que digo.
ResponderEliminarSaludos