Plantilla para blogger "Red Flora": SEO, JQuery y trucos incluidos

Esta es la primer plantilla que publico para Blogger donde deposito mi experiencia personal en la plataforma con todos los trucos de optimización que mejor me han funcionado a lo largo del tiempo, además de ser un versión optimizada dentro de lo posible en blogger.

Esta primer versión que pesa 68 Kbs está dividida con condicionales que asignan una parte de la información a las áreas de artículos, paginas estáticas y el resto (navegación, archivo, etiquetas y portada), por consecuencia menos de 30Kb de información por área.

A diferencia de otras plantillas cuida los aspectos de diseño de estas áreas y no incluye código demasiado complejo para poder manejarse, aunque no puede agregarse estilos nuevos si antes no se conoce un poco de condicionales en Blogger o se podría desconfigurar.

Para evitar esto las áreas de CSS que no es compartida por todas las áreas se marcan con el buscador del navegador podemos buscar el texto en negritas segun a que área queramos asignar nuevas reglas CSS.

1. Estilos de páginas individuales para la sección de CSS de páginas estáticas que Blogger permite hasta 10.
2. Estilos de entrada para la sección de CSS de los post o entradas del blog.
3. Estilos de páginas generales para la sección de Portada, archivo, etiquetas

Estas son las áreas:
1. Portada y otros, viene dividida en dos columnas de entradas, buscador modificado de Google, artículos expandibles y con un slider en JQuery (Ver implementación en el apartado de Slider de JQuery):

2. Entradas: Implementan Artículos relacionados y miniaturas.

3. Páginas estáticas o individuales: Se ha removido y simplificado el código, las páginas individuales se agregan automáticamente a la tira de enlaces superior:

Ver demo:

Archivo de plantilla:
Descargue el archivo de plantilla es un TXT, debe copiar el contenido y reemplazar el código en Diseño ► Edición HTML (no expandan la plantilla):

Al pulsar Guardar la plantilla, aparecerá una advertencia, pulsen en el botón Eliminar widgets:

Arreglar problemas de los títulos
En la parte del Menú superior o barra de enlaces de páginas estáticas y en el Buscador aparecerán los títulos de las cajas deformando el diseño, debemos pulsar en el ícono de Editar:

En la ventana que se abre, elegimos el título:

Y dejar el título vació:

Pulsamos en Guardar, de otra forma el título empujará el menú superior afuera y tapará los bordes de la parte superior del buscador.

Implementando JQuery
1. Ahora vamos a Diseño - Elementos de Página:

2. Pulsamos en Editar en HTML/Javascript sobre las Entradas del blog:

3. Pegamos el siguiente código en la caja que se abre:

<ul class="slideshow">
  <li class="show">
    <a href="http://url1.html">
       <img src="imagen1.jpg" width="592" height="250" title="Título 1" alt="Texto caja 1"/>
    </a>
   </li>
   <li>
    <a href="http://url2.html">
    <img src="imagen2.jpg" width="592" height="250" title="Título 2" alt="Texto caja 2"/>
    </a>
    </li>
     <li>
     <a href="http://url3.html">
     <img src="imagen3.jpg" width="592" height="250"  title="Título 3" alt="Texto caja 3"/>
     </a>
  </li>
</ul>

Cambien el texto en Title y Alt que serán usados para las cajas de texto y el título; los enlaces y también ponga sus propias imágenes, cambiándolas al tamaño que ustedes necesiten, asegurándose de cambiar el CSS del Alto y el Ancho de la caja de texto y el contenedor. Recuerden que la caja de texto es menor a la altura de la caja del contenedor, o cubrirán toda la imagen.

Advertencia: el class="show", debe mantenerse únicamente en el primer elemento de la lista. Si lo desean puede agregar más elementos de lista, no hay límite, pero entre más imagenes más tardará en cargar la página, mi recomendación es de hasta 5 o 6 máximo:

Si quieren agregar más cajas de texto, peguen antes del </ul> las veces que quieran:

<li>
<a href="http://url.html">
<img src="imagen.jpg" width="592" height="250" title="Título" alt="Texto caja"/>
</a>
</li>

4. Pulsen en Guardar.

Implementar meta description diferentes
En el código de la plantilla, casi al inicio está un código de meta description repetida dos veces con la que podemos usar el título de la entrada con meta description, además debemos poner una descripción sobre nuestro sitio en la parte donde dice: Pon un texto de descripción. La segunda puesta bajo la sección <!-- el resto de las páginas --> Puede ser una descripción más larga, pues esta se mostrará en la portada, el archivo, páginas individuales y categorías. La descripción aparecerá en describiendo el resultado en buscadores como Google.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- página individual -->
  <meta expr:content='data:blog.pageName + &quot; - Pon un Texto de descripción &quot;' name='description'/>
<b:else/>
  <!-- el resto de las páginas -->
  <meta content='Pon un Texto de descripción' name='description'/>
</b:if>


Notas finales
A diferencia de las plantillas que se ofrecen en Blogger, aquí tendremos que hacer un poco de trabajo, pues he puesto todo en Widgets y no dentro del código, pues luego para la mayoría es difícil de editar esas partes si no se sabe de HTML.

Pero esto tiene sus desventajas, pues no podemos incluir en el código la configuración como la vemos en nuestra web donde hicimos el diseño, pues en los títulos vacíos de Widgets específicos de Blogger les pone un nombre automáticamente, salvo que no tenga contenido como en los widgets de HTML/Javascript y tampoco podremos importar ni los ajustes más sensibles, como el contador de visitas de blogger que les recomiendo ajusten como se ve abajo:

En los Artículos asociados ponemos nuestros blogs adicionales o que nos gustan, estos mostrarán un resumen y miniatura, solamente pulsamos en Agregar a la lista para incluir una nueva dirección web. Marquen las casillas Titulo, fragmento y miniatura, desmarquen el icono y la fecha:

Para recibir soporte técnico y asistencia, es necesario no quitar el copyright del diseño.