Botones oficiales de Twitter para compartir una entrada

Hace unas semanas, Twitter presentó sus botones oficiales que permiten twittear cualquier entrada de un método sencillo.
No es tan fácil insertarlos y que funcionen satisfactoriamente, ya que no bastará con colocarlos de cualquier manera en la plantilla, sino que habrá que hacer uso de condicionales para que éstos se muestren únicamente en las entradas individuales y enlacen correctamente a ese post en Twitter (ya hemos visto varios blogs que cometen este error, y por tanto, hagas lo que hagas, el enlace dirige a la Página Principal, y no a una entrada específica).

Para ello vamos a seguir los pasos que tan bien nos explicaba Rosa en su blog

1º. Nos dirigimos a nuestra página de inicio de Twitter, y vamos a la parte inferior, donde debemos pinchar en "Extras", o vamos directamente a este link.

2º. En esa página, pinchamos en "Botón de Twittear".

3º. Escogemos uno de los 3 botones que más nos guste, escribimos más cuentas recomendadas para seguir aparte de la nuestra, que saldrá por defecto, si queremos, y finalmente, si ya está todo listo, podemos copiar el código que a continuación utilizaremos.

Ahora vamos a ver los pasos para configurarlo en las entradas de nuestro blog:

• Nos dirigimos a Diseño> Edición de HTML, y marcamos "Expandir plantillas de artilugios".

1º. Buscamos esta línea:

<div class='post-body entry-content'>

2º Añadimos este código debajo de esa parte, que incluye el condicional para que solo se muestre en cada página de entrada y por tanto, que el enlace sea el correcto a la hora de twittearlo:

<b:if cond="data:blog.pageType == "item"">
</b:if>
<div style="display: inline; float: right; margin-left: 15px;">
CODIGO DEL BOTÓN DE TWITTER</div>

... y sustituimos la parte de Azul por el código del botón que obtuvimos en la página de Twitter, ¡y ya está!, todo terminado.

¿Quieres ver como queda este botón? Puedes observarlo en cualquier entrada de La Trucoteca Design.

Menú horizontal simple con CSS (2)

Hace unos meses os mostrábamos algunos menús que podíais agregar a vuestro blog de manera fácil y rápida: Menú Horizontal Simple y Menú vertical Simple.
Pues bien, hoy os volvemos a presentar un nuevo menú de navegación horizontal, un poquitín más complejo, pero muy sencillo de implementar.
Puedes ver un ejemplo en funcionamiento de éste menú aquí.

Para agregarlo solo debes seguir los siguientes pasos:

1. Añadimos un nuevo Elemento HTML encima de la zona de entradas y en él ponemos el siguiente código:

<div id="menuhorizontal">
<ul id="menuh">
   <li><a href="#">Inicio</a></li>
   <li><a href="#">Acerca De</a></li>
   <li><a href="#">Enlazar</a></li>
   <li><a href="#">Contacto</a></li>
   <li><a href="#">Aviso Legal</a></li>
</ul>
</div>
<style type="text/css">
#menuh {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 50%;
}
#menuh li {
    float: left;
    font: 67.5% "Lucida Sans Unicode", "Trebuchet MS", Arial, Verdana;
    margin: 0;
    padding: 0;
}
#menuh a {
    background: #333 url(http://i825.photobucket.com/albums/zz180/latrucoteca/seperator.gif) bottom right no-repeat;
    color: #ccc;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight:normal;
}
#menuh a:hover {
    background: #2580a2 url(http://i825.photobucket.com/albums/zz180/latrucoteca/hover.gif) bottom center no-repeat;
    color: #fff;
    padding-bottom: 8px;
    }
</style>

2. Guardamos el Gadget y modificamos la siguiente parte, cambiando la almohadilla (#) por la url del enlace, y la parte en Rojo, por el texto que deseamos que aparezca en el menú:

   <li><a href="#">Inicio</a></li>
   <li><a href="#">Acerca De</a></li>
   <li><a href="#">Enlazar</a></li>
   <li><a href="#">Contacto</a></li>
   <li><a href="#">Aviso Legal</a></li>

3. También podemos agregar más botones al menú adjuntando una nueva línea de código después de las ya presentes:

<li><a href="#">Otro título más</a></li>

En caso de querer realizar esta última acción, es recomendable sustituir la cifra coloreada de verde (50%) por un número mayor.
Y de esta forma ya dispondremos de un elegante y vistoso menú en nuestro blog para mejorar así un poco su aspecto :)
Saludos!

Imagen que se ilumina utilizando JQuery

Siguiendo unos sencillos pasos, se puede conseguir un efecto realmente increible, con el cual podremos lograr que al pasar el cursor sobre una imagen (en este caso un boton de RSS) esta se ilumine o recupere su color original.

Puedes ver el ejemplo en nuestro blog de pruebas, en el boton grande de RSS.
Es imprescindible tener dos imágenes: una en blanco y negro (con el Modo Escala de Grises en Photoshop, por ejemplo), y otra en color.
En primer lugar, debemos aplicar el script JQuery en nuestra plantilla; para ello nos dirigiremos a Diseño>Edición de HTML y añadimos antes de </head> el siguiente bloque:

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

<script src='http://sites.google.com/site/latrucoteca/a/fade-desvanecimiento%5B1%5D.js' type='text/javascript'/>

ATENCIÓN! La parte en azul incluye el Script de JQuery, es decir, si ya lo tienes integrado en tu plantilla no hace falta que lo vuelvas a poner. En este caso solo debes agregar la segunda parte.

2. Coloca antes de la etiqueta ]]></b:skin>el siguiente código:

#rss {
width:300px;
height:225px;
margin:auto;
position:relative;
display:block;}
#rss a{
background-image:url(http://i825.photobucket.com/albums/zz180/latrucoteca/rss_bw-300x225.png);
background-repeat: no-repeat;
position:relative;
display:block;
width:300px;
height:225px;
}
#rss span.hover{
width:300px;
height:225px;
background-image:url(http://i825.photobucket.com/albums/zz180/latrucoteca/rss-300x225.png);
background-repeat: no-repeat;
position:relative;
display:block;
}

*Puedes cambiar el id (coloreado en azul) por el nombre que desees, pero recuerda que también deberás cambiar por el mismo nombre el que se encuentra establecido en el script del efecto, por lo que tendrías que editarlo y subirlo de nuevo (o no funcionaría).
También puedes cambiar las URL de las imagenes (primera, blanco y negro; segunda, con color), y los height y width, que deben encajar con las dimensiones de la imagen.

3. Ahora, Guarda los cambios, y añade este código en un nuevo elemento HTML:

<div id="rss"><a href="#" title="Titulo"></a></div>

Por último, puedes cambiar el id, si has decidido hacerlo en los pasos anteriores, y por supuesto el # por la URL del enlace, y Titulo, por el texto que saldrá al pasar el cursor por encima.

4. Guarda el gadget, y ya dispondrás de un magnífico efecto en tu blog (¡Por fin!)

Recuerda que si quieres este efecto, por encima de todo, lo que se necesita es el Script de JQuery, que causa conflictos con Scriptaculous, por lo que no os recomendamos tener los dos a la vez (a no ser que quieras probar la solución de Banaka Banaka!).

Visto en Pazos Blogger, gracias a Design-Notes.

Permitir mostrar todas las entradas

Con una sencilla dirección podremos ofrecer a los visitantes la opción de ver todas las entradas de nuestro blog.

Lo único que debemos hacer es añadir el siguiente código en un Elemento HTML de tu blog:

<a href="http://AQUÍ-LA-DIRECCIÓN-DE-TU-BLOG.blogspot.com/search/label/?max-results=999">AQUÍ-EL-TÍTULO-DESEADO</a>

Si queremos complicarlo un poco, y agregar una imagen en lugar de una palabra, colocaremos lo siguiente:
 

<a href="http://AQUÍ-LA-DIRECCIÓN-DE-TU-BLOG.blogspot.com/search/label/?max-results=999"><img title="TÍTULO-DE-LA-IMAGEN" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVkvLo4R_vg_cK2DBRR-1SvdCysmplRryUoHBBLJ-ifqKZd9wvl7HGswzyF0oJ1g_jsdeWMA1D6wzn6CJZWHtaBOEGrXkgZpMpDo-ATkuRaBLNXNWGmws0O7t1cyRRv4FvGqD8nmUEQ/"/></a>

Esperamos que os sirva :)

Botón de visitantes en línea

Gracias a esta sencilla web podrás colocar en tu página o blog un sencillo botón para informar de los visitantes "online" presentes en ella.
Nos dirigimos a la página web Opromo.com, y allí, al apartado "Visitas Online".
Los pasos a seguir son muy sencillos:
1. Introducimos nuestra URL, (Ej.: www.latrucotecadeblogs.com)

2. Realizamos unos pequeños ajustes (Fuente, Color, Tamaño):

3. Escogemos el logotipo o símbolo (puede ser un ordenador, un corazón o nada)

 4. Y por último, seleccionamos la frase que deseemos que salga junto al símbolo (están en portugués, pero son perfectamente entendibles):

Tras esto, le damos a "Visualizar Abaixo", donde nos saldrá una vista previa del contador de usuarios, y después, copiamos y pegamos el código que nos dan más abajo:

También hay otras páginas como Whos.amung.us , StatCounter, etc.
Nota: Estas indicaciones/contadores de usuarios online son casi siempre bastante imprecisas, por lo que recomendamos tomárselo únicamente como una orientación.

Botón de PageRank en tu blog

Poner un botón de PageRank en tu blog es muy fácil, y, de hecho, hay innumerables webs que ofrecen este servicio.
Nosotros, en esta ocasión, hemos escogido una página llamada Build Reciprocal Links.
1. Dentro de esta web, nos dirigimos al apartado "Pagerank Button":

2. Una vez allí introducimos la URL de nuestra página y ponemos el código Captcha que nos presentan un poco más abajo:

3. Ahora, tras pinchar en "Get PageRank", además de haber calculado tu PageRank, te ofrecerán una larga lista con botones (más de diez) para añadir en tu sitio:

 4. Simplemente copias el código generado del botón que más te guste y lo pegas en un Elemento de HTML/Javascript, o donde mejor te convenga.

Y ya podrás tener un bonito botón para conocer el Pagerank de tu blog o web.

Menú vertical simple para tu blog

Hoy os mostramos un menú vertical que puedes emplear y aplicar en tu blog muy fácilmente.

Para verlo en funcionamiento puedes visitar esta página.
Recuerda que también puedes ver otro menú, en este caso horizontal, aquí.

Para agregarlo sólo tienes que dirigirte a Diseño>Elementos de la página.

Añade un nuevo Elemento HTML, preferiblemente en la sidebar, y pega el siguiente código: 

<div id="menuvertical-trucoteca">
<ul id="menuv">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Enlazar</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
</div>
<style type="text/css">
#menuv {
        float:left;
}
#menuv li {
        background: url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini2.png);
    margin:6px;
    padding:3px;
    border:1px solid #08088A;
        width: 150px;
        text-align:center;
        font-family: Segoe UI, Arial;
        font-size: 14px;
}
#menuv li:hover {
        background: url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini2.png);
        border:1px solid #08088A;
        filter:alpha(opacity=80);
        -moz-opacity: 0.8;
        opacity: 0.8;
        -khtml-opacity: 0.8;
}
#menuv a:hover {
        color: #ffffff;
        text-decoration: none;
        font-weight: bold;
}
#menuv a {
       color: #ffffff;
</style>

Si quieres añadir un nuevo enlace en el menú, solo tienes que copiar y pegar (tantas veces como necesites) la línea que esta en negrita. Quedaría algo asi:

    .................

    <li><a href="#">Enlazar</a></li>
    <li><a href="#">Contacto</a></li>

    <li><a href="#">El título que quieras</a></li>

    .................

Ahora solo tienes que personalizar los enlaces y los títulos; para ello cambia el # por la dirección a la que enlace, y los títulos, Inicio - Acerca de - Enlazar - Contacto - etc., por las palabras que prefieras. Guarda cambios, y ya lo tendrás todo listo.

Menú horizontal simple para tu blog

Aquí os presentamos un menú muy sencillo y útil que puedes poner en tu blog fácilmente.

Puedes ver un ejemplo del menú en funcionamiento aquí. 

Sólamente añadimos un nuevo Elemento HTML ↑ encima de la zona de entradas (preferiblemente) y en él ponemos el siguiente código:

<div id="menuarriba">
    <ul id="navi1">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Enlazar</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
</div>

<style type="text/css">
#navi1 {
    margin:0px;
    padding:0px;

}
#navi1 li {
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
        color:#000000;
        margin:5px;
        padding:3px;
        width: 100px;
        border:1px solid black;
        text-align:center;
        list-style:none;
        font-family: Segoe UI, Arial;
        font-size: 14px;
       float:left;
    }
#navi1 li:hover {
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
        color:#000000;
        border:1px solid black;
}
#navi1 li a:hover {
        color: #ffffff;
        font-style: Italic;
        text-decoration: none;
}
#navi1 a {
        color: #ffffff;
        font-weight: bold;
}
</style>

Tras Guardar, debes modificar la siguiente parte:

    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Enlazar</a></li>
    <li><a href="#">Contacto</a></li>

Las palabras en rojo, por el título que desees que salga, y el asterisco, por la URL de la página o sección a la que quieres enlazar.
También puedes agregar una línea más después de los que ya hay presentes, es decir, un botón más en el menú:

<li><a href="#">Otro título más</a></li>

Y así ya podrás disponer de un sencillo pero atractivo menú para organizar más a fondo tu blog.

Notas:

· Para cambiar el color del menú:
Quizás te hayas dado cuenta de que existe una pequeña imagen que sirve como fondo del menú: http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png
Si quieres cambiar el color deberás, por lo tanto, utilizar otro degradado o imagen que desees, o modificarla con algún programa de edición gráfica como Photoshop (Ajustes>Tono/Saturación), Gimp, alguna utilidad online, o incluso con la misma Galería Fotográfica disponible para Windows.

· En Mozilla Firefox, Safari y Google Chrome, el menú tiene la propiedad de estar redondeado, pero en Internet Explorer, desafortunadamente no, aunque no queda menos elegante.
· Si algún título demasiado largo no encaja bien, prueba a eliminar width: 100px; , o a poner un numero mayor.
· En caso de problemas, puedes dejarnos un comentario y te responderemos lo antes posible :)

Menú creado por La Trucoteca de Blogs

8 generadores y herramientas web de gran utilidad

Hoy os presentamos una recopilación de generadores que pueden ser de gran utilidad si tienes un blog/web.
Se trata de unas páginas en las que puedes crear fácilmente imágenes, menús, botones, etc.
RECUERDA: Es recomendable que alojes en un servidor propio las imágenes (solo las imágenes).

1. FlashVortex

Página gratuita especializada en la generación de banners, menús, botones, textos, relojes, etc.
Ventajas: Muy buenos efectos, la interfaz de la página es simple y cómoda, en general muy útil, gran variedad de gadgets y de opciones de configuración de los mismos.
Configuración del elemento a generar: Fácil y amplia configuración, instrucciones en inglés, se debe copiar el código para más tarde añadirlo en un Elemento HTML o en una entrada.
Desventajas:  Es necesario registrarse/hacerse miembro (mediante pago) para realizar una imagen sin la molesta publicidad (hacia la página misma) que incorporan en el gadget generado. Página en inglés.

Ejemplo:

Un menú que podría quedar muy bien en las fechas en que estamos:

2. Wigflip 

Pueden conocer algunos detalles de esta página en esta entrada creada anteriormente en La Trucoteca de Blogs,  así como ver algunos ejemplos generados.

3. Email-Icon Generator

En esta página puedes crear tu propio logo para tu correo electrónico. Pueden encontrar más información en la siguiente entrada.

4. Image Chef

 

Compleja web con muchas opciones, así como herramientas para crear tu propia imagen, gadgets, botones, animaciones, etc.

Ventajas: Creación fácil y sencilla, interfaz bien organizada, accesible y cómoda, en español.

Configuración del elemento a generar: Generalemente son pocos los pasos que hay que realizar, además de estar las instrucciones en español.

Desventajas: Presencia de publicidad hacia la página ImageChef en el gadget generado.

Ejemplo:

5.  Widgetbox

Otra web con un amplio contenido relacionado con los widgets: relojes, botones para compartir el blog, etc.
Contituye, para entendernos, un almacén de gadgets que puedes poner facilmente en tu bitácora, al estilo de los que Blogger pone a la disposición, pero con publicidad hacia su sitio web, además de continuos anuncios desplegables.
Configuración del elemento a generar: Al ser simplemente widgets, no pueden ser personalizados y el único paso que se tiene que seguir es el de seleccionar el deseado y copiar/pegar el código que te ofrecen pinchando sobre Get Widget. Interfaz de la página en inglés.
Desventajas: Publicidad en los widgets "un poco" abusiva, página en inglés.

6. Buttonator

Crea botones de alta calidad gratuitamente con esta sencilla página, cuyas instrucciones están en Inglés.
Ventajas: No tiene ni publicidad ni enlace hacia la web creadora. Variedad de opciones en la personalización del botón, con algunos iconos incluidos.

7. PicJoke
Una de las webs más sencillas para realizar retoques fotográficos, sin complicaciones, cuyo único "pero" sería la incrustación del nombre de la pagina (Picjoke.com) en la fotografia retocada.
Aquí os dejamos un ejemplo de los muchos tipos de fotografias que se pueden generar:

8. Pixel Button
Ya no tienes excusas para no disponer de un banner, por pequeño que sea, en tu blog, y es que con esta página podrás crear facilmente botones anti-pixel muy atractivos, que constituyen una buena opción a la hora de enlazar.
Puedes cambiar el color del fondo del botón, el color de la letra, y se puede descargar en dos formatos: .gif y .png

Ejemplo:

Esperamos que os sirvan estas 8 webs.
Y tú, ¿conoces alguna página más relacionada con el tema? Si es interesante, la añadiremos en esta entrada. Nos interesa tu opinion, ¡anímate y comenta!

Añadir marcadores sociales en tu blog

Hace un tiempo vimos en El Balcon de Jaime una entrada sobre como aplicar unos marcadores sociales en tu blog, para permitir a los usuarios compartir las entradas en diferentes páginas como Facebook, Technorati, Delicious, Twitter, Digg, etc.
Pues bien, nos pareció muy interesante, así que vamos a explicarlo para aquel que quiera conseguirlo.

Vamos a Diseño> Edición de HTML de la plantilla y expandimos artilugios:

Ahora buscamos esta linea (Ctrl+F):

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

Debajo de esa línea, añade lo siguiente:

<b>Compartir:</b>

<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Technorati'><img alt='Agregar a Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhTWbrpM_jWy4vuO9Dsr_n52Xo5G4wRTn9p9bWBXJh0RtVoMwU7RVI8htQy8Cl1B_yuadsle2YLcQkI3prTLucnxfKFwcYruosLCvIPPti4jUjjj912ojgA1ljwsX3bL9dKsXZh2AbPr4/s1600-r/technorati.gif'/></a>

<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twittealo'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhML1ycd5EKwwksryNVQObNe2tdrCl9B1iW8Kttzk_aHGo3zb7VghPKmxONyBRmk36aI1edDbeRqWJTy8XPc3woD1eGg36w68wUOrUPcddC804akkqwNAVpzX7TC0JuS_xMe7T0He5b5Z8/s1600-r/twitter.png'/></a>

<a expr:href='&quot;http://bitacoras.com/votar/anotacion/externo/mini/&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Bitácoras.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVXVSztK0I76dUH5aFDHl_v2PcpOO14sxczfXlVghRe-Ii8i3AlAl72BQAFCn0xrzyk1VmYqiXPeF3Ofh8R9trXr8fgYPRz5zwlEYTkcnoOLgg9qzw04ve90_q91y1xxRHcoPc66cUWKI/s1600-r/bitacoras.png'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Reddit'><img alt='Agregar a Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMDlknqkz42MAIsEEoHdAAaezYulSZhBdcih5Ce0M-RnI8YVQFHUUehDfakZfi6Qr9FB3xQi89kFcgbQD6uPSGdx4P_3-4fVb1ewEhxGmghHazN_jGiYKCfkRaYw_UB4R5RF3YtdNlp4/s1600-r/reddit.png'/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Del.icio.us'><img alt='Agregar a Del.icio.us' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEYmfa5wZtc3nRbTT5wXfzG-pGaQcgH9bznSOibvsWJ6nX7bV4aYodMtUP4mK9bScyS6-NndZEpQpnKDz2-mWskoUQz5M6fZXZmEoTF8KqXK-h6-saB4HG6KqmWxeMsWnjr93CBhKS2Tg/s1600-r/delicious.gif'/></a>

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a DiggIt!'><img alt='Agregar a DiggIt!' src='http://img171.imageshack.us/img171/8971/digg.png'/></a>

<a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Blinklist'><img alt='Agregar a Blinklist' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_XBK-Ej5nWntL715QxiNL8pnZyCVlUNIns9rzcozF38KVoO41Sva6ejGluUc3OFkaIXeonPgCQqndFgZZ64OEpE098RRQKmG6KJYFY7Sjf8prC2Cj3PdE0iQfNY4KU1QGUDdvFFwHKYM/s1600-r/blinklist.png'/></a>

<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Google'><img alt='Agregar a Google' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghko1scPBssr3f6PI0iFWwD2eUhtg0IpWYwO0mRQ2LzPmyjVz6ArGv5R1rPXyBdH9s7qoUmDsOkbDwTLdakZQkNsiOeBWrSu5bL4KkzLoYOWWZowyduE2em2hrbHa9Q8EL_-Jae8kpsvQ/s1600-r/Google.png'/></a>

<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqtW6KBEd_rGwgx38K6Ntj2qgH_OXW4tGMfeyHVk6yC6IcRqRASM-y6Z0wOX3luPO6B_4QQmpWXw8l4sjC3jPEo9GzQKGKgIRGO1ZRo0SSU5Y7zgQeAg7UwtACLN-gEN15bcRUXUBvQc/s1600-r/facebook.png'/></a>

<a expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Meneame'><img alt='Agregar a Meneame' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuulIM99k8-wVGRsvg29lG_FVcGLtakmwJjKwcM3iffLALaugWw_Larb_EyFpYFHyMRwIbt9gRkmLvXDhaEK65DYJumlwAEULCEK9cJVVEoN6qx92VkaEsQnHhHEZ16ztpyzlXEaN8ANI/s1600-r/meneame.gif'/></a>

Y si todo ha salido bien, Guardamos Cambios, y el resultado debería ser este:

Saludos!!!