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

Bueno, a raíz de un comentario que me dejaron aquí va una explicación de como poner los últimos comentarios en blogger. Hay dos maneras:

La primera consiste en añadir un nuevo elemento de página de tipo feed tal que así:

http://TUBLOG.blogspot.com/feeds/posts/default

Tiene algunas pegas, como por ejemplo que solamente puedes mostrar 5 comentarios como máximo por pantalla, además de que al ser un feed no siempre se recarga y a veces tarda un poco en actualizarse.

La segunda, mucho más recomendada aunque un poco más difícil (no mucho) se basa en el truco que Leonel dejó hace algún tiempo en su maravillosa bitácora Trucos Blogger. Os la pongo para que la veáis, pero no estaría dé más hacerle una visitilla a este muchacho y ver todos los trucos que tiene disponibles en su blog.

1. Nos dirigimos a Plantilla–Edicion de HTML
Antes del </head> añadimos el siguiente codigo:

<script src=’http://leonelhack.googlepages.com/leonelhack.js’ type=’text/javascript’></script>

2. Nos dirigimos a Plantilla–Elementos de la pagina–Añadir un elemento de pagina–HTML/JavaScript
Añadimos el siguiente codigo:

<br/><script language=”javascript”>
var numcomments = 10;
var numchars = 45;
</script>
<script src=”http://elnombredetublog.blogspot.com/feeds/comments/default?start-index=2&
alt=json-in-script&callback=commentDisplay”></script>

Guardar cambios y listo, podemos modificar el numero 10 que es el que indica el numero de comentarios, y el numero 45 que indica el numero de palabras para cada comentario, y necesitas cambiar la direccion(url) a la de tu blog.

Fácil y muy útil, no?

blog, blogger, trucos blogger

Después de algunas búsquedas sobre este tema en la blogosfera he llegado a la conclusión de que ninguna está completa (enlace 1, enlace 2, enlace 3). Por ello aquí os dejo la forma en la que yo lo he hecho, creo que funciona perfectamente. No hay que decir que es para la versión nueva de blogger, para la anterior sería diferente.

Primero tenéis que buscar el siguiente código en la plantilla (pulsar antes Expandir plantillas de artilugios):

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

Una vez encontrado deberéis pegar justo antes de ese código lo siguiente:

Compártelo: <a title=”Menéame” expr:href=’”http://meneame.net/submit.php?url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’><img src=’http://img181.imageshack.us/img181/3083/meneamehm7.gif’/></a> |

<a title=”Technorati” expr:href=’”http://www.technorati.com/search/”
+ data:post.url’ target=’_blank’><img src=’http://img45.imageshack.us/img45/5606/technoratiiy1.gif’/></a> |

<a title=”Del.icio.us” expr:href=’”http://del.icio.us/post?url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’><img src=’http://img50.imageshack.us/img50/9913/deliciogl4.gif’/></a> |

<a title=”DiggIt!” expr:href=’”http://digg.com/submit?phase=2&amp;url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’><img src=’http://img50.imageshack.us/img50/300/diggjf4.gif’/></a> |

<a title=”Yahoo!” expr:href=’”http://myweb2.search.yahoo.com/myresults/bookmarklet?url” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’><img src=’http://img50.imageshack.us/img50/163/yahooab9.gif’/></a> |

<a title=”Fresqui” expr:href=’”http://tec.fresqui.com/post?url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’><img src=’http://img45.imageshack.us/img45/5397/fresquisr8.gif’/></a> |

<a title=”PromotingBlogs” expr:href=’”http://promotingblogs.com/submit.php?url=” + data:post.url + “&amp;title=” + data:post.title’ target=’_blank’><img src=’http://img261.imageshack.us/img261/5318/pb16x16it8.png’/></a>

Ahí están yo creo las 6 redes principales: Menéame, Technorati, Del.icio.us, Digg, Yahoo! y Fresqui. Poner otra no sería muy difícil, sólo tendríais que cambiar la dirección y la imagen. Listo.

Edito: en El Ventanuco Bits pude conocer hace poco una nueva red llamada PromotingBlogs, os adjunto el código arriba junto con lo demás.

Ya sé que hace poco aprovechando el cambio a blogger beta cambié el diseño del blog, pero es que me mola bastante este tema. Llevo un tiempo trabajando en uno y es posible que pronto vea la luz. Se acerca la versión 3.0 del blog de Pepino.