Blogger recientemente agregó de manera automática y obligatoria una LightBox en las imágenes de todos sus blogs. Una lightbox es una buena forma de resaltar fotografías y será útil en mucho casos, pero no en todos. Esta nueva característica usa javascript e igualmente con javascript se puede eliminar.

Actualización: 20/10/2011. Parece que Blogger entendió que no puede simplemente imponer características y ya ofrece la opción directamente desde el panel para eliminar la lightbox de imágenes. Para ello ve a Escritorio → Configuración → Entradas y comentarios → Showcase images with Lightbox y selecciona “No”.

Método por javascript, ya no recomendado:

Basta agregar el siguiente código antes de </head>:

<script type="text/javascript">
//<![CDATA[
function killLightbox() {
 var images = document.getElementsByTagName('img');
 for (var i = 0 ; i < images.length ; ++i) {
  images[i].onmousemove=function() {
   var html = this.parentNode.innerHTML;
   this.parentNode.innerHTML = html;
  };
 }
}

if (window.addEventListener) {
 window.addEventListener('load',killLightbox,false);
} else {
 window.attachEvent('onload',killLightbox);
}
//]]>
</script>

Fuente: English java drinker / Vía: Vagabundia.

Modificar una plantilla o theme es uno de los primeros retos de quienes inician un blog. Para hacerlo, nada nos libra de aprender lo básico de HTML y CSS, pero hay herramientas que pueden hacerlo más sencillo como Firebug, la extensión para Firefox y en versión Lite, para Chrome.

Una de las herramientas más simples, pero también más útiles de Firebug es Inspeccionar, como su nombre lo indica, permite navegar por cada elemento de un sitio web y conocer como esta configurado y como esta relacionado con otros elementos. Esta es la herramienta que puede ayudar a cualquiera a modificar una plantilla, sea Blogger o WordPress, sin mucha dificultad.

Esta pequeña guía se enfocará básicamente en modificar el CSS para adaptar un diseño a nuestras necesidades. En Blogger el CSS esta dentro de la misma plantilla, entre los códigos <b:skin> y </b:skin> y en WordPress en el archivo style.css en la carpeta del theme activo.

Modificar el CSS de un elemento con Firebug.

Para modificar cualquier característica de un elemento de una plantilla simplemente hay que:

1. Instala Firebug en tu navegador: Firefox o Chrome. Personalmente yo recomiendo usar la de Firefox, es más completa y rápida, pero a ambas aplica el contenido de este tutorial.

2. Dar clic en el botón de Firebug en la barra de herramientas , luego en el botón de Inspeccionar  y ubicar el cursor justo sobre el elemento a modificar, puede ser texto, imagen, video, flash o cualquier elemento, y dar clic en él.

3. En el cuadro de la derecha de Firebug, estando la pestaña “Estilo” activa, se muestran todos los estilos que afectan al elemento.

Se muestran tal como los tendríamos en una hoja de estilos CSS, sin embargo, Firebug ordena las propiedades alfabéticamente y las estandariza.

Es fácil reconocer las siguiente información: selectores, propiedades y la ubicación de dicho estilo (línea de código y archivo que lo contiene).

Aquellas propiedades que aparezcan con un tachado, implica que otra reglas CSS las ha sobrescrito y que por lo tanto no están siendo aplicadas.

4. Pruebas en vivo.

Algo muy interesante de Firebug es que puedes modificar cualquier propiedad CSS y ver los resultados directamente aplicados sobre la página. Para ello solo es necesario dar clic sobre la propiedad o valor para cambiarlo, y ver directamente que pasa en la página.

Para las propiedades que solo pueden tomar valores predeterminados, Firebug permite explorarlos con solo dar clic en el valor y usar las teclas de arriba y abajo del teclado.

Y muy similar para los valores numéricos:

Otra opción muy útil es la de desactivar propiedades para saber como se comporta un elemento sin ellos, basta dar clic en el circulo rojo a la izquierda de cada propiedad.

Encontrar la imagen de fondo de un elemento también es útil cuando se esta modificando una plantilla, para ello solo hay que colocarse sobre el elemento, dar clic y en el panel de “Estilo”, aparecerá el selector que contiene la imagen, normalmente en la propiedad background o background-image.

Y hay otras varias herramientas que pueden ver directamente en el manual oficial.

5. Usando los datos de las pruebas.

Una vez que sabes haz llegado al resultado deseado en las pruebas, es necesario aplicar esos mismo cambios a los estilos en tu plantilla. Firebug nunca guarda cambios, esta parte debes hacerla tu manualmente.

En otras palabras, si haz agregado una propiedad en Firebug, debes agregar esa misma propiedad a tu hoja de estilos; si haz hecho una modificación, esta debe hacerse también en los estilos de la plantilla.

Screencast

Con esta introducción, pueden ver Firebug en acción en el screencast de introducción.

Conclusión

Firebug es una herramienta muy intuitiva, así que algunas recomendaciones: Prueben y prueben, se aprende bastante de CSS y de la propia herramienta, pero sin riesgo de afectar nuestro código. Lean la guía oficial, donde se pueden aprender a sacar más provecho de la extensión. Y por último, aprendan al menos lo básico de CSS y HTML, hará cualquier tarea de diseño menos frustrante.

¿Qué son las vistas Blogger?

Las vistas Blogger son diferentes versiones de tu blog, en cierta modo, diferentes formas de navegar tu blog, sin cambiar tu plantilla, usando Ajax, HTML 5 y CSS 3.

Actualmente son cinco vistas:

1. Vista de Sidebar. Una barra lateral con la lista de post y la columna principal con el contenido y comentarios.

2. Vista de Flipcard. Organización tipo galería.

3. Vista en Mosaico. Organización tipo mosaico con las imágenes de los posts.

4. Vista en Instantáneas (Snapshot). Organización tipo galería y en forma de fotografías instantáneas.

5. Vista en diapositivas (Timeslide).

Cómo usar las vistas en tu blog

Para usar las vistas únicamente agrega /view al final de la URL de tu blog. Por ejemplo:

http://myblog.blogspot.com/view

Las vistas se mostraran sin problema si:

• Están habilitadas desde el panel en Escritorio → Configuración → Formato → Habilitar vistas dinámicas
• Tu blog es público.
• El feed esta configurado en completo. Escritorio → Configuración → Feed del sitio → Completo

Ventajas

• Scroll infinito. Es decir, sin páginas de "Siguiente" o "Atrás", con hacer scroll las entradas aparecen automáticamente.
• Carga rápida. Al cargar solo bajo demanda, no se cargan más elementos que los que se desea ver.
• Organización. Más opciones para presentar el contenido a gusto del lector.

Conclusiones

Por primera vez, Blogger incorpora algo novedoso y hasta revolucionario respecto a otras plataformas, un cambio positivo para bloggers y lectores.

¿Tu qué opinas?

Descargar

Blogger: Descargar | Demo
WordPress: Descargar | Demo

Instalación

Para instalarla consulta el videotutorial y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

Menú principal

Para agregar enlaces al menú, solo crea una página estáticas desde el panel.

El último enlace contiene un menú desplegable, este se puede editar buscando el siguiente código en la plantilla:

<!-- Drop down menu -->
					<li class='page_item'><a href='#' title='Parent Page'>More</a>
						<ul class='children'>
							<li class='page_item'><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
							<li class='page_item'><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
							<li class='page_item'><a href='http://blogger.com'>Login</a></li>
							<li class='page_item'><a href='#'>Edit</a></li>
						</ul>
					</li>
					<!-- Drop down menu -->

Licencia

Licenciado bajo GPL. Uso en sitios personales y comerciales permitido dejando por favor intactos los créditos de diseño (sin quitar o agregar enlaces en los créditos).

Descargar

Blogger: Descargar | Demo
WordPress: Descargar | Demo

Instalación

Para instalarla consulta el videotutorial y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

1. Menú principal

Para agregar enlaces al menú, solo crea una página estáticas desde el panel.

2. Fecha

Cambia el formato de cabecera de fecha (Inicio → Configuración → Formato → Formato de cabecera de fecha) por la penúltima opción.

Licencia

Licenciado bajo GNU.

Características

• Menú desplegable hecho solo con CSS.
• Fuente personalizada vía Google Web Fonts.
• Adaptación fiel de WordPress.
• Configuración de colores desde el panel.
• Menú con páginas estáticas.

Descargar

Blogger: Descargar | Demo
WordPress: Descargar | Demo

Instalación

Para instalarla consulta el videotutorial y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

Menú principal

Para agregar enlaces al menú, solo crea una página estáticas desde el panel.

El último enlace contiene un menú desplegable, este se puede editar buscando el siguiente código en la plantilla:

<!-- Drop down menu -->
<li class='menu-item'><a href='#'>More</a>
<ul class='sub-menu'>
	<li class='menu-item'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
	<li class='menu-item'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
	<li class='menu-item'><a href='http://blogger.com'>Login &amp;rarr;</a></li>
	<li class='menu-item'><a href='#'>Edit</a></li>
</ul>
</li>
<!-- /Drop down menu -->

Licencia

Licenciado bajo GNU. Uso en sitios personales y comerciales permitido dejando por favor intactos los créditos de diseño (sin quitar o agregar enlaces en los créditos).

Características

• Escrita en HTML 5.
• Header rotativo.
• Adaptación fiel desde WordPress.
• Configuración de colores desde el panel.
• Menú con páginas estáticas.
• Compatible con navegadores modernos e IE8 y superior.

Descargar

Blogger: Descargar | Demo
WordPress: Descargar | Demo

Instalación

Para instalarla consulta el videotutorial y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

1. Header aleatorio.

Se pueden agregar / cambiar las imágenes en el siguiente código de la plantilla:

images = new Array(3);
images[0] = "<img alt='' src='http://4.bp.blogspot.com/_Zuzii37VUO4/TYgALoaiH3I/AAAAAAAAFiQ/k9sEBPYHcqk/s000/stushow1.jpg'/>";
images[1] = "<img alt='' src='https://lh6.googleusercontent.com/_Zuzii37VUO4/TYhA6myzoaI/AAAAAAAAFio/vG-tPIJhIAw/s000/stushow2%5B1%5D.jpg'/>";
images[2] = "<img alt='' src='https://lh4.googleusercontent.com/_Zuzii37VUO4/TYhBGCd7LvI/AAAAAAAAFis/EpH53jaE5NY/s000/stushow3%5B1%5D.jpg'/>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);

2. Menú principal

Para agregar enlaces al menú, solo crea una página estáticas desde el panel.

Licencia y condiciones de uso

Licenciado bajo GPL. Uso en sitios personales y comerciales permitido dejando por favor intactos los créditos de diseño (sin quitar o agregar enlaces en los créditos).

Funcionamiento

Al agregarlo, automáticamente agrega el blog a Feedburner, crea la URL del feed y la usa para la suscripción de correo.

El gadget se muestra con un sencillo formulario donde el lector puede escribir su dicción de email y confirmar su suscripción. Al parecer, el botón se adapta automáticamente a la paleta de colores del blog.

Configuración

Para configurar las opciones de la suscripción por email les recomiendo revisar nuestra Guía para ofrecer suscripción por email paso a paso.

Código

Como todos los widget de Blogger, se puede modificar el código del formulario buscando por el título o, en este caso, FollowByEmail. El código generado por el gadget es como el siguiente:

<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'>
<b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
  <div class='widget-content'>
    <div class='follow-by-email-inner'>
      <form action='http://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true&quot;' method='post' target='popupwindow'>
        <span>
          <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
        </span>
        <input class='follow-by-email-submit' type='submit' value='Submit'/>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
    </div>
  </div>
  <span class='item-control blog-admin'>
    <b:include name='quickedit'/>
  </span>
</b:includable>
</b:widget>

En él, yo recomiendo cambiar:

<input name='loc' type='hidden' value='en_US'/>

Por:

<input name='loc' type='hidden' value='es_ES'/>

Para que el mensaje de confirmación se muestre en español.

Estilos

Blogger agrega por defecto los siguientes estilos:

/*Contenedor general*/
.FollowByEmail .follow-by-email-inner {
    position: relative;
}
/*Campo de email*/
.FollowByEmail .follow-by-email-inner .follow-by-email-address {
    border: 1px inset;
    font-size: 13px;
    height: 22px;
    line-height: 22px;
    margin: 0;
    padding: 0 2px;
    width: 100%;
}
/* Botón de submit */
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
    -moz-border-radius: 2px 2px 2px 2px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    border: 0 none;
    color: #FFFFFF;
    font-size: 13px;
    height: 24px;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    z-index: 0;
}
.FollowByEmail .follow-by-email-inner input {
    font-family: arial,sans-serif;
}

Sobra decir que estos se pueden sobre escribir desde el código de la plantilla si se desea personalizar.

Un nuevo gadget que facilita la vida, pero que no hace algo realmente haga falta para el usuario Blogger, como más condicionales en la plantilla o un alojamiento de archivos.

Nueva interfaz de edición

(Clic en cada imagen para agrandar)

Nuevo diseño de dashboard

Nueva herramienta para descubrir contenido en la navbar

A primera vista luce realmente bien, claro y funcional. Adiós a la imagen casi infantil de Blogger.

1. Ir al código de la plantilla (Escritorio → Diseño → Edición HTML) y expandir plantilla de artilugios.

2. Buscar el código del widget de páginas, que es más o menos como sigue:

<b:widget id='PageList1' locked='true' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Para facilitar la búsqueda, pueden buscar con el navegador: id=’PageList

3. Una vez ubicado el código, hay dos lugares donde se pueden colocar nuevos enlaces:

• Antes de <ul>. El enlace aparece primero en el menú.
• Después de </ul>. El enlace aparece último en el menú. Nótese la diagonal de cierre de la etiqueta.

Como se trata de una lista HTML, el enlace seguiría el siguiente formato:

<li><a href='http://misitio.com/mienlace/'>Mi enlace</a></li>

Se pueden agregar tantos enlaces como el diseño lo permita. Siempre teniendo cuidado de abrir y cerrar correctamente las etiquetas.

4. Guardar los cambios.

De este modo se pueden agregar enlaces a una etiqueta importante, un sitio externo, al url del feed o cualquier otro sitio.