Como crear tu botón “Follow Me”
El primer paso es acceder al servicio en Twitter “Follow” Badge en donde puedes configurar los siguientes parámetros.

• Twitter account: el nombre de tu cuenta de Twitter.
• Label: es el texto que aparecerá en el botón.
• Color: es el color de fondo del botón.
• Side: puedes elegir si el botón se muestra a la derecha o izquierda.
• From top: es la separación de la parte superior.

Luego de configurar estos parámetros hacen click en el botón “Update Code” el cual generará un codigo Javascript de la siguiente forma:

1
2
3
4
5
6
7
8
9

<script src='http://files.go2web20.net/twitterbadge/1.0/badge.js' type='text/javascript'></script>
<script type='text/javascript' charset='utf-8'><!--
tfb.account = '2webfacil';
tfb.label = 'follow-us';
tfb.color = '#35ccff';
tfb.side = 'r';
tfb.top = 136;
tfb.showbadge();
--></script>

Esto código debes colocarlo en el código fuente de tu página o blog, debes colocarlo antes de la etiqueta </body>.

AddThis
AddThis es una librería Javascript que permite agregar fácilmente los botones para compartir contenido en diferentes sitios. Se puede personalizar y soporta hasta 50 idiomas y soporta mas de 150 servicios como Twitter, Facebook, MySpace entre otros.

Como utilizar AddThis
El uso de AddThis es sencillo para ello accedemos a http://addthis.com en donde seleccionamos que tipo de página tenemos (Blogger, WordPress, MySpace o un Web normal) luego el tipo de botón a utilizar, opcionalmente puedes seleccionar una opción para obtener estadísticas de las visitas para lo cual hay que registrarse y finalmente generamos nuestro botón.

AddThis en tu Website
Si seleccionamos website el código generado será de la siguiente forma, el cual debes colocar en cada página donde desees agregar la opción para compartir.

1
2
3
4

<!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-4aff590b0be123da"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4aff590b0be123da"></script>
<!-- AddThis Button END -->

AddThis en Blogger
Si utilizas Blogger puedes agregarlo rápidamente a tu sidebar con la opción Install to Sidebar que agregará el código necesario automáticamente. Ahora si deseas agregar la opción en cada post debes editar tu plantilla y agregar el código generado justo después de la etiqueta >div class=’post-footer’<

Guardas tu plantilla y ya tienes instalado esta opción en tu blog. Puedes el ejemplo funcionando en nuestro blog de prueba en: http://2webfacil.blogspot.com

Agregando la Traducción Automática
El servicio Google Traductor ofrece una herramienta para hacer la traducción automática en Make your website instantly available in other languages. Para ello lo que tenemos que hacer es primero seleccionar el idioma original de nuestro web y luego de ello se generará un código Javascript que tenemos que colocar en nuestro web.

Ahora si deseamos podemos agregarle un mensaje personalizado antes de mostrar la opción para traducir podemos agregar el texto dentro del div, con lo que tendríamos el siguiente código:

1
2
3
4
5
6
7
8
9

<div id="google_translate_element">Traductor Automático</div>
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'es'
  }, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Con lo cual obtenemos la opción para traducir rápidamente nuestro web, además de ello se muestra en la parte superior una barra con la opción para traducir el web. Sencillo y rápido es la implementación y nos ayudará a brindar acceso a mas personas al contenido de nuestro web. A partir de ahora el idioma no será un impedimento para que los usuarios puedan entrar a tu web.

SyntaxHighlighter 2.0
SyntaxHighlighter es un script creado por Alex Gorbatchev para resaltar código fuente en páginas HTML hecho completamente en Javascript por lo cual la solución ideal para integrarlo con Blogger.

Instalando SyntaxHighlighter
Normalmente se debe alojar este script en nuestros servidores, pero como Blogger no permite subir archivos .js, utilizaremos la versión hosteada que nos brinda SyntaxHighlighter. Entonces lo primero es incluir la librería en nuestro template, para ello editamos nuestro template y colocamos el siguiente código justo antes de la etiqueta <head>.

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="'text/javascript'"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="'text/javascript'"></script>
<script type="'text/javascript'"></script>

Donde las dos primeras líneas incluyen las estilos y las dos siguientes los scripts para interpretar el código fuente. En mi caso he incluido la librería shBrushXml.js pues yo deseo publicar solo HTML. Pueden agregar otros lenguajes con solo agregar mas scripts, para una lista detallada de los scripts que puedes incluir pueden leer SyntaxHighlighter/Brushes.

Publicando Código Fuente
Ahora que ya tenemos instalado nuesro script, el siguiente paso es publicar código fuente, para ello debemos colocar el código que deseamos publicar entre los tags <pre> pero además debemos indicar que tipo de código estamos mostrando esto lo hacemos de la forma:

<pre class="brush: xml">
// codigo fuente
< /pre>

Nuevamente en mi caso utilizo XML para indicar que deseo publicar HTML. Entonces si por ejemplo deseamos publicar parte de un formulario en html, podriamos hacerlo de la siguiente forma:

<pre class="brush: xml"><form method="post">
   Nombre: <input id="nombre" name="nombre" type="text" />
   Email: <input id="email" name="email" type="text" />
   <input name="btsend" type="submit" value="Enviar" />
</form>
< /pre>

NOTA
Hay que tener en cuenta que para evitar errores de HTML al momento de publicar el código fuente debemos cambiar los caracteres < y > por sus equivalentes en HTML:

• < por su equivalente &lt;
• > por su equivalente &gt;

Además de ello pueden ver el ejemplo funcionando en nuestro blog de prueba en Blogger: http://2webfacil.blogspot.com/2009/07/codigo-fuente-en-blogger.html