REDES SOCIALES EN BLOGGER MEJORADO

Una de mis posts que más éxito ha tenido es el de cómo poner los botones de redes sociales en blogger. Pues ayer encontré un nuevo blog no conocido donde viene mucho mejor (más bonito). Se llama Recursos Blog y Web. Así tomando el código que nos dan allí y agregando un par de redes más sólo tenéis que hacer lo que sigue para tenerlo en vuestro blog.

Como siempre nos vamos a la edición html de la plantilla (marcamos expandir plantillas de artilugios) y buscamos el siguiente código:

<p class=’post-footer-line post-footer-line-3′/>

Y justo antes de esa línea vamos a pegar lo siguiente:

<div class=’rsociales’>
Enviar a
<ul>
<li><a expr:href=’”http://meneame.net/submit.php?url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Meneame’><img alt=’Agregar a Meneame’ class=’rsociales-sobre’ src=’http://img181.imageshack.us/img181/3083/meneamehm7.gif’/></a></li>
<li><a expr:href=’”http://www.technorati.com/faves?add=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Technorati’><img alt=’Agregar a Technorati’ class=’rsociales-sobre’ src=’http://img45.imageshack.us/img45/5606/technoratiiy1.gif’/></a></li>
<li><a expr:href=’”http://del.icio.us/post?url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Del.icio.us’><img alt=’Agregar a Del.icio.us’ class=’rsociales-sobre’ src=’http://img50.imageshack.us/img50/9913/deliciogl4.gif’/></a></li>
<li><a expr:href=’”http://digg.com/submit?phase=2&amp;amp;url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a DiggIt!’><img alt=’Agregar a DiggIt!’ class=’rsociales-sobre’ src=’http://img50.imageshack.us/img50/300/diggjf4.gif’/></a></li>
<li><a expr:href=’”http://myweb2.search.yahoo.com/myresults/bookmarklet?u=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Yahoo!’><img alt=’Agregar a Yahoo!’ class=’rsociales-sobre’ src=’http://img519.imageshack.us/img519/7119/yahooyb7.png’/></a></li>
<li><a expr:href=’”http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Google’><img alt=’Agregar a Google’ class=’rsociales-sobre’ src=’http://img519.imageshack.us/img519/9755/googleoq9.png’/></a></li>
<li><a expr:href=’”http://www.furl.net/storeIt.jsp?u=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Furl’><img alt=’Agregar a Furl’ class=’rsociales-sobre’ src=’http://img519.imageshack.us/img519/6871/furlee5.png’/></a></li>
<li><a expr:href=’”http://reddit.com/submit?url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Reddit’><img alt=’Agregar a Reddit’ class=’rsociales-sobre’ src=’http://img519.imageshack.us/img519/9558/redditse1.png’/></a></li>
<li><a expr:href=’”http://ma.gnolia.com/beta/bookmarklet/add?url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Magnolia’><img alt=’Agregar a Magnolia’ class=’rsociales-sobre’ src=’http://img519.imageshack.us/img519/4033/magnoliaho5.png’/></a></li>
<li><a expr:href=’”http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Blinklist’><img alt=’Agregar a Blinklist’ class=’rsociales-sobre’ src=’http://img519.imageshack.us/img519/556/blinklistspk5.png’/></a></li>
<li><a expr:href=’”http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Blogmarks’><img alt=’Agregar a Blogmarks’ class=’rsociales-sobre’ src=’http://img519.imageshack.us/img519/152/blogmarksus8.png’/></a></li>
<li><a expr:href=’”http://tec.fresqui.com/post?url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Fresqui’><img alt=’Agregar a Fresqui’ class=’rsociales-sobre’ src=’http://img45.imageshack.us/img45/5397/fresquisr8.gif’/></a></li>
<li><a expr:href=’”http://promotingblogs.com/submit.php?url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’ title=’Agregar a Promoting Blogs’><img alt=’Agregar a Promoting Blogs’ class=’rsociales-sobre’ src=’http://img261.imageshack.us/img261/5318/pb16x16it8.png’/></a></li>
</ul>
</div>

Pero esto es sólo la primera parte. Para dar el efecto de opacidad (sólo funciona en navegadores más actuales, en IE6 no) hay que añadir un poco de CSS. Buscáis el código:

]]></b:skin>

Y antes de esa línea pegáis esto (si jugáis un poco con el código podéis cambiar el estilo en el que se presentarán los botones):

/* CSS para redes sociales
———————————————– */

.rsociales ul {
font-size: 100%;
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

Guardar los cambios y listo (hacer vista previa antes para ver que funciona y no hay nada mal).

El post original donde lo vi es éste. He cambiado las imágenes del servidor original (era blogger) a imageshack, más que nada por manías mías.

redes sociales, blog, blogger