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

Como insertar el widget de suscripcion social de Mashable en tu blog

Mashable es uno de los sitios mas famosos sobre noticias tecnológicas y redes sociales. De hecho, muchas de las publicaciones de sitios en español son tomadas como referencias de Mashable. A partir de esta popularidad en la red, se han publicado muchas características similares del sitio de Mashable para que pueden ser aplicadas a otros blogs en WordPress o Blogger.

Unas de las interesantes opciones del theme de este popular sitio es el widget de suscripción social media que tiene en su sidebar. Para WordPress existen plugins para instalarlo de forma automática con tan solo ingresar en su configuración las cuentas de perfiles sociales de nuestro blog. En este caso les mostraré como insertar el widget de suscripción social de Mashable en tu blog sin usar plugins.

widget suscripcion social media

Como pueden ver, el mismo widget estoy usando en este sitio y les explicaré como instalarlo en cualquier blog. El widget requiere de dos partes, para mejorar la optimización del sitio: un código css y un código ingresado en un widget o gadget tipo HTML/Javascript. La caja de suscripción a redes sociales tiene botones y opciones para Facebook, Google Plus, Twitter, Pinterest, asi como suscripción vía RSS y feedburner.
Como dije antes, puedes instalar un solo widget y mezclar todo el codigo o dividir el css y el HTML aparte. Primero debes de ir donde esta el codigo CSS de tu blog e instalar el siguiente codigo:
[css]
/* Perfiles sociales */
#share-box-0 {
width:290px;
overflow:hidden;
margin-bottom:5px;
}
#share-box-0 .gplusone {
background-color:#f5fcfe;
border:1px solid #d8e6eb;
border-top:1px solid #FFF;
font-size:.87em;
color:#000;
line-height:24px;
padding:9px 0 0 11px;
}

#share-box-0 .gplusone span {
display:inline-block;
vertical-align:middle;
height:20px;
margin-top:-17px;
}

#share-box-0 .fb-like-box {
border:1px solid #dcdcdc;
padding:5px 11px;
}
#share-box-0 .twitter-follow {
background-color:#eef9fd;
border:1px solid #c7dbe2;
border-top:0;
}

#share-box-0 .twitter-follow iframe {
margin:9px 11px;
}
#other-social-bar {
background-color: #D8E6EB;
border: 1px solid #B6D0DA;
box-shadow: 0 1px 1px #FFFFFF inset;
font-family: “Arial”,”Helvetica”,sans-serif;
font-weight: bold;
overflow: hidden;
padding: 0;
}
#other-social-bar ul {
list-style: none outside none;
padding-left: 4px;
}
#other-social-bar .other-follow {
color: #1E598E;
float: left;
height: 16px;
overflow: hidden;
padding: 10px 10px 7px;
width: 290px;
}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;
}
#other-social-bar .other-follow li {
border: 0 none;
display: inline;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px white;
}
#other-social-bar .other-follow li a {
color: #1E598E;
display: inline;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px white;
}
#other-social-bar .other-follow li.my-rss {
background: url(https://4.bp.blogspot.com/-3ZR8uAHB8QY/T-MLyuLqG4I/AAAAAAAAFxw/Zxk86OIXwJM/s000/rss-16×16.png) no-repeat scroll 0 0 transparent;
line-height: 1;
margin-bottom: 0;
padding: 0 3px 1px 20px;
width: 60px;
}
#other-social-bar .other-follow li.my-gplus {
background: url(https://2.bp.blogspot.com/-oV5JSdsA2Sw/T-MLyxNI7PI/AAAAAAAAFx4/rVvTQjUpjCE/s000/gplus-16×16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;
}
#other-social-bar .other-follow li.my-pinterest {
background: url(https://4.bp.blogspot.com/-zYx6lF1–pw/T-MLzJGZcNI/AAAAAAAAFyA/R7emD2taC9s/s000/small-p-button.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;
}
#email-news-subscribe .email-box {
padding: 10px 10px;
font-family: “Arial”,”Helvetica”,sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
}
#email-news-subscribe .email-box input.email {
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: “Arial”,”Helvetica”,sans-serif;
}
#email-news-subscribe .email-box input.email:focus {
color:#333
}
#email-news-subscribe .email-box input.subscribe {
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: “Arial”,”Helvetica”,sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;
}
#email-news-subscribe .email-box input.subscribe:hover {
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
</style>
[/css]
Ahora la segunda parte es el código HTML que contiene los botones y toda la caja de suscripción. Creamos un widget o gadget HTML y pegamos el siguiente código:
[html]
<div id=”share-box-0″>
<div>
<iframe src=”http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/fanpage&amp;layout=standard&amp;show_faces=false&amp;width=300&amp;action=like&amp;colorscheme=light” scrolling=”no” frameborder=”0″ allowtransparency=”true” style=”border:none; overflow:hidden; width:300px; height:40px”></iframe></div>
<div>
<div data-size=”medium” data-count=”true” data-callback=”fire_multitrack” data-href=”http://wwwtusitio.com/”></div> <span>Sigueme en G+</span>
</div>
<div>
<a href=”http://twitter.com/usuario“>Siguenos en Twitter</a>
</div>
<div style=”background: #E3EDF4;” id=”email-news-subscribe”>
<div>
<form onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=idfeedburner, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow” method=”post” action=”http://feedburner.google.com/fb/a/mailverify?uri=idfeedburner“>
<input type=”text” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” value=”Escribe tu email” name=”email” id=”email” style=”width: 140px; font-size: 12px;” />
<input type=”hidden” name=”uri” value=”idfeedburner” />
<input type=”hidden” value=”es_ES” name=”loc” />
<input type=”submit” value=”Suscribete” name=”commit” />
</form>
</div>
</div>
<div style=”background: #D8E6EB;” id=”other-social-bar”>
<ul>
<li>
<a target=”_blank” href=”http://www.tuweb.com/feed” title=”RSS” rel=”nofollow”>RSS</a>
</li>
<li>
<a target=”_blank” href=”https://plus.google.com/tuidg+” title=”Google Plus” rel=”nofollow”>Google Plus</a>
</li>
<li>
<a target=”_blank” href=”http://pinterest.com/usuario” title=”Pinterest” rel=”nofollow”>Pinterest</a>
</li>
</ul>
</div>
</div>
[/html]
Solo queda cambiar los valores de las cuentas en los textos en color rojo. Asi de facil ya hemos creado el widget de suscripción social de Mashable en nuestro blog.

Show Comments

No Responses Yet

Leave a Reply