Zona de Pruebas

[PsycHo] : Genera tu plantilla

2008-01-11T01:45:00.000+01:00

Eso exactamente conseguiremos en esta estupenda página. Con tan sólo seleccionar las opciones podremos crear una plantilla desde cero con un estilo muy particular. Absolutamente todo es configurable a gusto de cada uno, desde el número de columnas, situación, anchos, colores y fuentes, bordes... etc e incluso permite desde el propio editor configurar varios de los widgets integrados en la plantilla. Aunque sólo sea por curiosidad es algo que no debes dejar de probar, y para aquellos que quieran una plantilla a medida sin tener que hacer farragosas inmersiones en el editor HTML de Blogger es casi de visita obligada.

Click para ir al editor

Plantilla para Fotoblog

2008-01-10T00:39:00.000+01:00

Una plantilla ideada para aquellos bloggers que sobretodo quieran compartir fotos. La columna de posts es especialmente ancha para poder mostrar tus imágenes con un tamaño más que considerable y el resto del diseño de la página tiene un aspecto muy pulcro y cuidado. La he econtrado en el blog de Blog and Web, un blog en el que por cierto podréis encontrar multitud de información útil para construir vuestro blog.

Click en imagen para Demo y/o Descarga

Plantilla Goldfish

2008-01-06T07:22:00.000+01:00

Aire fresco en las plantillas de Blogger... entre las muchas alternativas que hay a las plantillas habituales esta me ha gustado especialmente. Es la primera plantilla creada desde cero por BlogU, otro blog de ayuda que suelo frecuentar.

Picha en la imagen para una demo de la plantilla

Entre las características de la plantilla cabe destacar:

Dos barras laterales
Nube de etiquetas
Bloques de citas personalizados
Favicon integrado

Para descargar la plantilla pásate por aquí.

50 Plantillas para Blogger

2007-09-14T13:25:00.001+02:00

Podrían ser miles, ya que si algo abunda en Blogger son plantillas, pero si que es cierto que el 90% de ellas son versiones ligeramente diferentes de las disponibles al crear el blog desde cero, las típicas Minima, Rounders ... etc. En esta ocasión se tratan de una recopilación de 50 plantillas realmente innovadoras, llamativas y totalmente diferentes a las clásicas. Desde luego yo pienso probar alguna de estas en algún que otro Blog que tengo por ahí. Animaos, porque seguro que más de uno encontráis varias que os gustes para vuestra propia página.

Unos ejemplos:

Para acceder a todas ellas pasaros por esta página.

Plantilla Zona de Pruebas Rounders con columnas a ambos lados

2007-07-16T01:17:00.000+02:00

Como veo que es una demanda relativamente popular y que no os animais a transformar vosotros mismos la plantilla ;) , os dejo esta ya lista para usar.

Características:
- Columnas a ambos lados de los posts
- Dropcaps preinstalado en plantilla y modificable desde "colores y fuentes"
- Bloques de citas preinstalado y modificable desde "colores y fuentes"
- Emoticonos
- Posts expandibles (pekaboo)

[Descarga]

Plantilla Rounders 4 con sidebars a ambos lados

2007-06-13T05:24:00.001+02:00

Hace ya tiempo, en alguno de los comentarios de este blog se me preguntaba como se podía pasar de una plantilla Rounders 4 (como la plantilla primigenia de este blog) a una en la que tuvieramos columnas laterales a ambos lados. La verdad es que anduve un poco liado, pero estos días he vuelto a retomar el blog y me he acordado de esa cuestión.

La solución para transformar la plantilla pasa por una serie de incursiones en el editor HTML con la que los errores son bastante habituales así que es conveniente hacer una copia de nuestra plantilla por si las moscas... ;)

Los pasos que cito a continuación son teniendo en cuenta que el punto de partida sea una ROUNDERS 4 sin modificaciones en las sidebars, es decir, una ROUNDERS nativa o al menos lo más posible en la estructura.

Lo primero que vamos a hacer es cambiar ciertos parámetros de la anchura total del blog. Buscamos en nuestra plantilla este código:

#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}

Cambiamos el valor 740 por 995

Justo a continuación encontraremos este otro fragmento:

#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url
("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

En la linea resaltada añadimos 15px de manera que nos quedará así:

margin:15px 0 0 15px;

Seguimos bajando por la plantilla y un poco más abajo encontraremos esto:

#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Justo detrás añadiremos esto:

#newsidebar-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrap1 {
background:$mainBgColor url
("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

#newsidebar-wrap2 {
background:url
("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
padding: 10px 0 8px;
}

Al haber variado los tamaños y teniendo en cuenta que esta plantilla tiene los bordes redondeados tendremos que sustituir las imágenes para los bordes del header y del footer.

Buscamos la primera sección :

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor url
("http://www.blogpulp.com/imagehost/images/1008314701.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url
("http://www.blogpulp.com/imagehost/images/196653871.gif") no-repeat left bottom;
padding:0 15px 8px;
}

Las líneas en rojo son las nuevas imágenes que tendremos que poner en lugar de las de la plantilla original.

Hacemos exactamente lo mismo con la siguiente sección:

#footer-wrap2 {
background:$titleBgColor url
("http://www.blogpulp.com/imagehost/images/1008314701.gif") no-repeat left top;
padding:8px 0 0;
color:$titleTextColor;
}
#footer {
background:url
("http://www.blogpulp.com/imagehost/images/196653871.gif") no-repeat left bottom;
padding:8px 15px 8px;
}

Bueno, ya queda poco... ;)
Buscamos esta sección y añadimos la linea en rojo:

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #newsidebar-wrap,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}

Unas líneas más abajo encontraremos el ancho del #outer wrapper que hay que sustituir por 995 pixels, así que nos quedará de esta manera:

body#layout #outer-wrapper {
width: 995px;
}

Ya sólo nos queda un paso por dar. Buscamos esta sección:

<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>

<div id='sidebar-wrap'>

y justo encima ponemos todo esto:

<div id='newsidebar-wrap'>

<div id='newsidebar-wrap1'><div id='newsidebar-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div></div>

Con esto ya debería de estar todo perfectamente. Ahora tan sólo nos queda guardar y una vez comprobado que no hay errores, ir a la plantilla de diseño y colocar los widgets, códigos... etc que deseemos para adecuar nuestro blog al nuevo estilo.

Si tenéis alguna duda o algo no va bien (exceptuando erratas que puedan haber surgido) podeis revisar paso a paso el proceso en Tips for New Blogger.

Plantillas Neo abiertas al público

2007-06-09T02:37:00.000+02:00

Finalmente los chicos de Hackosphere han decidido compartir de manera gratuita su sistema de plantillas NEO. Si aún estás construyendo tu blog o bien no tienes reparos en hacerle un buen tuneo no pierdas la oportunidad de poseer una de las plantillas más exclusivas y vistosas disponibles para Blogger. Para ver una previsualización de tu blog bajo este sistema no tienes más que introducir la URL de tu página en la siguiente dirección. Si finalmente decides pasarte a este sistema, descárgate la plantilla desde aquí.

Zona de Pruebas :: Rounders Template

2007-03-02T01:44:00.000+01:00

Disponible para descarga una nueva plantilla para uso y disfrute general

--------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
3 Column update by: Hoctro
Re Updated by: Zona de Pruebas
----------------------------- */

Características principales:

- Tres Columnas laterales (dos estilos)
- Categorías tipo "etiquetas" en la cabecera
- Categorías Multi Estilo
- Snap integrado
- Emoticonos
- Posts expandibles - Código de autoinstalación de Widgets
- Posibilidad de introducir código en la cabecera, las columnas laterales, el pie de la página y las zonas superior e inferior de los posts
- Dropcaps: Primera letra del post de mayor tamaño
- Bloques de citas: Personalizable desde el panel de Blogger
- Iconos de navegación
- Barra de navegación de Blogger oculta
- Comentarios con color: Personalizables desde el panel de Blogger

Vista previa

[DESCARGA]

Plantilla Zona de Pruebas

2007-02-28T01:17:00.000+01:00

Me he animado a formar una plantilla con la mayoría de los trucos que hemos ido viendo aquí, excepto aquellos que requieren personalizar para cada blog (ya que muchos de ellos basan sus códigos en la URL de tu blog o alguna característica concreta de tu plantilla).

Las características que integra la plantilla son las siguientes:

- Dos columnas laterales
- Categorías con diferentes Estilos
- Posts expandibles
- Código de autoinstalación de Widgets
- Posibilidad de introducir código en la cabecera, las columnas laterales, el pie de la página y la zona superior a los posts
- Snap integrado
- Emoticonos :

) o :-)  
:( o :-( 
:P o :-P 
:D o :-D 
:$ o :-$ 
;) o ;-)

- Dropcaps: Primera letra del post de mayor tamaño
- Bloques de citas: Personalizable desde el panel de Blogger (colores y fuentes)
- Iconos de navegación
- Barra de navegación de Blogger oculta
- Comentarios con color: Personalizables desde el panel de Blogger (colores y fuentes)

pincha en la imagen para una vista previa de la plantilla

[Descarga la plantilla]

Modificar el ancho de la plantilla, tercera columna

2007-02-21T12:58:00.000+01:00

La modificación del ancho de la plantilla puede traer a veces consecuencias irreparables y que a la larga nos puedan dar problemas, así que aunque siempre es recomendable el guardar la plantilla antes de empezar a cambiarla, en este caso aconsejo que guardéis la copia durante bastante tiempo ya que los problemas derivados de modificar los anchos y tamaños de las zonas de la plantilla pueden no ser visibles a corto plazo (textos que ya no encajan, imágenes que quedan cortadas.. etc). De todos modos, la mayoría de las veces no da problemas ni a corto ni a largo plazo y sin embargo nos da muchas ventajas, como el poder incluir una tercera columna en el Blog ya que muchas veces, al añadir widgets, imágenes y scripts... la columna lateral queda un poco recargada y resulta poco cómoda. Los pasos que os voy a contar son los que he hecho yo ~~sobre esta plantilla~~, pero no pueden diferir demasiado en la mayoría de las plantillas que ofrece blogger.

Vamos a tener que bucear un poco por la plantilla y aprender para que vale cada una de las áreas del blog y familiarizarnos con ellas.

Las plantillas tienen varias áreas diferentes con sus medidas predeterminadas para que encajen y sean visibles. Estas áreas son:

- Outer Wrapper: Podemos decir que es la página en si, ya que todos los elementos tienen que caber dentro de ella así que el ancho de este área tiene que ser suficiente para que quepan el resto de secciones del blog. En esta plantilla el ancho en pixels era de 660 px

- Header Wrapper: La cabecera. En este caso también es de 660 px

- Main Wrapper: Es el contenido del Blog en si, la columna central donde irán los posts. Aquí tenía un ancho de 410 px ( a veces insuficiente para poder introducir vídeos, imágenes... etc)

- Sidebar Wrapper: La Columna lateral, que era de 220 px

Estos son los elementos que habrá que modificar pero siempre teniendo en cuenta que la suma de Columnas laterales + Contenido sea menor al Outer Wrapper. (Ojo con los paddings, ya que también suman)

Empecemos... si vais a la modificación de HTLM de vuestra plantilla, vereis que casi al principio hay un área donde están definidos todos estos parámetros. Más o menos así:

Aquí es donde se definen los elementos de la página con lo que para modificar los anchos no tenéis más que cambiar el valor de pixels en width. La mayoría hacemos esto para añadir una tercera columna con lo que vamos a ello. Primero tenemos que definirla. Lo más cómodo es copiar el código de la que ya hay y pegarlo justo debajo, pero hay que cambiarle el nombre así que por ejemplo la llamaremos :

#sidebar2-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ahora ya tenemos definida la segunda columna lateral.. luego entraremos en los tamaños. El segundo paso es ir a otra zona de nuestra plantilla (en este caso es mejor trabajar sin expandir los widgets, para no liarnos)

Vamos a buscar un código parecido a este:

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
.
.
Aquí dentro estarán los WIDGETS que ya hay en esta columna
.
.
</b:section>
</div>

Copiamos todo el código y nos cargamos lo que hay entre las partes en negrita (son los widgets que hay en esa columna y no podemos duplicarlos)

Ahora lo renombramos para que se identifique con la segunda barra lateral y nos quedará este código:

<div id="sidebar2-wrapper">
<b:section class="sidebar2" id="sidebar2" preferred="yes">
</b:section>
</div>

Ahora viene otra cuestión importante. Depende de donde coloquemos este código, la columna lateral 2 se ubicará en diferentes zonas del blog así que si lo que queréis es tener una columna lateral a cada lado de los posts debereis pegar este código ANTES del código para los posts (sería el que empieza como (div id="main", o "content"... etc). Si quereis las dos barras una junto a la otra podéis pegar el código a continuación del código de la Sidebar que ya teníamos... espero que se entienda...

Por último y casi lo más importante, hay que definir los anchos de cada área para que no se superpongan unos sobre otros. En mi caso, los anchos han sido los siguientes: (evidentemente a día de hoy... pero quien sabe mañana.. ;) )

Header-Wrapper: Lo he dejado como estaba, pero seguramente lo cambiaré más aelante para que el título no quede tan pequeño... pero esto es a gustos.

Outer Wrapper: Lo he llevado hasta 860 px

Main - Wrapper: Lo he aumentado un poco, hasta 450 px

Sidebar-Wrapper: La he estrechado de 220 px a 150 px

Sidebar2-Wrapper: Idéntica a la anterior, pero le he añadido 30px de padding para que haya un poco de separación entre ella y el contenido del blog... es decir, esto:

#sidebar2-wrapper {
width: 150px;
float: left;
padding: 30px;
text-align:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Las líneas en rojo son las que he añadido a mayores.

Esta explicación es válida para plantillas de base Minima, pero el método es similar para todas ellas, aunque las hay que es más complejo.

Beatiful Beta Auto Widget Install

2007-02-21T12:25:00.000+01:00

Esta herramienta, además de ser muy pero que muy fácil de instalar en nuestra plantilla nos la dejará lista para poder luego meterle mano con los muchos widgets que Beatiful Beta oftrece, entre los que recomiendo el de "Últimos Comentarios" y "Buscador" que pondré aquí más adelante.

Lo único que deberemos hacer es introducir una línea de código enre los HEADS de la plantilla.

La cosa debería quedar algo así:

<head>
.
.
.
.
.
<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>
.
.
.
</head>

Guardad vuestra plantilla y ya la teneis lista para acceder a los widgets de Beatiful Beta, que repito, algunos son realmente interesantes, como por ejemplo el Buscador, los Últimos Comentarios y los Posts Recientes. Todos estos Widgets los podéis encontrar aquí, y una vez introducida la lína de código no tendréis más que pulsar en el botón y esperar a que acabe el proceso. Para evitar errores, es recomendable que tengáis iniciada la sesión en Blogger. Después, como siempre, podréis cambiar y retocar el código a vuestro gusto.

Añadir widgets en cualquier parte

2007-02-01T11:31:00.000+01:00

Blogger viene ahora con un intuitivo sistema para añadir elementos en la plantilla sin tener que bucear entre líneas de aburrido e incomprensible código. Sin embargo a veces nos apetece poner scripts, imágenes o lo que queramos en zonas que Blogger no permite. Estas zonas suelen ser la cabecera del blog y la columna de los posts.
Para poder poner códigos, imágenes, scripts de títulos y citas aleatorias y más cosas que más adelante veremos, lo primero es decirle a blogger que nos lo permita. Para ello vamos a la plantilla y hacemos una copia de la misma por si luego tenemos problemas.
Primero veamos como añadir código en la cabecera (Header). Buscamos en la plantilla una línea de código como esta:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Y la sustituimos por esta otra:

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>

De esta manera ahora podremos añadir hasta 5 widgets en la cabecera y además nos lo mostrará desde la pantalla de diseño.

Ahora hacemos lo mismo en la zona de Posts (Main). Buscamos la siguiente cadena:

<b:section class='main' id='main' showaddelement='no'>

y la sustituímos por esta otra:

<b:section class='main' id='main' maxwidgets='5' showaddelement='yes'>

Ahora tenemos habilitados hasta 5 widgets para ubicar justo encima de los posts (sólo del primero mostrado, no uno encima de cada post).