Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Ofrecer la opción "compartir esta entrada" en un menú estilo Dock

Utilizado por primera vez en los ordenadores Mac, el menú doc tiene un efecto que a muchos de nosotros nos atrae. Al pasar el cursor por alguno de los iconos que "reposan" en el escritorio, se produce un movimiento muy llamativo y a su vez entretenido.

Algo muy parecido es lo que podemos obtener si hacemos uso del componente conocido como Fisheye (Ojo de pez) para JQuery en un menú para compartir los posts...




Ver el truco en funcionamiento


Aunque cueste creerlo, la instalación es muy sencilla y rápida (además de queno será necesario editar el código ni añadir información).


Diseño>Edición de HTML>expandimos artilugios




Busca la etiqueta </head> y justo antes añade esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>

<script type='text/javascript'>
jQuery(document).ready(
function()
{
jQuery(&#39;#blsocial_imagn&#39;).Fisheye(
{
maxWidth: 64,
items: &#39;a&#39;,
itemsText: &#39;span&#39;,
container: &#39;#blsocialimgn_main&#39;,
itemWidth: 60,
proximity: 80,
alignment : &#39;left&#39;,
valign: &#39;bottom&#39;,
halign : &#39;center&#39;
}
)
}
);
</script><style>#blsocial_imagn {padding-bottom:60px;paddingtop:18px;position:relative;top:-20px;}#blsocialimgn_main {position: absolute;height: 50px;padding-left: 20px;}a.blsocialimgn_1 {display: block;font: bold 10px Arial, Helvetica, sans-serif;width: 40px;color: #ccc;top: 0;bottom: 0;position: absolute;text-align: center;text-decoration: none;}.blsocialimgn_1 span {display: none;padding-left: 20px;}.blsocialimgn_1 img {border: none;margin: 5px 10px 0px;width: 100%;}</style>

<script src='http://sites.google.com/site/scriptsbalcon/b/blinterface.js' type='text/javascript'/>


Ahora busca en tu plantilla una de estas dos líneas (sólo habrá una):

<div class='post-footer-line post-footer-line-2'>

<p class='post-footer-line post-footer-line-2'/>

Una vez encontrada inserta este código justo debajo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik9pK0sqw4m-7yT5l7ULKETTvP-_04Rarx_ZsoB00aNcr07r57ZlBh4KmiIuf4lon8hBkR7CJ7v7QIcR25xy6sLug8fBa0fXyiV7ryPsgbqqWYS6tjZqterteErIDpmf0Pns1ObeWOq4I/s320/blcomparr.png' style='border: none;'/>
<div id='blsocial_imagn'>
<div id='blsocialimgn_main'>
<a class='blsocialimgn_1' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Digg</span><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI9t9hi5iF5pNjECOrOPClfe5Lm0XYOYXbVk9bXCs11IfZsF1Xim2pMfwXljVuH5rKQp1T9OW00-kof-Rtazrz4rDnwwl976lJ6MbgkGKHubZAPdTNhj_kh6f8rW5m0loJ5V9VFwj0DEc/s320/bldigg.png'/></a>
<a class='blsocialimgn_1' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span>Twitter</span><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiEyiRmeavt68gsl0rNvJC4UKWFQIHfCcj4oOfSjsp68ALfQ8inVAuNAZvJ9TreSLaepowO5BIoK4jeM8KpRWL1WfRjs-4-Z_LQXQzz8dI7d8pq20pIuDrfG_wO9lXhmlXcaXOxw8drd8/s320/bltwitter.png'/></a>
<a class='blsocialimgn_1' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Delicious</span><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihT6r2WuC2FzAyMra6YiEdZqrNursaeJhazx8VJsk_7sCXs6GpXgx-IA2__Em3j9bQB7alyml98EFPYDkTZAOr0-VW0njMAAtnHZO7R5AKLja-fCaXTk0MzZRADWmu0Qv6b95UBU3Ibks/s320/bldelicious.png'/></a>
<a class='blsocialimgn_1' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:blog.url' target='_blank'><span>Technorati</span><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRzBDvuVPyBU3SdBBLokQk72Xio02ziI2ROcEsnSKvmyiN_p_hm9Yi6DTjs4taUmv4lvET1g-CjuG0IWQmqQ9BP-I63T_bnBEM5NjyXJpvoteR7nN2em4Ev5zP-1pAYrAkdvZHQAhrLyU/s320/bltechnorati.png'/></a>
<a class='blsocialimgn_1' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Stumbleupon</span><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw6984GxhpGaD9NHHZ9az95gUUuaeYJBdYpfpvW5YNX_7VaSkQuOjzJzJEEZeMfCs-okO5kqodhWWFLmuYVuI5H8hohUoyPh0senWXnue85Sd0N2hxk0JS-UQreNNi6TjxFSbNS2-tB7Y/s320/blstumbleupon.png'/></a>
<a class='blsocialimgn_1' expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:blog.url' target='_blank'><span>Facebook</span><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ho42nNXvpJnOC2MARecETtUg33oTnqf5cCsBY_912Hnpf9FRLXzqO_Nql-pdxPS_gDybdRDgtMnZ5JPvZ3DaIz1pjgWvAc1ykhX_EUexxeJDVb3ql-0qYyoosO6ULDqWGmi9ss5dJvs/s320/blfacebook.png'/></a>
<a class='blsocialimgn_1' href='http://elbalcondejaime.blogspot.com/2008/02/indice-de-archivos-de-trucos-blogger.html' target='_blank'><span>Consigue este menú</span><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwUoqEEaBmi57ZeZoM5XwV9zqOAO1xKokmfFX5moWt8MmUDORv27GW9UnpuMCrH67oQtQRZQz79dKsZ87ETe8AsGeTHJkagN_4RVm02ILtCbtDmrJdtbeLLgR3jDwaHsQwV-iVDIkutUE/s320/blcc.png'/></a>
</div>
</div>
</b:if>

Guarda la plantilla para terminar...




Nota:

Para ver el resultado, accede a una de tus entradas de forma individual. El menú no aparecerá en la portada del blog.

Si prefieres que permanezca visible también en la portada del blog, borra la condicional <b:if cond='data:blog.pageType == &quot;item&quot;'> y </b:if> que encontrarás al principio y al final del último código a añadir.

SUPERACION PERSONAL dice...

:-( No me ha salido. Supongo que falta por añadir algo en el código. Sólo aparece una estrella y no hace el efecto burbuja.

Puedes verlo en:
Aquí

La Trucoteca dice...

Hola Jaime :)
Pues este efecto es uno de los mas bonitos del Mac OS y la verdad es que "disfrutarlo" en el blog es una maravilla. También vimos hace un tiempo una página que te da un código para utilizar este efecto en los marcadores. Es www.sociofluid.com y la verdad es que el proceso es muy rápido (lo tenemos implementado en Mundo Minerales :D).
De todas formas, muchisimas gracias por el truco, porque además parece que va un poco más fluido con el fantástico JQuery.
¡Saludos desde Murcia!

Rob X dice...

Que excelente truco, ya tengo marcadores sociales pa compartir, pero son fijos y estos tienen buena pinta!! voy a probarlos

Jaime Trujillo Escobedo dice...

¡Me alegra mucho que os guste, Javier y Germán!

Jaime Trujillo Escobedo dice...

Rob X, el efecto es muy llamativo, la verdad. Suerte con la instalación ;).

Jaime Trujillo Escobedo dice...

SUPERACION PERSONAL, ¿Estás seguro de haber seguido los pasos perfectamente? ¿Tienes el script de Scriptaculous o Prototype en la plantilla? Al estar realizado con JQuery, este menú puede tener problemas en su funcionamiento si se tiene aplicado Scriptaculous o Prototype.

David dice...

Hola Jaime, hice todo al pie de la letra pero los marcadores me salen en el titulo, no se por que saludos

Jaime Trujillo Escobedo dice...

David, prueba a incluir el segundo código justo después de la etiqueta <data:post.body/> en lugar de hacerlo bajo <div class='post-footer-line post-footer-line-2'> o
<p class='post-footer-line post-footer-line-2'/>.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo