En principio deben descargar los productos de Office 2010, Project 2010 y Visio 2010. En cada uno de ellos les va a pedir una cuenta Passport y registrarse para poder descargarlo. Al hacerlo, ejecutan el archivo y les aparecerán unas ventanas como las siguientes. En este caso ejecuté primero el del Office 2010, pero los otros productos tienen la misma interfaz.

Mi equipo cuenta con Windows 7 instalado y ya tenía Office 2007 Professional Plus, así que simplemente quería hacer un upgrade. Esto es importante si queremos hacer upgrade en algun ambiente mas grande de usuarios y ver cómo queda luego el Office.

Aceptamos la licencia y luego podemos hacer click en Upgrade o bien Customize para especificar los productos uno por uno. Esto es decisión de cada uno, yo quería ver cómo quedaba la actualización encima del 2007 así que hice click en Upgrade.

Como ven la actualización es muy simple y sencilla, si eligen customizar el contenido tiene algunos pasos extra, sino es bien simple y finaliza con éxito. Qué puedo decir de los productos en primera instancia?

Bien comencemos uno por uno o bien algunos comentarios nada mas para no hacerlo muy extenso, pero voy a comentar lo bueno y lo malo de cada uno.
 

Microsoft Outlook 2010

Positivo: Creo que el mejor de los puntos que trae esta versión es la posibilidad de configurar mas de una cuenta de Exchange en un mismo cliente. Este era uno de los features mas pedidos por los usuarios avanzados de Outlook y ahora podemos configurar cuantas cuentas querramos de Exchange en el mismo cliente. Algunas mejoras en cuanto al Calendar que hacen mas facil llevarlo. Inicia y cierra mas rápido incluso con el mismo PST que lo optimiza al abrir por primera vez. Si te paras sobre un correo, abajo a la derecha te pone los contactos que estan en la historia del correo y si le haces click te trae los correos intercambiados con esa persona lo que agiliza mucho la búsqueda de ítems.

Negativo: Para mi es un punto negativo, hay mucha gente a la que le gusta pero yo ODIO ver los correos como conversaciones como los muestra Gmail y luego del Upgrade me dejó esa vista por defecto. No entendía nada de mis correos. La carpeta Inbox la movieron arriba de todo en la lista de carpetas del PST. Esto lo hace por defecto luego de un upgrade lo que también contribuyó a que no encuentre los correos jaja. La interfaz gráfica tiene unos colores raros ahora y no me gusta mucho.

Microsoft Word 2010

Positivo: Muchas mejoras en general en cuanto a gráficos, efectos visuales, colaboración con otra gente a la hora de crear documentos, subirlos a Office Online y sobre impresión.

Negativo: Esperaba algo nuevo y revolucionario para el procesador de texto… :(

Microsoft PowerPoint 2010

Positivo: Muchas mejoras en general en cuanto a gráficos, efectos visuales, colaboración con otra gente a la hora de crear documentos, subirlos a Office Online y sobre impresión. Esto es igual al Word, ahora algo extra es la posibilidad de editar videos para insertarlos a la presentación de una forma fácil y ágil. Algunas tareas se hacen mucho mas rápido que antes con el nuevo menú. Abrir cada presentación en su propia ventana es mas fácil para trabajar.

Negativo: Nada, bastante buen upgrade de versión

Microsoft Excel 2010

Positivo: Rápido, muy rápido :) No hay que esperar mucho tiempo para abrir grandes archivos y mas si es la versión 64-bit, vuela!. Hay un nuevo tipo de gráfico muy pequeño que entra en una celda pero te da una muy buena idea si el valor va subiendo o bajando, por ejemplo para seguimiento de acciones. Muchas mejoras en las Pivote Tables que para quien las use seguido va a estar muy contento. Las mejoras de siempre a nivel gráfico, efectos, colaboración, etc.

Negativo: Nada, muy buen upgrade de versión, vale la pena.

Microsoft Visio 2010

Positivo: Trae unos templates excelentes, incluso para diagramar planos de casas, etc. Mucho mejor la interfaz de creación de documentos. Muchas mas funciones de diagramación automática (Quick Shapes). Se pueden crear Workflows para Sharepoint lo que es muy importante en empresas que se manejen con procesos de este tipo. Mejoras gráficas, de colaboración, etc.

Negativo: Nada,  buen upgrade de versión.

Microsoft Project 2010

Positivo: Hasta ahora el Project era el unico producto que no tenía la nueva interfaz de Office 2007 y en este caso sufrió dicha actualización. Por eso mas facil realizar algunas tareas con los proyectos que antes era mucho mas complicado. La interfaz donde uno completa las tareas es mucho mas simple y fácil de usar también. Mas flexibilidad a la hora de administrar el proyecto y una vista de la línea de tiempo que te da una idea mas completa de todas las tareas, el tiempo involucrado y el porcentaje realizado del mismo. También tiene la parte de colaboración como los otros productos y un calendario mucho mas práctico y simple para administrar a los recursos que trabajarán en el proyecto.

Negativo: Nada, un upgrade que TENES que hacer.

Estos son algunos de los productos del Office 2010, no voy a comentar TODOS pero te da una idea de los mas usados y si tenes que hacer o no el upgrade o mejor dicho, si vale la pena. En general el upgrade resultó positivo y tiene muchos beneficios, con el unico que estoy algo decepcionado es con el Outlook, porque me cambió mucho la forma de trabajar en el día a día y eso es un problemas cuando uno hace una actualización, pero en general todo funciona mejor y esta es una Beta.

Trae un sistema para que uno pueda decirle a Microsoft las cosas positivas y negativas del upgrade con una explicación del tema y un screenshot del producto así pueden hacer las modificaciones pertinentes antes de que salga a producción. Abajo dejo los links para que descargues los productos y empieces a probarlos.

Link | Download Microsoft Office 2010 Beta
Link | Download Microsoft Visio 2010 Beta
Link | Download Microsoft Project 2010 Beta

Algunos puede que no conozcan la interfaz o la aplicación web osTicket pero quiero decirles que es muy poderosa en lo que hace. osTicket es un sistema de soporte y administración de tickets via web muy completo, con muchas funciones y lo mejor de todo, totalmente gratis. Funciona bajo php, javascript y mysql, algo parecido a lo que es WordPress pero en este caso en vez de un blog tenemos una plataforma de soporte de tickets con creación, ver el estado, etc. Muy buena plataforma para brindar soporte a nuestros usuarios.

En este caso quiero comentar sobre una customización a los colores que hice en la interfaz de administración. Así como se puede customizar el WordPress y nuestro blog aquí podemos customizar o personalizar el theme de osTicket. Tanto la parte cliente es que la que ven los usuarios como la parte de administración que ven los técnicos.

No solo podemos customizar la parte gráfica también podemos hacer modificaciones al código del producto para agregar funciones, modificar otras, etc. En el foro de la página principal estan todas las modificaciones que envían los usuarios, algunas que yo hice después las voy a ir mostrando, en esta ocasión sólo les comento la modificación que hice a los colores de la parte administrativa cuando vemos un ticket para que podamos identificar mas fácilmente cuál es la nota que envía el usuario, cuál es la nota interna entre el personal de soporte y cuál es la nota en respuesta al cliente. Esto lo dividí en colores fácilmente reconocibles, además modifiqué los colores de los formularios de respuesta para que sean iguales a los anteriores y por último hay un par de modificaciones a un archivo php que también comento el por qué lo hice. 

Además adjunto el archivo css para que lo puedan bajar directamente con las modificaciones realizadas así no tienen que estar tocando ustedes los archivos salvo el php. Ahora bien ustedes pueden tocar a gusto lo que yo hice para modificar los colores, no hace falta que lo dejen así pero es bastante fácil de ver un ticket con esa gama.

Como se ve en la imagen, el color amarillo y sus variantes fueron utilizados para las notas internas, el color azul representa lo que el cliente dice y el verde y sus variantes fue utilizado para las respuestas del personal. Luego las transferencias y asignaciones que se muestran en una sola línea tiene una variante de rosa que eso se dejó por defecto con dicho color, sólo se le asignó al formulario en cuestión. Acá les detallo el código CSS agregado y modificado del archivo original.

Archivo: /scp/css/style.css

Buscar:

/* Ticket view (Notes, Messages and Responses) */

Hacia abajo reemplazar todo lo que existe con el siguiente código:

#ticketthread table.message {

    margin:10px 0 5px 0;

}

#ticketthread table.response {

    margin-bottom:10px;

    margin-top:10px;

}

#ticketthread table.note {

    margin:10px 0 5px 0;

}

#ticketnotes table.note {

    margin-bottom:10px;

}

table.message {

    border: 2px solid;

    border-color:#8cbef3;

}

table.response {

    border: 2px solid;

    border-color:#adcf6e;

}

table.note {

    border: 2px solid;

    border-color:#e0c85e;

}

table.message td, table.message th,table.response td, table.response th,table.note td, table.note th {

    padding:5px;

}

table.message td, table.response td, table.note td{

  background-color: #FAFAFA;

}

table.message th, table.response th, table.note th {

    line-height:30px;

    font-size:12px;

    font-weight:bold;

    text-align: left;

    padding:1px;

    padding-left:5px;

}

table.message th {

    background-color: #99cdff;

}

table.response th {

    background-color: #c2de87;

}

table.note th {

    background-color: #fee179;

    color: #3E3E3E;

}

table.message tr.header td {

    background-color: #cfe1fb;

    border-color:#85b2e9;

    padding:1px;

    padding-left:5px;

}

table.response tr.header td {

    background-color: #e2f3be;

    border-color:#b4d675;

    padding:1px;

    padding-left:5px;

}

table.note tr.header td{

    background-color: #fcfd97;

    border-color:#ddcc4a;

    padding:1px;

    padding-left:5px;

}

#reply.tabbertab {

    background-color: #e1f7b2;

    border-bottom: 2px solid;

    border-color:#b4d675;

}

#notes.tabbertab {

    background-color: #faf5b3;

    border-bottom: 2px solid;

    border-color:#ddcc4a;

}

#transfer.tabbertab {

    background-color: #fdedc1;

    border-bottom: 2px solid;

    border-color: #fad163;

}

#assign.tabbertab {

    background-color: #fdedc1;

    border-bottom: 2px solid;

    border-color: #fad163;

}

Por ultimo hay que hacer unas breves modificaciones en un archivo php para la vista del ticket. Aquí les paso lo que habría que modificar.

Archivo: /include/staff/viewticket.inc.php

Buscar:

//Internal Notes

Bajo esta línea empiezan las notas, respuestas y mensajes con los colores que pasé mas arriba. Acá vamos a encontrar el box grande de Internal Notes y Ticket thread con la siguiente línea iniciando el box.

<div align="left">

Y eso lo podemos reemplazar con lo que nosotros queremos, en mi caso quedó de la siguiente manera:

Internal Notes

<div style='text-align:left; background-color:#faf5b3;border-top: 2px solid;border-bottom: 2px solid;border-color:#ddcc4a;'>

Ticket thread

<div style='text-align:left; background-color:#d8e5f8;border-top: 2px solid;border-bottom: 2px solid;border-color:#85b2e9;'>

Después podes agregar un par de renglones donde lo creas necesario o modificar el código HTML/PHP según lo necesites. Después de hacer estas modificaciones vas a ver instintivamente dónde está ubicado cada grupo de código para modificar los cuadros donde aparecen los mensajes en los tickets. También podrías modificar unas cuantas cosas mas, pero en esta ocasión sólo estábamos customizando los colores de dicha página.

Con estas modificaciones vas a tener una interfaz de administración o de staff para ver los tickets mucho mas cómoda e intuitiva, así que te recomiendo que lo tomes, lo adaptes a los colores que mas te gusten y ya lo pases a producción. Te dejo el css modificado en un archivo zip por si no queres entrar a hacer modificaciones.

Link | osTicket Home Page
Link | osTicket Forums

Esta es una tarea común para algunos pero bastante complicada para otros. Todo sistema web que querramos instalar en nuestro hosting ya sea un foro, un blog u otra aplicación seguramente requiere la creación de una base de datos y un usuario para la misma. Luego estos datos se configurarán en la aplicación para que se pueda instalar.

Antes que nada quiero aclarar que la interfaz para la creación de la base de datos varía según el proveedor de hosting que tengas. De mas está decir que para esto se requiere un hosting, pero voy a suponer que ya lo tienes contratado y tienes la posibilidad de crear bases de datos en el mismo.

La idea de hacer este artículo surgió por una consulta que me hizo Paco desde el formulario de contacto. Espero que le sea útil como a otras personas en la misma situación.

Esta tarea se puede hacer tanto desde una interfaz gráfica como desde una línea de comandos y en ambos casos desde la web administrativa de nuestro hosting. En muchos hostings puede que no exista una interfaz de administración y esta tarea haya que solicitarla al soporte, pero en los casos que si tenemos interfaz se puede hacer. En este caso muestro como hacerlo en un hosting con GridPanel.

Modo Gráfico:

Ir hasta la sección de nuestro hosting donde podemos administrar las bases de datos. En este caso MySQL y está identificada como se muestra en la imágen de la derecha.

Generalmente debe haber en nuestra consola de administración del hosting una sección para la base de datos MySQL, MSSQL, etc. Debemos ir ahí para poder trabajar.

Luego debemos ir hasta “Agregar una nueva Base de Datos”. Debe haber un botón para poder agregar una nueva o crear una base de datos.
 
Si elegimos crear una nueva base debemos definir un nombre para la misma. Este nombre debemos recordarlo ya que luego deberemos introducirlo en nuestra configuración del Blog o Foro. En mi caso usé DemoDB.

En la ventana que dice Cargando lista de usuarios… nos traerá los usuarios que tengamos creados para utilizar en bases de datos. Si no tenemos ningún usuario creado deberemos ir hasta la sección “Usuarios MySQL” y crear uno nuevo. En micaso UserDB y debemos asignarle una contraseña. Estos datos también debemos recordarlos para poder configurarlo en nuestro Blog o Foro.

Por último nos mostrará una línea con nuestra Base de Datos recien creada con el usuario asignado y las IPs para acceder a la misma tanto públicamente como localmente. Tomar nota de esta información también ya que luego la necesitaremos. Listo entonces, ya tenemos la base creada y lista para usar. Veremos de qué otra forma se puede crear.

Modo Texto:

En este modo deberemos buscar una sección en nuestro hosting para Administrar nuestro MySQL con alguna utilidad o herramienta del tipo phpMyAdmin. Esta puede estar alojada en nuestro hosting como poder tener una herramienta local en nuestro equipo.

Dentro de dicha herramienta debemos ir hasta la parte de SQL Query y ahí ejecutar lo siguiente:

create database DemoDB;

Con ese comando ejecutado en la sección de Query vamos a crear la base de datos para nuestro Blog o Foro de la misma forma que se podía hacer en la parte gráfica. Ahora bien para poder llegar a esta instancia tendríamos que haber usado un usuario con privilegios dentro de nuestro MySQL. Podemos usar ese usuario y contraseña para nuestro Blog o Foro o bien generar uno nuevo. Para crear uno con línea de comandos podemos usar:

grant all privileges on DemoDB.* to ‘DemoUser’@’%’ identified by ‘password’;

Igualmente recomiendo que se utilice la interfaz gráfica que puede resultar mas sencillo.

Por último tanto la información del usuario, contraseña y base de datos se necesitan para configurar en nuestro Foro, ya sea phpBB3 u otra plataforma como así también en nuestro Blog, ya sea WordPress o cualquier otro sistema. También en cualquier otra aplicación que requiera una base de datos.

Algunos documentos o tutoriales te cuentan cómo instalar el producto phpBB para armar tu primer y propio foro de discución, pero no encontré en ningún lado algo que me diga TODO lo que hay que hacer para dejarlo funcionando y en producción con los mods, plugins o extensiones mínimas para que funcione correctamente. Por ejemplo, uno no puede instalar un foro y no utilizar herramientas de SEO, por defecto no viene y los links no son amigables, por ende hay que instalar algo para ocuparse del SEO en tu foro. La idea de este artículo surgió porque hace muy poco instalé phpBB para mi propio foro de discución de WSUS, podes ingresar haciendo click o desde el menú. Luego de instalarlo tuve que ocupar mucho de mi tiempo investigando qué era necesario instalar luego de terminar con el asistente de phpBB. Como dije antes, por defecto hay muchas cosas “necesarias y básicas” que no vienen y hay que agregarlas aparte. Acá te voy a contar todo lo que yo agregué y configuré para poder dejar el foro bien completo y productivo.

Instalación: Para poder instalar nuestro propio foro, necesitamos un hosting propio. Esto se contrata y cada uno puede optar por diferentes compañías para el mismo. Lo que si debes tener en cuenta es que soporte PHP y MySQL en lo posible que es lo mas standard y estable. Ahora bien, cuando ya tenemos nuestro propio hosting, seguramente tendremos acceso por FTP. Deberemos subir el paquete de instalación de phpBB3 para poder empezar a tener nuestro foro. De donde sacamos este paquete? Bueno podemos ir a la página de Descargas de phpBB.com. Ahí seleccionamos el paquete en .zip o tar.bz2, el que mas nos guste ya que deberemos descomprimirlo en nuestro equipo. Esa sería la siguiente tarea, lo descomprimimos y así con la estructura de carpetas que genera debemos subirlo a nuestro hosting al raíz de donde querramos que esté nuestro foro. Ya sea en el raíz del sitio web o bien en una carpeta de la misma como en mi caso /foro/. Esto lo hacemos nuevamente con el cliente FTP que mas nos guste. Aquí podemos optar por subir el pack de idioma antes de instalar el phpBB en nuestro servidor. Si quieres seguir los pasos de instalación en español, pasa al siguiente ítem y luego vuelve a seguir con los pasos de instalación. 

Antes de instalar siempre es bueno recordar los requisitos mínimos. Los mismos los puedes ver en este link. Debemos tener la base de datos creada antes de empezar con el asistente de instalación. Podemos solicitarla a nuestro hosting que la cree o bien si sabemos como hacerlo podemos crearla nosotros mismos. Debemos recordar el nombre de la base, como el usuario y contraseña que tienen acceso a la misma ya que deberemos introducirlo en el asistente de la instalación del foro.

Una vez que tenemos la base creada, subimos la carpeta de phpBB3 que descomprimimos, tanto en el raíz o bien en alguna carpeta como mencioné antes. Luego de todo eso apuntamos nuestro navegador de internet a http://tu-sitio/install o http://tu-sitio/foro/install, etc. simplemente luego de la ruta donde lo instalaste agregale el /install y abrirá el asistente de instalación. En caso de que hayas copiado el idioma español como yo verás en el menú de arriba a la derecha la opción para cambiarlo a Español. Hacé click en la imágen para verlo mas en detalle.

El asistente de instalación es bastatne simple, sólo debemos seguir los pasos que nos va preguntando. En principio vamos a la solapa INSTALAR y seguimos una a una las preguntas que nos hace. Recuerda si no conoces los datos de la base de datos porque la creó el Hosting, puedes preguntarle a ellos. Las opciones que vienen por defecto sirven para instalar perfectamente el producto.

Una vez finalizado nos llevará al panel de administración de nuestro foro. Veremos un recuadro rojo que nos recuerda que debemos borrar el directorio install de nuestro sitio. Para esto debemos usar el cliente de FTP que querramos o desde el mismo hosting tal vez se pueda hacer. Simplemente borra la carpeta /install.

Listo, el phpBB3 ya está instalado y operativo, ahora falta configurar algunos parámetros básicos, modificar algunos ítems, agregar otros y quedará terminado.

Idioma/Traducción: Este ítem lo podemos hacer antes o después de la instalación. Si lo hacemos antes de la instalación podremos ver la instalación en nuestro idioma lo que para algunos tal vez les sea de mucha utilidad. Hay un muy buen pack de Español Argentina, aunque también hay Español neutral. Los idiomas los vas a encontrar en la página de phpBB.com. Ahí bajas un comprimido que tenes que descomprimir en la carpeta languages/ de tu instalación de phpBB3. También vas a ver los paquetes de las traducciones de los themes que vienen por defecto, subsilver2 y prosilver. Si te interesa usar uno de esos en español, te recomiendo que también te bajes ese paquete de idioma y lo instales en la ruta del template de tu foro. Luego en General » Parámetros del Sitio podemos seleccionar el idioma por defecto.

Opciones Básicas: Luego de configurar el idioma y de haber instalado el producto nos queda configurar algunos parámetros básicos.

General » Parámetros de Adjuntos: Este ítem es importante porque puede afectar directamente al espacio que tenes contratado con tu hosting. Modifica los valores de archivos y espacio total según el espacio que tu hayas contratado.
General » Parámetros del Sitio: Aquí vas a definir el nombre del sitio, la descripción, el idioma por defecto, formato de fecha y el estilo por omisión. También tenemos el ítem de si queremos que sustituya la configuración de los usuarios.
General » Características del Sitio: Configuraciones varias sobre si permitimos o no ciertas acciones dentro de nuestro foro.
General » Parámetros de Post: Algunos parámetros varios sobre los posts de nuestro foro.
General » Parámetros de Firma: Este punto es importante a la hora de la firma de los usuarios porque puede variar en el espacio que ocupe nuestra instalación como así también el tiempo que demore en cargar el sitio.
General » Parámetros de Registración de Usuarios: Aquí podemos definir si queremos o no una activación de las cuentas cuando se registren y las propiedades de las contraseñas.

Google Analytics: Cómo llevar un seguimiento y estadísticas de nuestro Foro? Simple, lo agregamos a Google Analytics. Para esto debemos primero registrarnos en Analytics y agregar nuestro Foro como nuevo perfil. Nos va a dar un código que debemos agregar a nuestro sitio. Una vez que tenemos ese código vamos al sitio de Administración de nuestro foro » Estilos » Plantillas y ahí hacemos click en Editar. De la lista de archivos que se despliegan buscamos overall_footer.html. Vamos abajo de todo y justo antes del </body> pegamos el código que copiamos de Analytics. Con eso listo ya tenemos las estadísticas cargadas. Podemos comprobarlo desde la página de Google Analytics en el botón comprobar estado.

SEO: Para quienes no saben SEO es lo que nos va a ayudar para que nuestro Foro esté visible desde los buscadores. Si bien el Sitemap es muy importante, el SEO es muy importante también, por eso se debe instalar el MOD para poder configurar SEO en nuestro foro. Este mod es un poco mas complicado de configurar e instalar pero recomiendo que se tomen su tiempo ya que puede ser de mucha utilidad. La ultima versión del mod se puede bajar de este link. Simplemente debes seguir las instrucciones que vienen en el archivo. Es algo complicado de implementar pero te puede ahorrar mucho trabajo para que el contenido de tu foro esté en los mejores buscadores.

Sitemap: El Sitemap es muy importante para los buscadores como Google ya que ayuda muchísimo a mejorar la indexación del mismo. Esto en un foro es super importante. Hay mas info sobre este tema en: Mejorar la indexación en Google de nuestro Sitio/Blog. Ahora, para agregarlo a nuestro foro sólo debemos instalar el siguiente MOD: Google Sitemap Generator. Se deben seguir las instrucciones que vienen en el archivo para instalarlo, es muy simple y sencillo, no hay que modificar archivos de instalación, por lo que es un MOD extra simple. Eso si, antes deben registrarse en Google Webmaster Tools. Recomiendo antes de habilitar este MOD, instalar el de SEO ya que seguramente modificará los links a los foros y esto repercute en el Sitemap directamente.

Videos: Por defecto phpBB no toma los videos como embebidos en el post o en el foro. Para esto debemos agregar un nuevo bbcode y subir un archivo adicional a la instalación básica. El archivo que necesitamos lo podemos bajar de este link. Lo descomprimimos y subimos el archivo video.php a raíz de la instalación de nuestro foro. Luego debemos seguir los pasos que figuran en el archivo Readme. Básicamente debemos ir al Panel de Control de Administración » Posts » BBCodes » Agregar un nuevo BBCode. Ahí completamos en el primer recuadro [video]{TEXT}[/video], en el segundo <script type="text/javascript" src="video.php?link={TEXT}"></script> y en el tercero Nota: [video]link[/video]. Marcar el ítem “Mostrar en posts” y Enviar. Listo ahora podemos agregar videos de Youtube o de donde querramos a nuestros posts del foro. Post de Ejemplo »

Theme/Estilo: El theme o template de foro de phpBB3 es importante porque si no tiene un buen diseño a veces la gente puede irse de tu foro. Si los colores no son agradables para su lectura también puede irse y perdés no solo visitas sino gente que participe de tu foro. El template debe estar asociado al tema que apunta el foro. Esto es muy importante. Un excelente sitio para buscar Styles o Templates de phpBB3 phpBB3styles.net. Ahí vas a ver una cantidad de styles o estilos para bajar que alguno seguro te gusta. Lo importante si tenes un foro en español es que los botones vengan en formato .psd (photoshop) para que los puedas modificar y así adaptar a tu idioma. De lo contrario tal vez los botones no te queden muy bien.
Para instalarlo tenes que decomprimir el archivo que bajes de internet en la carpeta /styles/. Una vez que esté subido a ese directorio lo verás en la consola de administración en la solapa de Estilos. Ahí tendrás la opción de Instalarlo o Borrarlo. Luego de instalarlo debes activarlo y podrás seleccionarlo desde el perfil de tu usuario o bien configurarlo por defecto desde General » Parámetros del Sitio.

Avatares: Qué son? Bueno son las imágenes que los usuarios pueden usar para identificarse en tu foro. Podés configurarlo para que los usuarios puedan subir sus propias imágenes pero también te recomiendo cargar algunos packs de avatares en el foro para que tengan otra opción en caso de quererlo. Podemos bajar algunos packs de http://www.phpbb-design.com/avatars/. La instalación de los packs de avatares es muy simple, sólo debemos descomprimir la carpeta con las imágenes en el directorio de nuestra instalación del foro /images/avatars/gallery/. Dentro de gallery debe estar el directorio y dento las imágenes de los avatares. De esta manera nos aparecerá luego para elegir las diferentes galerías. Si quieres buscar mas packs de imágenes intenta con Google. :) Los parámetros de configuración de los avatares son los que se muestran en la imágen.

Smilies/Caritas: Las caritas o smilies que puedes usar en tu foro pueden ser modificadas por otras que bajes de internet. Puedes encontrar otras caritas por ejemplo en el siguiente link. Basta con reemplazar las existentes en el directorio /images/smilies/ de tu instalación del foro, sino tenes que crear nuevas desde el panel de control de administración.

Publicidad: Este es un punto clave para la mayoría que hoy publica un sitio web. El hosting puede tener un costo mensual y con simple publicidad podemos recuperar ese costo ganando algo de dinero extra. Cómo podemos ingresar publicidad en nuestro Foro? Algunos sistemas como Google Adsense no permiten ingresar publicidad en páginas sin contenido como por ejemplo el index de un foro donde sólo hay nombres de categorías. Si quieres ingresar publicidad de este tipo, debemos editar el archivo viewforum_body.html del template que estés usando. Esto se puede hacer desde Estilos » Plantilla » Editar (en tu template). Ahí elegís el archivo que mencioné antes y voy a mencionar mas abajo y agregas el código justo debajo de <!-- INCLUDE overall_header.html --> para el header o sobre <!-- INCLUDE overall_footer.html --> para incluírlo en el footer. En cambio si lo queremos agregar de forma automática luego del primer post de cada topic debemos editar el archivo viewtopic_body.html y ahí buscar <!—END postrow -->. Podemos agregar un código como el siguiente justo antes de esa línea que buscamos.

        <!-- IF postrow.S_FIRST_ROW -->
       <div class="post bg2">
          <div class="inner"><span class="corners-top"><span></span></span>
          <div class="postbody">
             <div class="content" style="text-align: center;">

                -- Inserta el código de publicidad aquí. --

             </div>
          </div>

          <span class="corners-bottom"><span></span></span></div>
       </div>
       <hr class="divider" />
       <!-- ENDIF -->

Obviamente debemos reemplazar donde dice “Inserta el código de publicidad aquí” con tu código de Adsense por ejemplo. Para ver un ejemplo de cómo queda esta opción puedes ver algún topic de mi foro.

Armando los Foros: Los Foros es donde vas a poner el contenido y donde los usuarios van a poder colaborar. Para crearlos y crear las categorías de los foros por ejemplo tenes que ir a la solapa Foros del panel de Administración. Acá vas a poder Crear nuevos Foros, Categorías, etc. Lo ideal es que abarques todos los temas posibles que se puedan conversar en tu foro para que los usuarios puedan encontrar su lugar. En cada Foro vas a poder configurar opciones diferentes, por defecto puedes dejar todo igual y trata de copiar los permisos de algún otro foro que ya esté creado y que sepas que funciona bien para que todos puedan acceder.

Con todas estas indicaciones vas a tener un Foro muy completo y listo para operar. El resto de las modificaciones que existen le van a ir agregando funciones y otras opciones, pero las mínimas y requeridas para que el sitio tenga éxito y funcione perfectamente en internet son las que te pongo en este artículo. Espero que te haya servido la guía y cualquier duda me avises mediante un comentario en este artículo.

Link Util | phpBB-Es – Un foro con excelentes recursos sobre phpBB en Español

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.

A veces tenemos un theme para nuestro Blog instalado en WordPress que satisface todas nuestras necesidades. Pero qué pasa si el theme tiene 2 sidebars, por ejemplo, como el mio y queremos escribir una página pero con una sola sidebar? O bien queremos escribir una página con otra sidebar diferente a las 2 por default que vienen con el theme? O mejor aún, qué pasa si queremos generar una página sin sidebars para poder aprovechar todo el ancho del theme? Algunos themes ya vienen con esta opción para poder hacerlo, pero otros no. La idea de este artículo es contarte cómo tenes que hacer para generar un nuevo template para poder utilizarlo en las páginas. En este caso vamos con el mas sencillo, SIN sidebars.

Cuando generamos una nueva página en WordPress vamos al menú Write » Page (Escribir » Página). Si hacemos scroll hacia abajo vamos a encontrar una sección donde podemos cambiar el template que vamos a usar para dicha página. Si tu theme no viene con templates adicionales vas a tener como opciones el Default Template y el de Archives. Ahora bien, cómo agrego un template adicional?

Para esto vamos a necesitar generar un nuevo archivo .php y ponerlo en el mismo path o en la misma ruta donde se encuentran el resto de los archivos del theme que tengo instalado. En este caso vamos a generar un archivo en blanco llamado nosidebar-page.php. Lo subimos a nuestro hosting por medio del cliente de FTP que mas prefieras y luego lo podremos editar directamente desde WordPress.
Una vez subido vamos a Design » Theme Editor. A la derecha debería estar listado nuestro archivo recien copiado "nosidebar-page.php". En caso de no estar revisá el haberlo copiado correctamente a la ruta de tu theme, en caso de si estar hacele un click para poder ver su contenido.

Obviamente está en blanco, así que primero miremos el contenido del default template actual. Por lo general, el archivo que maneja el formato de las páginas se llama page.php, esto puede variar, si varía te recomiendo que revises la documentación de tu theme a ver qué archivo utiliza para las páginas. Una vez abierto vamos a ver el contenido y parte de ese contenido hay que mantenerlo, ya que nosotros queremos hacer un template sin sidebars, pero si queremos mantener el resto del formato.

Hay ciertas secciones que se pueden identificar:

<?php get_header(); ?> : Esto hace que cargue el header de nuestro theme, un punto a mantener si queremos que lo contenga nuestra página.
Luego de este punto viene el contenido de la página, a veces llamado por un <div>, también es el momento de cargar el menú, etc.
<?php get_sidebar(); ?> : Esto es lo que llama a que cargue las sidebars.
<?php get_footer(); ?> : Esto hace que cargue el pie de página del theme.

Creo que está claro, debemos copiar todo el contenido excepto el que llama a la o las sidebars y pegarlo en nuestro archivo nosidebar-page.php. Ojo, ahí no termina todo, así que seguí los pasos que vienen porque es importante.
Una vez que pegaste ese código, arriba de la línea que llama el header debes pegar algo como lo siguiente:

<?php
/*
Template Name: NO Sidebar
*/
?>

Eso le va a dar el nombre al template cuando lo seleccionemos en el menú de escritura. Es importante que definas un nombre sino no aparecerá como disponible.

Hasta acá todo bien, ya tenemos un template que podemos seleccionar y que no tiene sidebars, el problema es que el texto que uno escribe todavía se mantiene con el formato del template anterior, quiero decir, que si el ancho de este texto son 500px eso no lo cambiamos y vamos a tener todo vacío donde estaban las sidebars. Eso es porque debemos definir un nuevo código de formato para una página mas ancha.

Supongamos, nuestra sección de texto es de 500px, una sidebar de 100px y una segunda sidebar de 150px, eso haría una sección SIN sidebars de 750px disponibles para texto. Muy bien, recordemos este valor porque lo vamos a necesitar.

Busquemos en nuestro nosidebar-page.php la sección donde llama al texto, generalmente <?php the_content(); ?>. Sobre esta sección debe haber una línea con el título de la entrada y superior debe haber una línea que le da el formato al texto, generalmente <div class="nombreclase">. Ese nombre de clase lo necesitamos, pero por ahora cambiémoslo a nosidebar.

Guardamos lo realizado hasta ahora y vamos a editar el archivo style.css desde el mismo Editor de Theme. Acá buscamos la clase con el nombre que tenía mas arriba. Es clase va a definir varias cosas, pero principalmente el formato general del texto, ya sea tamaño de espacio a escribir, fuente, color, links, etc.

Hacemos un Find y buscamos .nombreclase (reemplazando con el nombre de la clase correcta). Copiamos y pegamos las líneas que encontremos con .nombreclase y las pegamos todas abajo de todo del archivo style.css, luego cambiamos el .nombreclase por .nosidebar.  Ya tenemos la clase definida, ahora podemos modificarla, en alguno de los parámetros de la clase vas a encontrar:

.nombreclase {width:500px;......}

Esos son los 500px que mencionábamos mas arriba, bueno ese es el valor que habría que cambiar por 750px. Luego de modificarlo, guardamos y vamos a generar una nueva página con el nuevo template sin sidebars y todo el espacio entero.

Si algún formato no te agrada o no te gusta como queda, todo eso se controla desde la clase .nosidebar que acabás de generar y eso es totalmente modificable así que sentite libre de hacerlo a tu gusto. Cualquier duda o consulta dejame un comentario.

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.

Lo que todavía se está trabajando o faltaría, es en la optimización de las imágenes para que pueda cargar mas rápidamente el sitio. Se van a optimizar en cuanto a formato, colores y ubicación del hosting. También se está trabajando en customizar mejor los post footer donde está la publicidad Adsense para que se integre mejor con el diseño del Blog.
Algunas que otras funciones mas como Post Recientes al final del Post, etc.

Como ven todavía faltan algunas tareas pero por lo menos tenemos el nuevo diseño arriba y funcionando. Espero les guste y si tienen alguna recomendación o crítica la pueden realizar mediante los comentarios.
Este template no tiene un único dueño por lo que mas adelante voy a publicar todos los que contribuyeron para poder crearlo.
 

 <-- Diseño Anterior

Y si...nunca es suficiente. Siempre podemos encontrar algo mejor para nuestro diseño del Blog. Hace unos días había hecho un post sobre dos sitios muy buenos con templates para Blogger (Post Anterior). Ahora me encontré con otro sitio que se encargó de buscar por toda la Blogesfera los 50 Templates mas "bonitos" para Blogger. Hay de todo tipo, de 2 columnas, de 3 columnas, sin footer, etc. El link al sitio: 50 More Beautiful Blogger Templates

La verdad es que son muy buenos y hay que admitir que son los mejores de la web. Si no encontras uno que te guste ahí quiere decir que sos complicado jaja. Lo importante es elegir el formato, los colores e imágenes se pueden cambiar.
En ese sitio hay otro post muy bueno también sobre templates y herramientas para Blogger: 30+ Templates & Tools for Blogger
Creo que ya con todo eso tenes templates a revisar para rato. Pero digamos que todavía no encontraste el template del que te enamoras entonces te dejo este archivo que son los 50 templates de páginas web realizadas en CSS. De estas páginas vas a poder sacar mucha información y código para poder customizar tu propio template.

Recomendación: Buscá un buen template en el primer link que te pasé y customizalo con los colores que te gusten, imágenes que te gusten y si algún formato de lista, comillas, o menú no te gusta cambialo por el de algún otro template que encuentres. Si necesitas ayuda para eso, estoy disponible a consultas ya que si ves el template original del que armé este Blog no tiene nada que ver con el actual, lo modifiqué en un 80%, pero la estructura si la mantuve que es lo importante.

Bajar | 50 Most Download CSS Website Templates From OSWD.rar

Una de las decisiones mas difíciles a la hora de realizar un Blog es elegir el Template correcto. Blogger nos ofrece algunos templates para elegir, pero nosotros podemos recurrir a la web y encontrar muchos otros mejores. Existen grandes diseñadores y programadores por el mundo que hacen su trabajo público a cambio de mantener el link como derecho de autor lo que me parece justo.

El template de este blog fue sacado de uno de los mejores sitios de Templates que encontré Template Panic. No estoy diciendo que es el único pero si que es muy bueno y tiene mucha variedad. Tiene templates para Blogger, WordPress y Textpattern. Lo mejor de todo es que la programación de este template estaba muy clara y ordenada lo que hizo posible que yo lo modifique a mi gusto y necesidad. El original se llama Blue Square que puede ser bajado de acá.

Una decisión importante es si queremos 2 o 3 columnas o si queremos el header arriba o al costado. Estas decisiones son importantes ya que es lo mas difícil de modificar un template. Podemos cambiar gráficos, tamaños, etc, pero las columnas son realmente difícil de cambiar, no imposible, pero si complicado de que todo encaje.

Otros buenos templates pueden ser encontrados en Blog and Web. Poseen buenas adaptaciones a Blogger de templates para WordPress.
La instalación de los templates es bastante sencilla y por lo general si hay que modificar algo del template está documentado en el sitio desde donde lo bajamos. Siempre debemos dejar un link de referencia al creador del template, no cuesta nada y considerando que lo estamos usando se lo debemos.

Una aplicación muy útil que me encontré en la web es la CSS Tab Designer.
Con esta utilidad podemos agregar los menús que nosotros querramos de la forma que querramos, tanto vertical como horizontal. Con los colores, botones y fuentes que querramos. La aplicación es simple, armas el menú, elegís el template y después solo tenes que copiar el contenido del código dentro de tu plantilla de Blogger.
El código CSS hay que copiarlo dentro de <>, en cambio la lista con el menú hay que copiarlo dentro de un ítem HTML que agreguemos a nuestro template en la ubicación que nosotros querramos.