Plantilla Zona de Pruebas

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]

Muestra tus categorías en diferentes estilos

Existen multitud de códigos, widgets, scripts... etc que permiten mostrar las categorías de tu Blog con distintas apariencias. Algunas permiten mostrarlas como un menú, otras permiten colgar una nube de etiquetas en el blog en las que cada una de las categorías tiene un tamaño de letra diferente en función de los posts que se alojan en ellas. Además, tampoco está nada mal el sistema que nos trae Blogger por defecto, en el que vemos cada categoría con el número de posts relacionados. Pero mucho mejor que todo esto, es contar con todos esos estilos a la vez. Eso es lo que vamos a aprender en este post y como es habitual en este blog, no va a ser demasiado complicado :P ... si no, yo tampoco la habría logrado.

Antes de empezar tenemos que asegurarnos de que no haya un sistema de categorías previamente instalado, así que iremos a la plantilla de diseño y borraremos el sistema actual de categorías. Una vez hecho esto, nos iremos a la plantilla y buscaremos la etiqueta de cierre de uno de los widgets de nuestra barra lateral </b:widget> (yo no me preocuparía de buscar un lugar idóneo de momento, ya que luego podremos moverlo facilmente desde la Plantilla de Diseño). Justo a continuación pegaremos este código:

<!-- Multi-style labels - zoom, menu and list styles -->
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<h2>Multi-style Labels</h2><br/>
<a href='javascript:void' title='Switch to List' onclick='javascript:linkStyle();'>
<img src='http://www.anniyalogam.com/widgets/list.jpg'/></a>
<a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'>
<img src='http://www.anniyalogam.com/widgets/menu.jpg'/></a>
<a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'>
<img src='http://www.anniyalogam.com/widgets/zoom.jpg'/></a>
<b><a href='http://hackosphere.blogspot.com/2006/09/multi-style-labels-widget-for-blogger.html'>?</a></b><br/><br/>

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > max)
max = <data:label.count/>;
if (<data:label.count/> < min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 100 + (delta * 100) / (max - min);
display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>";
</b:loop>

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function menuStyle() {
var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";
<b:loop values='data:labels' var='label'>
display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";
</b:loop>
display = display + "</select>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function linkStyle() {
var display = "<ul>";
<b:loop values='data:labels' var='label'>
display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";
</b:loop>
display = display + "</ul>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

// set default to zoom style
zoomStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Guardamos la plantilla y nos vamos a la plantilla de diseño para ubicarlo en el lugar que más nos guste.

Así de sencillo resulta ;) Ya tenemos instalado el nuevo sistema de categorías y ya sólo nos quedará personalizarlo un poco. Veréis que desde la plantilla de diseño no nos deja cambiar el título del Widget y por defecto, está en inglés. Para cambiar esto y un par de cosas más tendremos que hacerlo directamente sobre el código que hemos pegado.

Para cambiar de Multi-Style Labels a lo que queramos.. por ejemplo: Categorías, tenéis que buscar esta línea, justo al comienzo del widget:

<h2>Multi-style Labels</h2><br/>

También podemos aprovechar para cambiar los textos de los botones para cambiar de estilo así que busca en el código las siguientes frases y las cambias por las que quieras:
"switch to menu", "switch to list", "switch to zoom" y "select a label"

Como tantas otras cosas... se lo debemos todo a Hackosphere

Posts Expandibles (peekaboo)

Sin duda uno de los hacks para blogger más apetecibles. Con él conseguiremos ver de una manera muy limpia todos los posts de una categoría sin tener que leer el post completo. Gracias a este sistema veremos sólo los títulos de cada entrada, pero veremos [+/-] al lado de cada uno de los títulos. Si queremos leer alguno no tenemos más que pinchar ahí y veremos como se expande el post y con un nuevo click, como se retrae. Para poder usar este truco en nuestro blog tendremos que añadir unas cuantas lineas de código en diferentes partes de nuestra plantilla.

Lo primero que vamos a hacer es una copia de la plantilla para evitar problemas ya que no es difícil equivocarse al pegar los códigos y luego se puede hacer casi imposible localizar el error. Una vez hecha la copia, buscamos la etiqueta de cierre HEAD, que a estas alturas ya debe estar bastante recargada la pobre... :D Justo debajo del cierre pondremos el siguiente script:

<script type='text/javascript' src=
'http://www.anniyalogam.com/widgets/hackosphere.js' />

Después tendremos que buscar una cadena en nuestra plantilla. Tendreis que ir con cuidado para no cometer errores ya que hay que meter código en medio del código ya existente y un salto de línea puede echar al traste con todo el truco. Copiad las zonas en rojo y las copias exactamete igual que en el ejemplo. Después guarda los cambios y reza para que no hayas hecho nada mal.. ;), seguro que no.

Gracias a Hackosphere por el truco y a Gem@ por la simplificación


IMPORTANTE: Este truco requiere una actualización. Si es la primera vez que lo vas a utilizar o bien estás teniendo problemas de funcionamiento, por favor, échale un vistazo a este otro post.

Últimos artículos por categoría

Una buena alternativa al código de Últimos Artículos con un par de diferencias clave que harán que uséis uno u otro sistema. En este nuevo código no podremos ver las primeras líneas del post como hasta ahora, pero a cambio nos permite mostrar por orden cronológico los posts que deseemos organizados en función de las categorías que hemos creado. Para introducir este nuevo código deberemos tener bastante cuidado ya que hay que introducirlo exactamente entre dos etiquetas "b:widget" de nuestra plantilla y es fácil equivocarse. No hay que preocuparse entre que Widgets meterlo ya que después podremos moverlo de un sitio a otro desde la página de diseño de nuestro panel de Blogger sin tener que andar copiando y pegando códigos. El código completo lo podeis copiar directamente desde aquí, pero una vez introducido en nuestra plantilla tenemos que cambiar un par de cosas para ponerlo a nuestro gusto:

Buscamos en el código esta sección:

ar homeUrl3 = "hoctro.blogspot.com";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

Las partes coloreadas son las que deberemos cambiar por nuestra página, el número de posts por categoría que vamos a mostrar y el número de categorías que se mostrarán.

Además, este script sólo mostrará los posts de todas las categorías en la página principal, pero si seleccionamos una categoría en concreto, o bien visitamos un artículo concreto, mostrará sólo los artículos etiquetados en esa categoría/s.

He optado por no ponerlo en esta página por una sencilla razón, y es que , como ocurre con muchos scripts, tiene problemas con los acentos con lo que las categorías se muestrarn con errores tipográficos. Si quereis verlo en funcionamiento podeis pasaros por Manda Carallo.

Este truco es obra, una vez más, de Hoctro

Pon color en los comentarios

Este código pretende darle un poco de vidilla a la plantilla de comentarios de tal manera que se pueda poner un poco de color en ellos. El código original es de Vivek Sanghi, pero podéis encontrar el código y una buena explicación en Gem@BLOG. Lo único que deberemos hacer en este caso es localizar en nuestra plantilla la seccion de Comentarios:

/* Comments ----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted $borderColor;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em; margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
margin:0; padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
margin:0; padding:0px 0px 0px 20px;
}
.comment-body-author p {
font-size:100%; margin:0 0 .2em 0;
color:#000000; text-decoration:bold;
}
.comment-footer {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}


Y sustituirlo por este otro:
/* Comments
----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted #99bb99;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:#CCFFCC; /*comment header background color (comment author name)*/ url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em;
margin:.5em 0 0;
padding:0 0 0 20px; font-weight:bold;
}
.comment-body {
background:#99FFFF; /*Reader comment background color*/
margin:0;
padding:7px 7px 7px 7px; /*Modified padding values*/
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author
{
background:#cccccc; /*The author comments background color.*/
margin:0;
padding:7px 7px 7px 10px; /*Modified padding values*/
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#6728B2; /*The author comments text color.*/
text-decoration:bold;
}
.comment-footer {
background:#CCFFCC; /*Comment footer background color (comment permalink)*/ margin:0 0 .5em;
padding:0 0 .75em 20px; color:#996;
}
.comment-footer a:link {
color:#996; }
.deleted-comment {
font-style:italic; color:gray;
}

El código está copiado exactamente igual de tal manera que las áreas en negrita se corresponden con los colores para la cabecera del comentario, el cuerpo y el pie. Estos valores se pueden cambiar por los que deseemos para darle una apariencia única a nuestros comentarios. A modo de aportación, añadiré que yo encuentro muy farragoso el hecho de tener que localizar el código de color, copiarlo y pegarlo cada vez que queramos cambiar los colores, ya que no siempre nos van a convencer las combinaciones resultantes o tal vez las queramos cambiar a menudo... ;) Así pues, podemos optar por esta otra alternativa, que no es otra cosa que definir cada color como una variable para que blogger nos la permita cambiar desde la pestaña "fuentes y colores".

Localizamos la seccion Variable Definitions que encontraremos en la zona superior de nuestra plantilla y añadimos tres nuevas variables, una para el encabezado, otra para el cuerpo y otra para el pie:

/* Variable definitions
====================
<Variable name="coment1color" description="color de cabecera del comentario"
type="color" default="#fff" value="#00FF80">
<Variable name="coment2color" description="color de cuerpo del comentario"
type="color" default="#fff" value="#99C9FF">
<Variable name="coment3color" description="color de pie del comentario"
type="color" default="#fff" value="#cc0000">

Ahora sustituímos los códigos de los colores en negrita del código por
$coment1color, $coment2color y $coment3color

De esta manera, si vamos a "Fuentes y Colores" en el diseño, podremos cambiar los parámetros de cada color siempre que queramos.


Actualización: ;) como podréis ver, me he comido unas cuantas varibles de color... es lo que tiene hacerlo sobre la marcha... :) en fin, en realidad son 5 variables a definir si es que queremos tener todo bajo control así que deberemos crear una línea para cada una de la misma manera que hicimos antes.

Emoticonos en el Blog

Una manera sencilla de darle un poco de vida a tus posts es la inclusión de emoticos, o smilies... Existen diferentes maneras de hacerlo, todas ellas más o menos complicadas, pero sin duda, esta que os voy a comentar es a prueba de tontos... sin ofender... que yo también busco siempre cosas sencillas. Este truco nos lo ofrece The Last Word, uno de los mejores Blogs de Hacks que podeis encontrar.

Lo único que debéis hacer es copiar el código que os ofrecen en la página y pegarlo justo encima del cierre de la etiqueta HEAD del blog como ya hemos hecho más veces.

A partir de este momento, el script se encargará de buscar en vuestros posts los caracteres que sustituirá por los emoticonos.

Estos son las combinaciones que reconoce el script:

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

Ponle imágenes a tus vínculos

Un servicio con el que podremos hacer que los vínculos y enlaces de nuestro blog se vean en una pequeña ventana al pasar el ratón sobre ellos. No es un truco o widget propiamente dicho, sino un servicio externo que podemos poner en nuestro blog de manera muy sencilla. El servicio se llama Snap y es algo bastante popular en la blogosfera. Cuenta con bastantes detractores, pero al igual que es fácil ponerlo, es fácil quitarlo con lo que no cuesta nada probarlo. Lo único que tendremos que hacer es pasarnos por la página de Snap en la que mediante unos pasos nos proporcionarán un código que deberemos poner en nuestra plantilla. Desde la propia página nos ofrecen un sencillo manual de instalación, pero resumiendolo todo a un sólo paso, se trata de pegar el código justo encima del cierre de la etiqueta HEAD de nuestra plantilla.

<head>
.
.
.
.
.
Insertar Código
</head>

Modificar el ancho de la plantilla, tercera columna

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

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.

Ocultar barra de Navegación

Un sencillísimo truco para que la bara de navegación de Blogger (NavBar) sólo sea visible cuando pasemos el cursor por encima. Esto le dará a tu blog un aspecto mucho más limpio.

Ve a la edición HTLM de tu plantilla y busca la siguiente cadena:

/* Use this with templates/template-twocol.html */

Justo debajo añade estas dos líneas:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Guarda tu nueva plantilla y listo, a partir de ahora tu NavBar sólo aparecerá cuando la necesites.

No en todas las plantillas vais a encontrar la línea que nos sirve de referencia, pero no hay problema, otro sitio válido para colocar el código y que es de fácil localización es justo encima de Variable Definitions

Gracias a Bloggin Secret por este truco

Crear bloques de citas

En muchos blogs habreis visto que los bloques entrecomillados tienen una apariencia única y destacan completamente con respecto al resto del texto. Para poder hacer algo así en nuestro blog tenemos que hacer una serie de cambios en la plantilla, muy similar al truco de las "dropcaps" .
Necesitamos definir el bloque con lo que añadiremos este código en la zona CSS de la plantilla.

.pullquote {
width: 15%;
background-color:$pullquoteBgColor;
background-image: url(http://home.planet.nl/~hansoosting/images/quotes_grey.gif);
background-repeat: no-repeat;
color:$pullquoteTextColor;
float: right;
border:1px solid $borderColor;
font-weight:bold;
line-height:120%;
padding:40px 10px 10px 10px;
margin-top:10px;
margin-left:10px;
}

Para modificar a gusto de cada uno el estilo, deberemos definir los colores de cada uno de los parámetros en nuestra plantilla (pullquoteBgColor, borderColor y pullquoteTextColor). Todas las variables se definen en nuestra plantilla. Para encontrarlo hay que buscar este encabezado de texto:

/* Variable definitions
====================

A partir de ahí, copiamos la estructura de una variable y ponemos por ejemplo:

(Variable name="pullquoteBgColor" description="Color de fondo para cita"
type="color" default="#fff" value="#ffffff")

donde añadimos el color que queremos usar. Haremos lo mismo para cada una de las variables o bien, la manera más vaga y directa es sustituir esas variables en el código por otras ya usadas en la plantilla. También podemos usar una imagen distinta para las "comillas", como siempre, deberemos subir nuestro diseño a una página externa para poder luego usarla.

Ahora, cuando estemos escribiendo una entrada y queramos entrecomillar un bloque, en lugar de usar (blockquote)(/blockquote) usaremos :
(span class="pullquote") texto (/span)

Ejemplo:

También podemos usar una imagen distinta para las "comillas", como siempre, deberemos subir nuestro diseño a una página externa para poder luego usarla.

al mismo tiempo, se pueden definir diferentes parámetros para cambiar la apariencia del bloque. En este ejemplo se ha ensanchado el bloque y lo he alineado a la izquierda. Para controlar esos cambios no tenéis más que cambiar el código donde pone "width" y "float" (en este caso 50% y left)

Una cosa más, en la que ya no caía y creo que vale la pena comentar:
El hecho de definir cada una de las variables al estilo blogger, es que una vez terminado, podremos cambiar la apariencia del color de fondo, texto... etc con tan sólo ir a la página de Diseño en la opción "colores y fuentes".

Una vez más, este truco se lo debemos a BeatifulBeta.

Iconos de Navegación

Podemos sustituir los links que nos da blogger por unos iconos de navegación para ir a la página principal, ver siguientes posts o ir a anteriores. Para ello tendremos que hacer una serie de cambios en la plantilla.

Para poder trabajar en ella tendremos que marcar la casilla de "expnadir widgets" y buscamos este código en ella:

<b:includable id='nextprev'>

y reemplazamos todo el código que hay entre

<b:includable id='nextprev'>

....

</b:includable>

por este otro:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/left.gif'/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/right.gif'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/home.gif'/></a>
</div>
<div class='clear'/>
</b:includable>

A partir de ahora los links de blogger quedarán sustituídos por estos iconos:

Además, si queremos que tambien sean mostrados en la parte superior de los posts, no tendremos más que buscar un código y añadir una línea. (añadir la línea en rojo)

<b:includable id='main' var='top'>
<div id='blog-posts'>
<b:include name='nextprev'/>

Ya está listo, a partir de ahora tendréis unos iconos tanto en la parte inferior del blog como en la parte superior para la navegación entre "home", "olderposts" y "newerposts".
Por supuesto puede ser personalizado al gusto de cada uno si sustituímos las URL de las imágenes que hay incluidas en el código por unas imágenes hechas a nuestra medida.

Gracias a Hoctro por este hack

Cambiar la imagen de fondo

Esto no es que pueda considerarse un truco muy complejo, pero a más de uno le puede venir bien para personalizar el blog.

Vamos a la plantilla y buscamos el siguiente código:

body {
background:$bgcolor;

Y lo sustituimos por este otro

body {
background:$bgcolor url("URL DE LA IMAGEN QUE QUIERAS DE FONDO");

sencillo, eh?
;)

Imágenes aleatorias en la cabecera

En relidad este pequeño truco vale tanto para imágenes como texto, pero normalmente es el tema de poder situar una cabecera aleatoria para el blog para lo que más se suele usar este tipo de scripts. Este truco consta de dos partes. Un primer script que colocaremos por ejemplo en la cabecera y justo debajo la segunda parte del código.

Evidentemente tendremos que tener al menos un par de imágenes preparadas que tendremos que subir a la red. La primera vez que usé este truco usé a blogger como host de las imágenes subiéndolas en un post y luego copiando el código, pero no se por qué, ahora con la nueva versión de bloger eso no funciona así que las podremos subir a imageshack o cualquier otro servicio de hospedaje de imágenes.

Lo primero que vamos a hacer es borrar la cabecera actual del blog para lo cual buscaremos en la plantilla un código más o menos como este:

<b:widget id='Header1' locked='true' title='Titulo del Blog (cabecera)' type='Header'/>

Eliminamos esa línea con lo que ya no se mostrará el título del blog en la cabecera. Ahora es el momento de ir a la página de diseño e introducir en la cabecera este elemento como HTML/JavaScript:

<!-- CODIGO DEL SCRIPT DE IMAGEN ALEATORIA -->
<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>
<!-- FIN DEL SCRIPT DE IMAGEN ALEATORIA -->

Guardamos los cambios y añadimos la segunda parte del código de la misma manera, pero asegurándonos de que quede justo debajo del anterior.

<!-- PARTE II: SCRIPT IMAGEN ALEATORIA -->
<script language="javascript" type="text/javascript">
var randHdr = randRange(1,3);

if (randHdr == 1) {
document.write('<img src="URL IMAGEN 1">')
} else if (randHdr == 2) {
document.write('<img src="URL IMAGEN 2">')
} else if (randHdr == 3) {
document.write('<img src="URL IMAGEN 3">')
}
</script>

<!-- PARTE II: FIN DE SCRIPT PARA IMAGEN ALEATORIA -->

Sustituímos las zonas coloreadas de rojo por la direccón de la imagen que hemos subido y voilá. Ya tenemos una cabecera con imagen aleatoria en el blog.

Si queremos añadir más imágenes tenemos que ir añadiendo líneas de código para cada una de ellas y poner el número total de ellas en el valor randRange(1,nºtotal de imágenes)

Añadir widgets en cualquier parte

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).

Cuenta Atrás

Un pequeño script para situar en la plantilla una cuenta atrás para lo que queramos. En este caso son los días que faltan para una boda, pero se puede cambiar para lo que sea. El código es el siguiente:

<script languaje="javascript">

//cambiar el texto

var before="nuestra boda"

var current="Hoy es nuestra boda!"

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec" )



function countdown(yr,m,d){

var today=new Date()

var todayy=today.getYear()

if (todayy < 1000)

todayy+=1900

var todaym=today.getMonth()

var todayd=today.getDate()

var todaystring=montharray[todaym]+" "+todayd+", "+todayy

var futurestring=montharray[m-1]+" "+d+", "+yr

var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1)

if (difference==0)

document.write(current)

else if (difference>0)

document.write("Faltan "+difference+" días para "+before)

}

//cambiar la fecha

countdown(2007,6,16)

</script>

Los parámetros a cambiar son la fecha y el texto que queramos. Para ello ponemos la fecha deseada en donde pone countdown (año, mes, día) y los textos en "var before" y "var current"

Para meterlo en la plantilla no tenemos más que ir a diseño y añadir un elemento HTML/javascript en la zona de la plantilla que queramos

Probando Dropcaps

Inauguramos este blog de pruebas con un pequeño hack que ya tenía ganas de probar, pero que sólo es útil si empiezas de cero un blog ya que si no tendrías que editar todas las entradas para poder verlos. Se trata de un código para que la primera letra del post se vea enorme. El código original lo he sacado de Beatiful Beta, un lugar muy recomendable para sacar jugo a blogger.

El truco viene a ser el siguiente:

Definimos una nueva clase denominada .dropcaps en las definiciones CSS de la plantilla.

.dropcaps { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

En mi caso he cambiado $headerBgColor por $titlecolor ya que la primera variable no está definida en mi plantilla.

el ultimo paso es usar esta línea en todas las entradas del blog:

(span class="dropcaps")D(/spanclass)
Sustituye los paréntesis por ><>


Este ejemplo sería para la letra D. Si lo que queremos escribir en el post por ejemplo sería: Bienvenidos a esta página, la letra que habría que resaltar sería la "B" con lo que el código en modo HTLM sería algo así: (una vez más, recordad lo de los paréntesis...)

(span class="dropcaps")B(/span)ienvenidos a esta página

Gracias a Beatiful Beta por este hack