sábado, 2 de julio de 2011

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ñoEdició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.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

1 comentarios:

  1. es muy guapa!, muy bien hecha solo te recomendaria que la actualizases tal y como está, pero responsive porque mira se ve con mucho scroll http://mobiletest.me/iphone_5_emulator/?u=http://nantenehua.blogspot.com.es/

    Y ya de paso cambiases colores, mas minimalista entre blancos de fondo, grises y negro el texto, por otro lado mejor eliminar imagenes de fondos o de post, en el 2011 esto se llevaba pero ya no, estoy buscando una como está pero actualizada, antes las hacia yo pero me canse, si te animas tendrias mucho exito la gente busca estas plantillas estilo revistas pero con colores, y con opciones para el 2018, un saludo, es muy bueno tu blog enhorabuena y adelante. Yolanda

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.