Bienvenido a bloggertrucos.com un espacio para el blogger moderno donde buscar soluciones a nuestros problemas de cada día.

Como agregar un widget de redes sociales muy singular en tu blog

En la red podemos encontrar muchas opciones para agregar nuestros perfiles de redes sociales en nuestros blogs. Una de mis favoritas es la opción del widget al estilo de Mashable, o usar los enlaces creados desde Addthis.com y la mas actual y muy bonita forma de agregar enlaces con iconos de nuestras redes sociales mas importantes a través de un widget o gadget HTML con efecto de opacidad con CSS.

widget social

 

La imagen anterior es la forma como se verá nuestro widget de redes sociales en el sidebar de nuestro blog y su instalación es muy sencilla.

Únicamente debemos ir a nuestros gadgets en Blogger o Widget de WordPress y crear uno tipo HTML, pegamos el siguiente código:

<!–Botones sociales Widget By Ayudadeblogger.com–>

<style>

#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}

#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}

#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}

#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}

#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}

#tbisose .icon{overflow:hidden; color:#fafafa;}

#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}

#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}

#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}

#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}

#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}

#tbisose li:hover .icon,

.touch #tbisose li .icon{width:210px;}

.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}

.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}

.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}

.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}

.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}

</style>

<ul id=”tbisose”>

<li data-alt=”Sigueme en Facebook”><a href=”http://www.facebook.com/tufanpage“>Sigueme en Facebook</a></li>

<li data-alt=”Sigueme en Twitter”><a href=”https://www.twitter.com/usuario“>Sigueme en Twitter</a></li>

<li data-alt=”Sigueme en Google+”><a href=”https://plus.google.com/tuID“>Sigueme en Google+</a></li>

<li data-alt=”Sigueme en Pinterest”><a href=”http://www.pinterest/usuario“>Sigueme en Pinterest</a></li>

<li data-alt=”Suscribete a RSS”><a href=”http://feeds.feedburner.com/IDFeedburner“>Suscribete a RSS</a></li>

</ul>

<!–Botones sociales Widget By Ayudadeblogger.com–>

Solo debemos de cambiar las URL de nuestros perfiles sociales que se encuentran marcados en el código anterior.

 

Demo

Via: AyudadeBlogger

Show Comments

No Responses Yet

Leave a Reply