Nuevo editor de Plantillas Blogger / Blogspot

Blogger moderniza su Sistema de plantillas 

Hoy revisando mis blogs me percate que Blogger había actualizado el sistema con el cual se editan las preferencias de las plantillas simplificando la vida y dando las atribuciones para el manejo del template (que anteriormente se debían hacer mediante hacks y ediciones de HTML un poco mas avanzados) o simplemente depender de template que se descargaban desde la red.


Uno de los problemas que se me presentaban al momento de trabajar en los blog era el diseño de los mismos (tengo al menos 7 de diversos temas). El hecho de tener que intervenir directamente el template de la plantilla por HTML me obligo a aprender CSS avanzado y leer las ayudas de Blogger para entender la estructura de sus sistema (uno de los peores problemas fue tratar de hacer una galería de fotos para otro blog en CSS). 

Al parecer esta actualización es para tratar de posicionar Blogger como una alternativa real a wordpress, esto debido a la gran migración de pequeños blogeros independientes a la competencia, simplemente por la libertad que presenta la misma en comparación a blogspot, junto con otra actualización anterior al obsoleto creador de entradas que existía.

Esperemos que se nos den mas herramientas y libertad en el diseño de nuestras plantillas para que cada día nuestros blogs sean mejores.

Comentarios recientes widget en español para tu blogger

Comentarios recientes o Últimos comentarios en tu blog blogger Para este widget se necesita realizar lo siguiente: Pegar el siguiente texto en un artilugio nuevo - html/javascript en tu blog Nos vamos a editar diseño / añadir gadget / html/javascript Y pegamos el siguiente codigo (existen dos alternativas).

1º Con desplazamiento del texto hacia arriba, si la conexión es mala, la carga de la página es lenta.

<blockquote><marquee bgcolor = "#FFFFFF" scrolldelay = 0 direction = up ><script style='text/javascript' src='http://sites.google.com/site/k126insaneblog/k-126/ultimos.js'></script><script style='text/javascript'>var a_rc=5;var m_rc=true;var n_rc=true;var o_rc=50;</script><script src='http://k-126.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments'></script></marquee></blockquote>

2º Sin la marquee solo texto estático, menos bonito pero más Funcional

<blockquote><script style='text/javascript' src='http://sites.google.com/site/k126insaneblog/k-126/ultimos.js'></script><script style='text/javascript'>var a_rc=5;var m_rc=true;var n_rc=true;var o_rc=50;</script><script src='http://k-126.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments'></script></blockquote>

Es de suma importancia que cambies la dirección de mi blog por la del vuestro en el codigo en ambos casos para que "ubique" los comentarios (en ambos casos) lo que debes cambiar es el k-126 de la direccion de esta linea por la direccion de tu blog src='http://k-126.blogspot.com/feeds/comments solo eso debes cambiar para que funcione correctamente, sino mostrara los comentarios de mi blog (jaja).

Si quieres modificar el java script del widged lo puedes descargar desde el siguiente vínculo http://sites.google.com/site/k126insaneblog/k-126/ultimos.js y alojarlo en un servidor, por ejemplo en http://sites.google.com (porque si tienes un blogger tienes usuario en todos los servicios de google).

Los creditos de esta aplicación son para: http://ayudaparatublog.com

Pdta: el comando <blockquote></blockquote> puede ser eliminado, simplemente tiene funcionalidad estetica.

Pdta2: a_rc=5 el numero 5 corresponde al numero de comentarios que muestra.

Pdta3: o_rc=50 el numero 50 corresponde a los caracteres que muestra del comentario, no uses mas de 100

cambiar el autor en blogger por una imagen

Uno de los problemas que se sucitan en blogger es querer cambiar al "postado por" o el "autor" de una entrada por una imagen, el procedimiento logico para hacerlo es el siguiente:

1º Diseñar una imagen de aproximadamente 10 pixeles de alto por 80 de largo, estas dimensiones son las ideales para que no tengan el problema que posee el insane blog, que descuadra la parte inferior de la entrada.

2º subirla a la red (debemos tenerla hosteada en algun servidor para poder modificar nuestro pie de entrada).

4º Nos vamos a diseño, edicion de html, respaldamos nuestra plantilla antes de causar cualquier daño que por falta de pericia no podamos reparar.

5º Expandimos artilugios (se clickea en "expandir plantilla de artilugios", como se ve en la imagen de mas abajo)

6º buscamos lo siguiente en el codigo html.

 

<data:post.author/>

7º Este codigo lo debemos reemplazar por lo que sigue: 

<img src="Aquí la URL de la imágen"/>

8º Guardamos la plantilla y visualizamos el resultado que deberia ser algo por el estilo.

9º se daran cuenta que se ve un poco descuadrado, por ultimo debemos modificar en modo diseño lo siguiente. Clickamos en editar, nos sale la siguiente pantalla y ordenamos, y eliminamos lo que no sea necesario.

Great job :D

modificando el tamaño de la planilla de blogger y de la barra

Una vez que hemos eliminado la barra de Blogger, y que hemos modificado la cabecera de nuestro blog el siguiente paso lógico es adecuar el tamaño del mismo, optimizar el ancho del main wrapper y side-wrapper, que por defecto están dimensionados para una resolución de 800x600 pixeles algo ya prácticamente en desuso en nuestros días.

Aunque anteriormente explique en que consistía vamos a revisar las partes básicas de la planilla del blog.

1.- Header-wrapper: cabecera
2.- main-wrapper: sector principal donde generalmente se asignan las entradas del sitio
3.- sidebar-wrapper: barra lateral del blog
4.- footer-wapper: pie de página
5.- outer wapper: parte de atrás de todos los anteriores sectores.

Antes de modificar nuestra plantilla HTML vamos a elegir nuestro nuevo formato, el tamaño del blog será de 900 pixeles por lo tanto debemos modificar todos los elementos de la planilla.

Header-wrapper sera de 900 px Footer-wrapper sera de 900 px
Outer-wrapper sera de 900 px

Main-wrapper sera de 600 px
Sidebar-wrapper sera de 250 px

Esta dimensiones son para que no se deforme la apariencia del blog además así conseguimos dejarlo un poco mas armonioso por que al centro le damos un espacio entre ambas columnas una distancia de 50 pixeles aproximadamente.

Para esto vamos a diseño – Edición HTML y buscamos el valor de 660px y lo reemplazamos por 900px

Las dos ultimas ya habia modificado el valor a 900 px

Posteriormente modificamos el main y sidebar wrapper a 600 y 250 respectivamente.

Y el resultado será el siguiente

como eliminar la cabecera de blogger blogspot

Lo primero para hacer un blog decente y crearlo a medida de cada uno, es eliminar el borde superior de Blogger/Blogspot, ya explique aquello aquí, dichosa barra siempre me ha incomodado y la encuentro poco atractiva para los sitios.

Posteriormente es quitar la cabecera y reemplazarla por nuestro logo pero antes de eso vamos a explicar un poco de la semántica técnica del blog y su forma en HTML.

El blog en si se puede diagramar a través de HTML y CSS, la planilla básica esta dividida en 5 sectores básicos en los cuales podemos trabajar independientemente, asignar colores añadir o quitar artilugios, fondos, tamaños, bordes etc… etc … lo que se nos ocurra y que nos soporte la hoja de estilos.

1.- Header-wrapper: cabecera 2.- main-wrapper: sector principal donde generalmente se asignan las entradas del sitio 3.- sidebar-wrapper: barra lateral del blog 4.- footer-wapper: pie de página 5.- outer-wapper: parte de atrás de todos los anteriores sectores.

Para eliminar la cabecera primero nos vamos al codigo (Diseño - Edicion Html) y buscamos lo siguente:

Este párrafo identifica a la cabecera del blog con sus componentes y debemos cambiar los siguientes atributos

Maxwidges de 1 a los que necesitemos en este caso 10, esto define la cantidad de artilugios que podemos poner en la cabecera de nuestro blog. Locked de true a false, permite mover nuestros artilugios y eliminarlos. Showaddelement de no a yes, para poder agregar los widges o artilugios a la cabecera

<div id="'header-wrapper'"><br /><b:section class="'header'" id="'header'" maxwidgets="'10'" showaddelement="'yes'"><br /><b:widget id="'Header1'" locked="'false'" title="'tezt" type="'Header'/"><br /></b:section><br /></div> <br />

Después de realizar esos cambios en el HTML de nuestro blog hemos quitado las limitaciones que nos imponía Blogger sobre la cabecera y la podemos editar a nuestro propio gusto y también es aplicable al resto de los sectores de nuestra planilla. Good Job :)

Como agregar un favicon en blogger Blogspot

Esa imagen que sale en el navegador o en los favoritos del mismo es llamado favicon, es una imagen con extensión .ico (icono).

El nombre favicon proviene de la abreviatura de “favorite icon” en ingles, teoricamente se puede utilizar cualquier imagen para dicho icono pero ahora seguiremos los pasos tradicionales para crear el favicon de nuestro blog.

1.- seleccionamos nuestra imagen para nuestro favicon, en mi caso la diseñe en fireworks para así conseguir la resolución adecuada inmediatamente, la imagen no debe ser muy compleja para su correcta visualización en el navegador, de 16 x 16 pixeles.

2.- transformamos nuestra imagen en formato ico para eso utilizamos el servicio web de

http://herramientas.recuweb.com/favicon/ subimos la imagen y le damos a crear posteriormente un poco más abajo nos sale la opción de descargar nuestro favicon.ico en un archivo comprimido.

3.- como estamos creando un favicon para Blogger obviamente tenemos una cuenta Google por lo que utilizamos la misma y nos vamos a:

http://sites.google.com y nos creamos un sitio para alojar nuestro icono recién creado, con la precaución de que el sitio debe ser publico para que se pueda usar el icono desde el blog.

Adjuntamos el favicon y copiamos la ruta del archivo en mi caso es

http://sites.google.com/site/faviconitoxd/Home/favicon.ico?attredirects=0

Le eliminamos hasta la extensión del archivo .ico

http://sites.google.com/site/faviconitoxd/Home/favicon.ico

nos vamos a la plantilla de Blogger y agregamos la siguiente línea

Great job :)