Todo comenzó con la pregunta de sancocho en un comentario dentro del Blog. El mismo me consulta sobre cómo agregar las solapas que tengo en este blog a la derecha donde tengo los "Destacados", "Archivo", "Categorías", etc.
Bueno, la respuesta comienza en haber agregado tabs o pestañas dentro del diseño que no las traía. Hay varias formas de agregar pestañas, yo voy a comentar el que utilicé que es totalmente adaptable a Blogger/Blogspot, es mas, hice un Blog temporal de Demo con las pestañas agregadas para que vean que funciona.

Dentro de estas pestañas podrán poner todo tipo de contenido ya que es parte de código HTML, así que lo que pongan dentro de cada una es como si lo pusieran independientemente. El ejemplo es solo con links pero es totalmente adaptable a imágenes como tengo en la pestaña "Directorios".

El procedimiento que utilizo es gracias al increíble JavaScript creado por BarelyFitz Designs. Para acceder al JavaScript tabifier podes hacer click aquí ».
A continuación comento los pasos, podés ver que las Tabs funcionan en Blogger en este link:  Tabbed Blogger
Hay algunos templates de Blogger que ya incluyen los Tabs o Pestañas. Podés encontrar varios templates de este tipo en BTemplates como: Forte y Visionary

Pasos:
1. Bueno, en principio vamos a necesitar subir un archivo de JavaScript a algún hosting que podamos utilizar para luego linkearlo. Un ejemplo es Google Pages. Ahí podés crear un sitio html o bien subir archivo para luego utilizarlos como en nuestro caso el JavaScript que necesitamos. Una vez creado el sitio de Google Pages, que es un click "Crear" jaja vamos al botón "Upload" y subimos el archivo JavaScript siguiente que previo lo hemos bajado a nuestro disco.

Bajar el Archivo JavaScript (Es un zip y dentro del zip está el tabber.js que es el que debemos utilizar)

2. Ahora volvemos a Blogger y vamos a Diseño -> Edición de HTML. En esta sección vamos a agregar el código necesario para llamar al JavaScript y la primera parte del diseño de las pestañas.

Debemos agregar la primera línea de código debajo de ]]></b:skin> pero antes de </head>.

<script type="text/javascript" src="http://www.tusitio.com/tabber.js"> </script>

Obviamente el www.tusitio.com se debe modificar por la URL de donde subiste el Java Script, por ejemplo, tusitio.googlepages.com, etc.

3. Seguimos en la misma sección pero ahora vamos a agregar parte el código de diseño, que en el ejemplo es muy pobre jaja pero era a modo de ejemplo. Es mas, es parte del ejemplo que viene en el archivo .zip que bajamos antes.

Este código debe ser insertado justo antes de ]]></b:skin>.

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide { display:none;}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {}
.tabberlive { margin-top:1em;}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif;}
ul.tabbernav li { list-style: none; margin: 0; display: inline;}
ul.tabbernav li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none;}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover { color: #000; background: #AAE; border-color: #227;}
ul.tabbernav li.tabberactive a { background-color: #fff; border-bottom: 1px solid #fff;}
ul.tabbernav li.tabberactive a:hover { color: #000; background: white; border-bottom: 1px solid white;}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {  padding:5px; border:1px solid #aaa; border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 { display:none;}
.tabberlive .tabbertab h3 { display:none;}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {}
.tabberlive#tab2 {}
.tabberlive#tab2 .tabbertab { height:200px; overflow:auto;}
.tabberlive .tabbertab li{list-style-type:none;background:transparent url(i/b.gif) no-repeat 0 2px;border:0;margin:0 0 1px;padding:0 0 0 15px;}

Guardamos los cambios que hicimos y vamos a agregar el contenido de las pestañas o tabs en nuestro sitio.

4. Vamos a "Elementos de la página" y agregamos un nuevo elemento HTML. Lo ponemos donde querramos que aparezcan las pestañas y dentro de éste ponemos el siguiente código:

<div class="tabber">

  <div class="tabbertab">
    <h3>Sección 1</h3>
    Contenido de la sección 1.
  </div>

  <div class="tabbertab" title="Título">
    Contenido de la sección 2.
  </div>

</div>

Si guardamos lo que hicimos y vemos nuestro sitio deberíamos ver 2 pestañas, una llamada Sección 1 y la otra Sección 2. Hasta ahora ambas tienen sólo texto pero ese contenido de la sección se puede cambiar por cualquier código que nosotros querramos agregar.

En el caso de la sección 1, el título de dicha pestaña está definido por <h3>, ahora en el segundo caso se utilizó un title dentro del <div>. Por ejemplo, podríamos agregar una lista de enlaces o cualquier otro trozo de código HTML que nosotros querramos. No tengo a mano una forma de agregar los links destacados pero podemos hacer una lista a mano con los 5 enlaces que mas queremos que la gente visite.

El diseño se puede modificar a través del código CSS que se agregó mas arriba. Dejo a la imaginación de cada uno para realizar dichas modificaciones y lograr el mejor diseño para Blogger.

Por otro lado, podemos agregar tantas pestañas como querramos o nos entren en nuestro diseño, para cada pestaña que querramos agregar debemos utilizar el siguiente código justo antes del último </div> que se ve mas arriba.

<div class="tabbertab">
    <h3>Título de la Pestaña</h3>
   Contenido HTML de la sección
</div>

Con este artículo vas a poder agregar las pestañas o tabs en Blogger. El código que introduzcas en dichas pestañas será el poder que le des a este sistema muy utilizado últimamente en los sitios ya que permite ordenar parte de la navegación para el usuario utilizando menos espacio.

Si no te funciona, cualquier duda o consulta por favor dejame un comentario e intentaré responder a la brevedad.

Adrián

Si bien la solución la podrías obtener de dicho sitio, está en inglés y si no estas ducho con el idioma tendrías que andar traduciéndolo para lograr el objetivo. De este lado voy a dar una mano simplificando un poco las cosas que hay que hacer y cómo hay que hacerlas.
Hay dos formas de hacerlo, una, si no entendés nada de código o no tenes ganas de andar editando el código HTML de tu Blog podés usar la solución de "Un Click Instalación del Widget" o bien podés ir por el otro lado a customizar en un 100% el widget que agregues.

Si optaste por el camino corto y decidiste instalar el Widget en un un click, tenes que ir al sitio Widget Installation and Downloads Page y ahí hacer click sobre el Widget "Add Recent Posts to Blog". Se va a abrir una ventana donde vas a poder customizar completamente la cantidad de posts que quieras, si queres el formato standard o si vas a definir uno vos, etc. Es muy sencillo de configurar y una vez finalizado haces click en Add Widget to My Blog y listo. Si queres customizar el formato de la lista de posts, letra, tamaño, etc. vas a tener que generar tres clases de código CSS en tu Blog con los siguientes nombres: bbrecpost, .bbrecpostsum y .bbwidgetfooter. Incluso con esta opción deberías cargar una línea adicional en tu Blog justo antes de </head>. No es necesario para todos los widgets pero así lo recomienda en su sitio.

<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>

Esta opción no la recomiendo porque siempre estas dependiendo del código fuente de su creador, si bien te aseguras de estar actualizado el día que su archivo no esté mas online vos te quedaste sin posts recientes. La solución para esto es la segunda opción de instalación.

La segunda opción es que vos mismo hostees ese archivo con la funcíón de obtener los posts recientes y luego lo utilices. Pero tal vez me digas "yo no tengo un servidor propio para subir archivos". Eso no es problema, podés ir a GooglePages usar tu usuario de Blogger e ingresar al servicio. En este servicio podes crear páginas web a tu gusto, que incluso podrías usar o linkear desde tu Blog o bien podes subir archivos que es lo que nos interesa.

Entonces los pasos serían los siguientes:

Bajar las funciones de JavaScript desde este link: Note: There is a file embedded within this post, please visit this post to download the file.
Lo bajás a tu equipo y lo descomprimís así te queda un archivo llamado showrecentposts2.js.
Ingresás a GooglePages y en la parte de la derecha hacés click en upload.
Ahí con el botón Browse elegimos el archivo que recien descomprimimos y lo subimos a nuestro sitio de GooglePages.
Una vez subido si nos paramos sobre el archivo vamos a ver la dirección web completa del archivo, esta dirección la necesitamos así que recomiendo tomar nota.
Una vez que tenemos esto listo, volvemos a Blogger y vamos a Diseño -> Edición HTML.
Primero editamos el código CSS que es el que le va a dar formato a nuestra lista. Para que se vea como mi lista cargué este código:

.bbrecpost {
  margin: 0 1px;
  position: relative;
  top:-18px;
  padding-left: 0;
  list-style-type: none;
  list-style-image: none;
  font-family: 'Trebuchet MS', Verdana, Sans-Serif;
  font-size: 12px;
}

.bbwidgetfooter {
position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0;}

Notarán que una de las 3 clases que nombré antes no está, eso es porque no utilizo la función de resumen de las entradas recientes. En ese caso si debería definir la clase adicional. El footer figura como left:-9999px y eso es para quitar el footer de la pantalla ya que no quedaba muy bien. Estos valores los podes modificar acorde a tu Blog, los nombres de cada propiedad de clase son bastantes intuitivos.
Con eso ya estamos en cuanto a edición HTML, ahora vamos a "Elementos de la Página". Ahí agregamos un widget de Código HTML/Javascript. Le ponemos el título que querramos, por ejemplo "Ultimos Posts" y en su contenido ponemos algo como esto:

<script style="text/javascript" src="http://tu-sitio.googlepages.com/showrecentposts2.js"></script><script style="text/javascript">var numposts = 8;var showpostdate = false;var showpostsummary = false;var numchars = 0;var standardstyling = false;</script><script src="http://dcabai.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Luego movemos el widget a la parte que mas nos guste de nuestras sidebar o footer y listo ya debería mostras los posts recientes. Pero con este ejemplo te va a mostras mis posts recientes. Hay ciertos parámetros para modificar del código, por ejemplo:

src=http://tu-sitio.googlepages.com/recentposts2.js  >> Acá tenes que poner la URL completa donde subiste el archivo en los pasos anteriores.
numposts = 8   >> Cantidad de Posts que queremos mostrar.
showpostdate = false  >> Si muestra o no la fecha del post, posible true o false 
showpostsummary = false   >> Si muestra un pequeño resumen del post, recuerden agregar la clase de CSS para esto
numchars = 0   >> Cantidad de caracteres del resumen, por default son 100
standardstyling = false   >> Si vas a usar tu propio CSS o el Standard, puede ser true o false
src="http://dcabai.blogspot.com/feeds/posts/default?orderby=published   >> Acá va la dirección de tu Blog donde está la mia. Debes cambiar dcabai.blogspot.com por tu blog, después el /feed/posts/default se debe mantener igual. Lo que podes cambiar es si queres que el órden sea de publicado o actualizado.

Recomiendo el publicado porque si después ingresas a modificar un posts viejo y lo actualizas con una modificación por ejemplo, va a aparecer en la lista.

Una vez que modifiques esos parámetros y publiques el Widget deberías ver los posts recientes. Nuevamente te recomiendo que utilices la segunda opción, pero si se te complica mucho la primera es muy válida también.

Podés hacer lo mismo con los Comentarios cambiando la dirección de los Feeds por la que desees pero en la página de Beautiful Beta hay un Widget con este fin únicamente. Cualquier duda o pregunta sabes que podes dejarme un comentario y voy a tratar de responderte a la brevedad.

La idea de este artículo es explicar una forma de agregar emoticons o caritas en Blogger automáticamente. Con esto quiero decir que cuando escriban :) les aparecerá una carita similar a esta . Puede ser esta carita o el ícono o gráfico que nosotros querramos y el sistema funciona no sólo para insertar emoticons sino que uno puede cambiar cualquier palabra o símbolo por imagen automáticamente con este sistema. Por ejemplo, yo puedo configurarlo para que cuando escriba "casa" me aparezca el gráfico de una casa automáticamente. Obviamente que este ejemplo no tiene mucha utilidad pero quiero demostrar lo que se puede hacer. En este caso voy a tomar unas caritas que ya estan hosteadas, pero si queres customizar el sistema con tus propios emoticons primero deberías subirlos a la web, hostearlos en algún lado. Podés usar Picasa web para esto, o Google Pages como otra opción gratuita y efectiva. Para esto hay que modificar el código HTML del Blog así que como siempre te recomiendo que antes realices un Backup del mismo.

En principio debes instalar el siguiente código justo antes del </head>:

<!--BloggerEmoticons-->
<script type="text/javascript">
<!--

function replaceText() {
// no support
if(!document.getElementById) {
return;
}

bodyText = document.getElementById("body");
theText = bodyText.innerHTML;

// replace
theText = theText.replace(/;\)/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" alt=";)" />');
theText = theText.replace(/;-\)/g,'<img style="border:none;vertical-align:middle"  src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" alt=";-)" />');
theText = theText.replace(/:D/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" alt=":D" />');
theText = theText.replace(/:-D/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" alt=":-D" />');
theText = theText.replace(/B\)/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" alt="B)" />');
theText = theText.replace(/B-\)/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" alt="B-)" />');
theText = theText.replace(/:x/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":x" />');
theText = theText.replace(/:X/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":X" />');
theText = theText.replace(/:-x/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":-x" />');
theText = theText.replace(/:-X/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":-X" />');
theText = theText.replace(/:-\(/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" alt=":-(" />');
theText = theText.replace(/:\(/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" alt=":(" />');
theText = theText.replace(/:o/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":o" />');
theText = theText.replace(/:O/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":O" />');
theText = theText.replace(/:-o/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":-o" />');
theText = theText.replace(/:-O/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":-O" />');
theText = theText.replace(/:p/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":p" />');
theText = theText.replace(/:-p/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":-p" />');
theText = theText.replace(/:-P/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":-P" />');
theText = theText.replace(/:P/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":P" />');
theText = theText.replace(/:-\)/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" alt=":-)" />');
theText = theText.replace(/:\)/g,'<img style="border:none;vertical-align:middle" src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" alt=":)" />');

bodyText.innerHTML = theText;
}

-->
</script>

<!--End BloggerEmoticons-->

En este caso utilicé los emoticons que estan en la URL de Blogger, pero estas URL se pueden cambiar con las emoticons que cada uno tenga. Mas abajo dejo unos links de donde obtener otras emoticons para cambiar el diseño. También tiene configurado el border en 0 píxels y que esten alineadas en el centro con la opción vertical-align:middle. Esta parte se puede eliminar si es que queremos que no este alineada. Es importante que al guardar la plantilla luego de modificarla respete los espacios y los saltos de línea. Revisa esto antes de consultar el por qué no funcionó el código. A veces cuando uno hace copy y paste dentro del código no copia bien los saltos de línea.

Como último paso debemos editar el código HTML de nuestro blog nuevamente y buscar el siguiente texto: <body> y reemplazarlo con la siguiente línea:

<body id="body" onload="replaceText();">

Listo, con esto ya está listo y podes empezar a escribir emoticons en tu blog que se va a mostrar las caritas. Recuerda que esto va a modificar TODO lo que se escriba en el blog, incluso los comentarios y hasta puede llenarte el blog de imágenes. Si me pedís recomendación yo te diría que no lo habilites y si deseas usar emoticons o caritas en tus posts o artículos, utilices el Windows Live Writer para escribirlos con el plugin de Smileys.

Source | Blogger Emoticons
URL1 | MSN Emoticons
URL2 | Yahoo Messenger Emoticons
URL3 | Yahoo Hidden Emoticons

Este artículo es para la gente que está iniciando en Blogger o bien hace tiempo que está pero no sabe cómo modificar el título y descripción que aparecen por defecto en un template común y corriente.
Cuando damos de alta un nuevo Blog por ejemplo, pone el título por default en el header de la página. Lo mismo pasa si agregamos una mini descripción del mismo.

Blogger nos da como opción agregar una imágen al fondo del título o header pero si lo hacemos no queda muy bien con el título o descripción que aparece ahí con una fuente standard y los colores standard. Cuando digo standard es a las opciones de customización básicas que nos provee Blogger para modificar el título. Qué pasa si queremos un título mas avanzado o hicimos algún gráfico al estilo 2.0 muy bueno y queremos usarlo como título único sin que figura ni el título ni la descripción?

En el artículo Cómo crear un Logo Web 2.0 en Photoshop se explica de manera muy sencilla cómo hacer un buen título para Blog sin demasiados conocimientos. Si eso sigue siendo difícil para ti entonces prueba con SimWebSol Logo Generator o Web 2.0 Stylr que son herramientas online para generar logos.

Bueno la idea es comentar los pasos para modificar el título, descripción y fondo del header de un template común por default para que todos puedan hacerlo y así darle un mejor look and feel. También al final de regalo comento cómo sacar la barrita de Blogger un tanto molesta que se pone arriba de todo en la ventana.

Como primer paso siempre es necesario registrar el Blog en www.blogger.com o bien ingresar al panel de nuestro blog ya creado.
Una vez que tengamos nuestro Blog necesitamos ver que tengamos el título y la descripción configurada, esto es importante, NO HAY QUE BORRAR EL TITULO Y LA DESCRIPCION, lo que vamos a hacer es una modificación en el código para que no se vea, pero hay que dejar esos datos para que otras páginas como los buscadores por ejemplo nos detecten por esa info o bien ya sea como título de la misma. Esto lo configuramos dentro de "Configuración", solapa "Básico" y campos "Título" y "Descripción".

Si tenemos el Blog por default configurado deberíamos ver algo por el estilo...

Acá podemos ver el título del Blog "Diego Cabai Beta", su descripción justo debajo, el fondo del header que es todo verde y la barra superior de Blogger.
La idea es modificar todo esto para poder poner un lindo logo estilo web 2.0 de fondo. Hacemos el logo en las páginas web que les pasé mas arriba y logramos algo por el estilo que vamos a subir a algún hosting que tengan o bien a su cuenta de picasaweb.google.com.

El logo creado es el siguiente:

Bueno, ahora como siguiente paso vamos a quitar el título y la descripción de la página modificando el código HTML. Para esto vamos dentro de nuestro Panel de Blogger a "Diseño" -> "Edición HTML". Ahí hacemos click en "Expandir plantillas de artilugios" para que muestre todo el código.

Para sacar el título debemos buscar el siguiente código:

  <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <data:title/>
<b:else/>
  <a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>

Y modificarlo eliminando el <data:title/> para que quede de la siguiente manera:

  <b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:else/>
  <a expr:href='data:blog.homepageUrl'></a>
</b:if>

Luego hacemos lo mismo para Descripción, buscamos el siguiente código:

<b:includable id='description'>
<div class='descriptionwrapper'>
  <p class='description'><span><data:description/></span></p>
</div>
</b:includable>

Y lo modificamos eliminando el <data:description/> de la siguiente manera:

<b:includable id='description'>
<div class='descriptionwrapper'>
  <p class='description'><span></span></p>
</div>
</b:includable>

Guardamos las modificaciones que hicimos y en este punto podemos ver cómo nos quedó nuestro Blog de prueba y lo muestro en la siguiente imágen:

Podemos ver que el título y la descripción ya no es encuentran, pero el título en la ventana del explorador se mantiene y si pedimos información desde afuera nos trae incluso la descripción.

En el siguiente paso vamos a eliminar la barra de Blogger que aparece arriba de todo, esa azul por default que podemos cambiar de color pero que la verdad a la mayoría nos molesta. Es totalmente legal, se puede hacer y no perjudicás para nada tu sitio, así que si la barra no te agrada seguí estos pasos para quitarla. Luego de este paso vamos a agregar un logo para que quede bien como título.

Para quitarla debemos agregar un código, para esto vamos nuevamente a "Edición HTML", pero esta vez no hace falta expandir los artilugios. Lo que debemos buscar es la línea de código <b:skin><![CDATA[ y poner este código justo una línea debajo. Si al lado de esa línea se encuentra un /* se debe poner entre medio de ambos para que funcione. No hay problema en hacer espacio con la tecla enter, pero asegurate que quede luego del CDATA[ y antes del /* en caso de que exista, repito nuevamente.

Código:

#navbar-iframe {
 height:0px;
 visibility:hidden;
 display:none
}

Guardamos lo que hicimos y vamos a ver que la barra superior ya no se encuentra mas entre nosotros. :)

Ahora como último paso vamos a insertar un logo que creamos como título de nuestro Blog. Debemos subir nuestro logo a un hosting de imagenes o nuestro propio hosting, pero si es un hosting de imágenes gratuitas también sirve. Necesitamos si la dirección URL de la imágen para lograr la customización. El siguiente código se puede insertar justo antes de ]]></b:skin> y luego paso a explicar qué es cada sección para luego poder modificarlo a gusto.

.milogo {position: relative; top: 0px; left: 40px; background: url(http://www.lcinstalaciones.com.ar/dcblog20/img/misc/dcabai_beta.png) no-repeat left top; width: 260px; height: 78px; padding: 0;}

Ese va a ser el código del diseño, ahora el código para insertar el logo es el siguiente y debe estar justo después de <div id='header-wrapper'>.

<div class='milogo'/>

Con ese código ya insertado vamos a ver el siguiente resultado:

Como se puede ver ya el diseño cambió y tiene un poco mejor de look estilo web 2.0. No es la gran cosa pero era simplemente para mostrar cómo hacerlo. Ahora bien, qué significan las líneas de código de diseño del logo y cuáles debemos modificar?

.milogo = Este va a ser el nombre de la clase que va a tener el diseño, si lo modificamos debemos cambiarlo en la segunda parte del código también.

position: relative = Este parámetro puede ser relative o absolute y puede variar según nuestro blog cuando modifiquemos el tamaño de ventana. Probar con el que mejor quede.

top: 0px = La cantidad de píxels que va a tener contando desde arriba de todo.

left: 40px = Idem que el anterior pero desde la izquierda.

background: url(http://milogo.jpg) no-repeat left top = Este ítem es donde debemos poner la URL de la imágen que queremos subir, la misma va dentro de los paréntesis de url, luego el no-repeat le dice que la imagen no se repita y sea una sola y por último diciéndole left y top quiere decir que se va a posicionar arriba a la izquierda.

width:260px = Este es el ancho de la imágen, debe ser exacto para que quede bien.

height:78px = Idem que el anterior pero el alto de la misma.

padding: 0 = El padding es un estilo de margen que se le puede agregar a la imagen, con 0 le decimos que no hay ninguno, pero cambiandolo por un número sería en píxels.

Hay que recordar que NO estamos utilizando la función de agregar gráfico de Blogger ya que no queda muy bien, sino que estamos editando el código directamente.

Eso es todo, cualquier parámetro con dudas o cualquier consulta por favor dejame un comentario que lo voy a responder a la brevedad o bien puedes enviarme un correo desde la botonera haciendo clck en "Contacto".

Arrancamos el año con todo, por eso estoy estrenando una nueva función en el Blog. Cuando ingreses a un artículo, verás en la parte inferior del mismo y luego de los comentarios, un cuadro con una lista de artículos relacionados al que estas leyendo. De esta manera se puede seguir navegando por el Blog dentro de los mismos temas o categorías de tu interés. Adicionalmente a eso se agregará la posibilidad de que ingreses tu banner por cierto tiempo a un bajísimo costo, lo que puede representar gran publicidad para tu sitio. Este último feature todavía está en etapa beta, pero pronto lo verás en la misma sección.

El código para implementar esto lo saqué del sitio de PurpleMoggy, mas abajo agrego algunos comentarios sobre la variante en cuanto a diseño que hice, pero en principio traduzco el tutorial para aquellos que les sea complicado seguirlo.

Antes de empezar nos tenemos que asegurar que nuestras etiquetas no tienen ningún caracter extraño como (?) o (/).
Para empezar agregaremos el código JavaScript al sitio y para eso tenemos que ir a nuestro panel de Blogger, elegir la solapa "Plantilla" y luego "Edición HTML". Ahí buscamos el tag "</head>" y justo antes de esta línea colocamos el siguiente código:

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
 for (var i = 0; i < json.feed.entry.length; i++) {
 var entry = json.feed.entry[i];
 relatedTitles[relatedTitlesNum] = entry.title.$t;
 for (var k = 0; k < entry.link.length; k++) {
  if (entry.link[k].rel == 'alternate') {
   relatedUrls[relatedTitlesNum] = entry.link[k].href;
   relatedTitlesNum++;
   break;
  }
 }
 }
}
function removeRelatedDuplicates() {
 var tmp = new Array(0);
 var tmp2 = new Array(0);
 for(var i = 0; i < relatedUrls.length; i++) {
  if(!contains(tmp, relatedUrls[i])) {
   tmp.length += 1;
   tmp[tmp.length - 1] = relatedUrls[i];
   tmp2.length += 1;
   tmp2[tmp2.length - 1] = relatedTitles[i];
  }
 }
 relatedTitles = tmp2;
 relatedUrls = tmp;
}
function contains(a, e) {
 for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
 return false;
}
function printRelatedLabels() {
 var r = Math.floor((relatedTitles.length - 1) * Math.random());
 var i = 0;
 document.write('<ul>');
 while (i < relatedTitles.length && i < 20) {
  document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
  if (r < relatedTitles.length - 1) {
   r++;
  } else {
   r = 0;
  }
  i++;
 }
 document.write('</ul>');
}
//]]>
</script>

Guardamos y marcamos la opción "Expandir plantillas de artilugios". Ahí buscamos el siguiente código que seguramente se encuentre en la sección post-footer-line-1, 2 o 3.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Ese código debemos cambiarlo por el siguiente o bien agregar las líneas adicionales.

<b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
  <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
  <b:if cond='data:blog.pageType == "item"'>
        <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
  </b:if>
  </b:loop>
</b:if>

Guardamos la plantilla y vamos a "Elementos de Página" para agregar el código que nos va a mostrar los Posts Relacionados. Agregamos un nuevo HTML/Javascript Widget y lo ubicamos donde querramos. El código que debe tener es el siguiente:

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Grabamos y ahora volvemos a la solapa "Edición HTML" para hacer la última modificación. Debemos buscar el HTML Widget que recien agregamos. Si le pusiste un título, buscalo por ese título, si no le pusiste un título tenes que buscarlo como HTML# donde # es el último número de HTML que encuentres. El formato sería como el siguiente y en este caso es el widget HTML13 pero puede variar. Debemos agregar las líneas que estan en negrita al código de nuestro Widget.

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Para controlar la cantidad de artículos que se listan hay dos parámetros con los que podemos jugar. El primero se encuentra en el primer cuadro de código y dice algo como i < 20. El segundo número está en el tercer cuadro de código y dice algo como max-results=10. Con estos números podemos controlar la cantidad de posts que van a aparecer. También debemos controlar esa cantidad porque puede afectar a la velocidad de carga del sitio.

Modificaciones Personales

En principio lo que hice fue controlar la cantidad máxima de posts a mostrar en 5 para ambos valores. Creo que con 5 artículos relacionados estamos bien y es una buena cantidad.
Luego le quise dar un aspecto un poco mas agradable utilizando CSS, el código es el siguiente:

#relatedposts {width:600px;text-align:left;padding:0px; margin-left:15px;}
.relatedpostbox{border:1px solid #3399ff;width:580px;background-color:#e9f8ff;}
.relposttitle {height:12px;padding:5px 10px 5px 10px;color:#000;font-style:normal;font-size:12px;text-ransform:uppercase;}
.relposttxt {padding:0px 0pt 5px 15px; font-size:14px;}
.relpostlink {font-size:10px;color:#666666;font-weight:normal;}
.relposttxt p {margin-right:10px;margin-bottom:10px;}
.relposttxt ul {list-style-type: none;list-style-image: none;padding-left: 0;}
.relposttxt li {list-style-type: none;list-style-image: none;padding-left: 0;}

Luego modifiqué el contenido del Widget HTML que está representado por el 4to cuadro de código para poder asociar esos tags CSS. A esto se le puede agregar publicidad Adsense por ejemplo con el mismo formato o algún banner que quieras. El código sería el siguiente:

<br />
<div id="relatedposts">
<div class='relatedpostbox'>
<div class='relposttitle'><strong>Temas Relacionados</strong></div>

<div class='relposttxt'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
## ACA PODES AGREGAR TU CODIGO ADSENSE ##
</div></div></div>

La última modificación que hice fue agregar la URL debajo del título del post para hacerlo mas parecido al look de Adsense. Esto lo hice modificando el código del 1er cuadro. Si te interesa hacer lo mismo debemos buscar la línea <li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li> y modificarla por lo siguiente:

<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a><br /><span class="relpostlink">' + relatedUrls[r] + '</span></li>

Para ver cómo queda implementado ingresá a cualquier artículo y navegá hasta el final pasando los comentarios.

Nosotros los usuarios de Blogger muchas veces entramos en Blogs o sitios que tienen unas hermosas nubes de etiquetas con diferentes tamaños según la cantidad de posts que tenga cada una, pero cuando queremos agregar la nuestra, Blogger nos proporciona únicamente el formato de etiquetas standard. Eso es un poco frustrante, pero gracias a un Blog muy bueno que encontró la forma ahora podemos agregar nuestras propias nubes de tags. En mi caso la vas a encontrar en la columna de la izquierda abajo de todo. La idea en si es traducir el post original al español para que otros usuarios puedan aprovechar este beneficio.

Antes de comenzar asegurate de tener al menos una etiqueta asignada a algún post para que puedas ver el resultado, de lo contrario no verás nada cuando termines de agregar esto. También asegurate de hacer un backup de todo antes de hacer algún cambio.

Fuente | phydeaux3 - Setup and Configuration for New Blogger Tag Cloud / Label Cloud

1. Ingresá a Blogger con tu cuenta con privilegios. Asegurate que dentro de Elementos de la página tengas agregado un widget de Etiquetas. De lo contrario agregalo y movelo a la ubicación donde quieras la nube a de etiquetas.

2. Ahora seguimos en la sección Edición de HTML. Acá vamos a agregar la primera parte del código que se refiere al formato y viene en código CSS (stylesheet). No marcamos "Expandir plantillas de artilugios" así la edición se vuelve mas sencilla. Dentro del código, usando el Buscar de nuestro explorador, buscamos: ]]></b:skin>
El código a continuación debe ser insertado justo ANTES de eso que buscamos.

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{} #labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

3. Ahora viene la sección de configuración de la nube de etiquetas. El siguiente código debe ser insertado justo DESPUES de lo que buscamos antes (]]></b:skin>), pero ANTES de la línea que figura como </head>.

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Esos son los parámetros que después nos va a servir para configurar nuestra nube en cuanto a tamaño de la letra, color, etc. Pero mas abajo se detalla mejor.

4. Como ante último paso hay que reemplazar el widget en si de etiquetas. Para esto vamos a buscar la siguiente línea, nuevamente con el buscar de nuestro navegador: <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Una vez que la encontramos debemos reemplazar la línea completa con el siguiente código:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
     <h2><data:title/></h2>
  </b:if>

  <div class='widget-content'>
  <div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){ 
    if(a&gt;b){ 
    var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
        } 
 else{ 
    var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
        } 
 return v
  }


var c=[];
var labelCount = new Array();
var ts = new Object; 
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){ 
    if (!labelCount[ts[t]]){
     labelCount[ts[t]] = new Array(ts[t])
  }
   }
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
    if(ts[t] &lt; cloudMin){
     continue;
   } 
 for (var i=0;3 &gt; i;i++) {
     c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
   } 
      var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
   li = document.createElement('li');
   li.style.fontSize = fs+'px';
   li.style.lineHeight = '1';
   a = document.createElement('a');
   a.title = ts[t]+' Posts in '+t;
   a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
   a.href = '/search/label/'+encodeURIComponent(t);
   if (lcShowCount){
       span = document.createElement('span');
    span.innerHTML = '('+ts[t]+') ';
    span.className = 'label-count';
    a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    li.appendChild(span);
    } 
   else {
       a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    }
   ul.appendChild(li);
   abnk = document.createTextNode(' ');
   ul.appendChild(abnk);
 }
  lc2.appendChild(ul); 
</script>

<noscript> 
    <ul>
 <b:loop values='data:labels' var='label'> 
   <li>
     <b:if cond='data:blog.url == data:label.url'> 
    <data:label.name/> 
  <b:else/>
    <a expr:href='data:label.url'><data:label.name/></a>
  </b:if> 
  (<data:label.count/>)
   </li>
 </b:loop>
 </ul>
</noscript> 
<b:include name='quickedit'/> 
  </div>

</b:includable>
</b:widget>

En este punto ya deberíamos tener la nube agregada y funcionando en nuestro Blog. Si hacemos click en Vista Previa deberíamos ver los cambios que realizamos. Si no vemos los cambios revisar los puntos detenidamente, especialmente dónde posicionar los dos primeros bloques de código.

5. Como último paso queda la configuración. En este paso se van a explicar las variables y el significado de ellas para que puedas adaptar la nube a tu gusto. Si en la vista previa ya aparece con los colores de tu Blog, perfecto, pero en caso de que no acá es donde podemos configurarlo.

var cloudMin= 1;

Con esa variable le decimos cuál va a ser el número de etiquetas a mostrar. Con el parámetro en 1 muestra TODAS las etiquetas. Si cambiamos el número por uno mayor, sólo las etiquetas que aparezcan esa cantidad de veces van a aparecer en nuestra nube.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];

Estas variables cambian justamente lo que dice el nombre, el tamaño máximo de la fuente de la etiqueta con mayor cantidad de entradas y el tamaño mínimo de la fuente con menor cantidad de entradas. Así también están los colores de esas fuentes, pero el formato de las mismas debe ser en RGB. Los colores por defecto son azul para el máximo y negro para el mínimo. Si no sabes cuál es el código RGB del color que vos queres podes buscar en Internet, por ejemplo esta tabla: RGB Color Chart
Sino podes abrir un editor de imágenes y poner el código del color que vos tenes en formato #003366 por ejemplo y te dará el código RGB en formato 120,45,120.

var lcShowCount = false;

Por último, en esta variable vamos a definir si queremos que muestre la cantidad de posts al lado de la etiqueta o no. Esto se muestra con un número y puede ser true o false.

Acá ya tendrías terminada de instalar y configurar la Nube de Etiquetas para tu Blog. Pero quedan algunas cosas para configurar como el formato CSS que es el primer bloque de código. Mucha gente no suele configurar esto, pero si sos de los que le gustan tocar todo, acá te comento sobre las variables.

#labelCloud {text-align:center;font-family:arial,sans-serif;}

text-align:justify;
text-align:right;
text-align:left;

Ahí modificamos la fuente que queremos que use nuestra nube y mas abajo si queremos que esté alineada a la izquierda, derecha o justificada cambiamos el texto de la línea superior con nuestra opción. Por defecto vemos que viene centrada.

#labelCloud .label-count

Por último si configuramos para que muestre los contadores de posts al lado de nuestras etiquetas, en esta línea vamos a poder configurar los colores y formato de esos números.

Para saber qué son los Feeds, cómo leerlos y cómo publicarlos podemos leer una ayuda por parte de Feedburner que está muy completa. www.feedburner.com
Blogger soporta tanto Atom 1.0, como RSS 2.0 para sus Feeds, hoy en día casi todos los lectores de noticias soportan ambos formatos, en general puede haber algunos lectores online que prefieran alguno de los dos unicamente.

Cuáles son los links que ofrece Blogger para leer con un lector de noticias?

Feeds del Blog sobre los Posts (se puede usar cualquiera de estas):

http://*.blogspot.com/atom.xml 
http://*.blogspot.com/rss.xml 
http://*.blogspot.com/feeds/posts/TIPO 
http://beta.blogger.com/feeds/ID-DEL-BLOG/posts/TIPO

Feeds de los Comentarios (se puede usar cualquiera de estas):

http://*.blogspot.com/feeds/comments/TIPO 
http://beta.blogger.com/feeds/ID-DEL-BLOG/comments/TIPO

Feeds de los Comentarios por Post (se puede usar cualquiera de estas):

http://*.blogspot.com/feeds/ID-DEL-POST/comments/TIPO 
http://beta.blogger.com/feeds/ID-DEL-BLOG/ID-DEL-POST/comments/TIPO

Feeds de las Categorías (se puede usar cualquiera de estas):

http://beta.blogger.com/feeds/ID-DEL-BLOG/posts/TIPO/-/CATEGORIA 
http://*.blogspot.com/feeds/posts/TIPO/-/CATEGORIA 
http://*.blogspot.com/feeds/posts/TIPO/-/CATEGORIA1/CATEGORIA2

Ahora bien, en los links de los Feeds que pasé mas arriba hay algunas palabras que debes cambiar por lo que corresponda en tu caso. Por ejemplo:

ID-DEL-BLOG: Es donde tenes que poner el ID de TU Blog para que funcione el Link. Para averiguar ese número hacé click acá.
ID-DEL-POST: Es donde tenes que poner el ID del Post del que queres obtener el Feed. Para saber el ID, podemos hacer click en "Publicar un comentario" y vamos a ver en la URL que nos lleva lo siguiente: 'postID=' Lo que figura seguido de esto es el ID que buscas.
TIPO: Puede ser summary, full o default.
CATEGORÍA: El nombre de la categoría que quieras obtener.
*.blogspot.com: Hay que cambiarlo por la dirección de tu Blog
CATEGORIA1/CATEGORIA2: Si es que queres obtener resultados de mas de una categoría

Otro punto importante para la administración de los feeds es la cantidad máxima de artículos que queremos recibir y desde qué artículo empezar. Para esto basta con agregar al final de los links lo siguiente:

?max-results=número (default=25 pero podemos ponerle 50, 80 o 100 si queremos)
?start-index=número (default=1 pero podemos decirle que empiece desde el 10)

Cómo hacer para modificar las opciones de feed en Blogger?