4 Tips y trucos útiles para quienes usan plantillas personalizadas

Si eres de los que usan plantillas personalizadas de terceros, una buena idea es probarla antes de ponerla de forma definitiva en tu blog, para verificar que todo funcione correctamente, y evitar sorpresas. Esto lo puedes hacer fácilmente en otro blog que crees para dicho propósito, ese que llamamos "blog de pruebas".

He aquí 4 tips y trucos útiles para quienes usan plantillas de terceros, también algunos pueden ser de utilidad,  si eres de los que les gusta personalizar la plantilla ;)

1. Verificar que la plantilla sea compatible con los principales navegadores y sus versiones

Tal vez estés utilizando Firefox y al probar tu blog veas todo en orden, pero ¿te has preguntado como lucirá  en Internet Explorer versión 7?, por ejemplo.

Generalmente no hay mucho de que preocuparse entre las mismas versiones de navegadores como Firefox y Google Chrome, caso contrario a Internet Explorer que suele causar problemas, hablando de sus versiones antiguas. Afortunadamente parece que ya no habrá que preocuparse por Internet Explorer 6, ya que habrá cierta actualización automática que pretende erradicar su uso, aunque todavía nos queda la versión 7.

Ver como luce tu blog en distintos navegadores

Browser shots, puede ayudar con esta tarea, haciendo capturas de pantalla de tu blog o página, en los distintos navegadores y versiones, según elijas.

Personalmente, compruebo la compatibilidad directamente en el Navegador,  no es muy práctico, pero me gusta ver directamente que todo luzca bien, navegando por el sitio.

Probar el diseño en distintas versiones de Internet Explorer, en el mismo navegador 

Si usas Internet Explorer, o por lo menos lo tienes instalado en tu computadora, desde su versión 8, puedes ver como luce tu blog en distintas versiones, si utilizas las herramientas de desarrollo. Lo ideal es que ya tuvieras la versión 9, para probarlo desde esa versión.

Para hacer la prueba,  pulsas la tecla F12, luego en Browser Mode, seleccionas la versión que deseas probar (de las tres primeras), y al seleccionarla debería cambiar automáticamente a la misma versión en Document mode, de ese modo el navegador se compartará como si fuera la versión que has seleccionado.

Al  terminar, no olvides cambiarlo a la versión 9, "Internet Explorer 9" y en Document mode debería estar "Internet explorer 9 standars", a menos que quieras navegar como si utilizaras una versión anterior...mmm, mejor no ¿vedad?.

Otras herramientas

Otra herramienta online que toma capturas de pantalla usando las distintas versiones de Internet Explorer es Netrender, e incluye Internet Explorer 6, aunque afortunadamente yo no tenemos que preocuparnos mucho por esa versión, (yo ya no lo hago). La limitación es que, como toda captura,  no puedes comprobar su funcionamiento y sólo ves como luce la página.

2. Verificar que las páginas estáticas funcionen correctamente, cuando se utiliza resumen automático en las entradas

Algunas plantillas antiguas, que utilizan resumen automático en las entradas, tienen un problema en el que al dirigirte a la página estática, esta se muestra con "leer más", o el texto que se haya agregado.

Esto se soluciona editando la siguiente parte en el HTML de la plantilla, por ejemplo, este es el código para crear el resumen automático que habían explicado en  Gem@Blog en el 2009, cuando todavía no existían las páginas estáticas de Blogger:

     
    <div class='post-body entry-content'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id='showlink'><a expr:href='data:post.url'> Texto para expandir el post </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
 <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

Habrá que agregar el código resaltado de verde al código anterior:

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

   <b:if cond='data:blog.pageType != &quot;item&quot;'>

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>  

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span id='showlink'><a expr:href='data:post.url'> Texto para expandir el post </a></span>

</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>             

   </b:if>     

    <div style='clear: both;'/> <!-- clear for photos floats -->

        </div>

Lo que hacemos es condicionar lo que sucederá con las páginas estáticas, y lo anterior, puede traducirse como: -si estamos en la página principal, se crea el resumen automático, en las entradas y páginas, y si estamos en cada página individual o en una página estática, se muestra el contenido del post-.

3. Verificar la plantilla en distintas resoluciones de pantalla

Esto servirá para ver si la plantilla se adapta óptimamente a las distintas resoluciones de pantalla. Puedes tomar en cuenta las resoluciones de pantalla que más visitan tu blog, basándote en tus propias estadísticas, para decidir si la plantilla cumple satisfactoriamente con este punto.

Herramientas para verificar el blog en distintas resoluciones de pantalla

Si utilizas Chrome existe una extención que permite comprobar esto, o bien puedes usar Test size que es una herramienta online, que te ayudará a lograrlo.

4. Alojar las imágenes de la plantilla por tu propia cuenta

Algo muy recomendable que puede ayudar el tiempo de carga de tu blog. Además si guardas por ti mismo las imágenes de la plantilla,  evitarás problemas futuros como la desaparición de una imagen de tu blog, si por ejemplo se borra accidentalmente, etc.

Cómo guardar imágenes de la plantilla

Paso 1. Copia todas las direcciones de las imágenes que encontrarás en la edición de HTML de tu plantilla, y lo haces fácilmente si utilizas ctrl F, escribiendo el comienzo de estas:  http://...

Paso 2. Luego, pones la dirección de la imagen en la barra de direcciones de tu navegador,  descargas la imagen  y la guardas en tu computadora.

Paso 3. Una vez que termines, subes las imágenes a un blog de pruebas que uses para tal propósito, o bien, a una página estática de tu blog que pudieras guardar como borrador u ocultar.

Paso 4. Desde el panel de edición de entradas, haz click en el botón de HTML enseguida de "Redactar", en la nueva interfaz, y copia la dirección de la imagen que está dentro de la etiqueta a que envuelve a la imagen.


Nota: Es esa la dirección que tiene la imagen con su tamaño original, por eso no tomas la que viene el código de la propia imagen.

Tip: Si eres muy novato, y si se te complica obtener el código de la imagen desde el HTML de la entrada, entonces, ya que subas todas las imágenes, publica la entrada, vas a la entrada, haz click sobre cada imagen, y copia la dirección que aparece en la barra de direcciones, esto pensando en que no está habilitado el lightbox de Blogger.

Conclusiones
Un buen diseño compatible con la mayoría de navegadores y funcionando correctamente, hará que tu blog luzca más profesional, dará una mejor impresión a tus usuarios, y sumado a tu contenido, seguramente hará que regresen y así captarás a una mayor audiencia ;)


Referencias y más información:

Comprobar el diseño en varios navegadores
Herramienta de desarrolladores de IE