 |
Usuario: Ingresar |
Blog de diseño gráfico, informática, tecnología y cultura política.
 |
| Dirección URL | http://cgnauta.blogspot.com/ Registrado:03-Feb-2008 |
Compartir:
|
|
 Enviar a email | Plantilla para blogger "Red Flora": SEO, JQuery y trucos incluidos en General |  Por matius
el 31-Dec-1969 | 
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.
- Estilos de páginas individuales para la sección de CSS de páginas estáticas que Blogger permite hasta 10.
- Estilos de entrada para la sección de CSS de los post o entradas del blog.
- 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 == "item"'>
<!-- página individual -->
<meta expr:content='data:blog.pageName + " - Pon un Texto de descripción "' 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.
Leído 1 veces
|
|
 |
 | Blog And Web |  Blogueros | Tecnologia aplicada a weblogs, wordpress,plantillas y photoshop. Blog and Web Recursos para Blog y Web |
| Liquorice, plantilla para Blogger |  Liquorice es una plantilla estilo vintage basada en el theme para WordPress del mismo nombre. diseñada por Nudge design y adaptada a Blogger por Blog and Web y BTemplates. 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 [...] [..] Leer nota completa | | Publicado 23-Mar-2011 por Francisco en BloggerPlantillas BloggerFreebies
Leído 2 veces. Más resultados en    |
|
| Blog And Web | Blogueros | Tecnologia aplicada a weblogs, wordpress,plantillas y photoshop. Blog and Web Recursos para Blog y Web |
| Matala en plantilla para Blogger |  Matala es el diseño anterior del creador de WordPress: Matt Mullenberg, diseñado por GNV & Partners y ahora adaptada a Blogger por Blog and Web y BTemplates. 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 [...] [..] Leer nota completa | | Publicado 27-Mar-2011 por Francisco en BloggerPlantillas BloggerWordPressFreebies
Leído 3 veces. Más resultados en |
|
| Mundo Y Servicio Ptc | rosario | La mas actualizada información sobre las mejores PTC del mercado, tips de como administrar su cuenta y tutoriales de registro en las PTC mas famosas. Comprobantes de pago, glosario específico del tema y un servicio realmente particular, conseguimos referidos para la PTC que usted nos informe. Mundo PTC Todo acerca de las PTCs |
| Todo Blogger: Trucos para blogs |  Todo Blogger es un sitio en donde encontrarás consejos y trucos para blogs. En él podrás aprender cosas básicas, por ejemplo como crear un blog o qué es un blog. También encontrarás cosas más avanzadas, por ejemplo como aumentar las visitas del blog y como ganar dinero siendo blogger.
En Todo ... [..] Leer nota completa | | Publicado 05-Nov-2010 por Caymans en Noticiasblogsganar dineroganar dinero siendo bloggerredes socialestrucos para blogs
Leído 9 veces. Más resultados en |
|
| Blog And Web | Blogueros | Tecnologia aplicada a weblogs, wordpress,plantillas y photoshop. Blog and Web Recursos para Blog y Web |
| Plantilla Blogger OneNote |  OneNote es otro excelente diseño de Elena, de Design Disease y Premium Themes. Tiene un diseño elegante en tonos cafés con una columna en portada y dos columnas en el resto de las secciones. Características 1 o 2 Columnas. Menú con páginas estáticas. Configuración de colores desde el panel. Menú con redes sociales. Formulario en [...] [..] Leer nota completa | | Publicado 07-Mar-2011 por Francisco en BloggerPlantillas BloggerFreebies
Leído 4 veces. Más resultados en |
|
| Blog And Web | Blogueros | Tecnologia aplicada a weblogs, wordpress,plantillas y photoshop. Blog and Web Recursos para Blog y Web |
| FreeDream, plantilla Blogger |  FreeDream es un diseño sencillo pero fresco creado por Dreamweaver Gratuit para WordPress y adaptado a Blogger por Blog and Web y BTemplates. 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 [...] [..] Leer nota completa | | Publicado 29-Mar-2011 por Francisco en BloggerPlantillas BloggerFreebies
Leído 2 veces. Más resultados en |
|
| Blog And Web | Blogueros | Tecnologia aplicada a weblogs, wordpress,plantillas y photoshop. Blog and Web Recursos para Blog y Web |
| Plantilla blogger Design Disease |  Elena, una estupenda diseñadora rumana y creadora de Design Disease y Premium Themes, ha actualizado el diseño de su sitio web y ha tenido la gentiliza de liberar su antiguo y genial diseño. El nombre del theme para WordPress no podía ser otro que Design Disease y ahora, convertido a plantilla Blogger por Blog and [...] [..] Leer nota completa | | Publicado 02-Jul-2010 por Francisco en BloggerPlantillas BloggerFreebiesPlantillasTwitter
Leído 9 veces. Más resultados en |
|
| Blog And Web | Blogueros | Tecnologia aplicada a weblogs, wordpress,plantillas y photoshop. Blog and Web Recursos para Blog y Web |
| iStudio, plantilla Blogger en HTML5 |  iStudio es una plantilla diseñada originalmente por Xu.hel para WordPress y convertida a Blogger por Blog and Web y BTemplates. Un diseño sencillo, pero elegante, claro y funcional. 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 [...] [..] Leer nota completa | | Publicado 22-Mar-2011 por Francisco en BloggerPlantillas BloggerFreebiesHTML 5
Leído 3 veces. Más resultados en |
|
|
Advertencia YAAQUI.COM no verifica la veracidad de la información publicada y no se responsabiliza
por el uso que se le de a la infomación del contenido publicado en los feeds y weblogs independientes.
Las opiniones vertidas en este sitio no necesariamente son nuestras. Nos reservamos el derecho de
remover cualqueir material que consideremos inconveniente.
|
|
| |
Hola, Invitado
En línea: 119 visitantes
+ fotos
