jesgo23

Listar datos sidebar a dos columnas

2009-05-27T12:13:00.001+02:00

Si tenemos un blog con una sola sidebar una forma de ahorrar espacio al listar enlaces, etiquetas, archivos, etc. es listarlos a dos columnas.

Se puede conseguir fácilmente con muy poco css.

#sidebar .LinkList lu li controla los enlaces.

#sidebar .Label lu li controla las etiquetas.

#sidebar .BlogArchive lu li controla los archivos del blog.

En la plantilla mínima de blogger buscamos Sidebar Content y debajo tendriamos que añadir el siguiente código :


#sidebar .LinkList ul li, 
#sidebar .Label ul li,
#sidebar .BlogArchive ul li{
width: 90px;
float: left;
margin-right: 5px;
display: inline;
}

en cualquier caso lo podemos añadir antes de ]]></b:skin>.

width: 90px; es la anchura de cada columna
float: left; coloca los datos a la izquierda
margin-right: 5px; coloca un espacio de 5px a la derecha de cada columna
display: inline; muestra los datos en linea

Si en nuestra plantilla la anchura de la sidebar es diferente a la de la plantilla mínima (220px) hay que modificar width y margin-right para adaptarla, teniendo en cuenta que el ancho col1 + margin-right + ancho col2 + margin-right debe ser inferior a la anchura total de la sidebar.

Eliminar/Modificar el "Suscribirse a: (Atom)"

2009-05-19T20:20:00.004+02:00

Se trata de suprimir o modificar el "Suscribirse a" que encontramos en la parte final del blog.

Buscamos .feed-links

Suprimir,lo cambiamos por:


.feed-links {
display: none;
visibility: hidden;
}

Modificar, añadiendo un icono rss lo cambiamos por:


.feed-links {
clear: both;
line-height: 2.3em;
padding-left:18px;
padding-top:3px;
background: url(nuestro_icono) center left no-repeat;
}

en nuestro_icono ponemos la dirección de nuestro icono alojada en nuestro alojamiento habitual. Según el tamaño del icono así modificaremos la altura de la línea y el padding.

Sencillo.

Fecha tipo calendario en blogger

2009-05-12T13:05:00.015+02:00

La fecha tipo calendario es una forma más de cambiar nuestra plantilla de una manera más personal.

La que he implementado en mi blog es sencilla sin fondo, aunque ponerle uno es también muy fácil.

1. En Configuración > Formato > Formato de hora cambiamos el formato de la siguiente forma:

2. En Diseño > Elementos de página > Entradas del blog > Editar, desmarcamos la casilla de fecha de publicación:

3. Expandimos la plantilla y buscamos el siguiente código:

<div class="post hentry uncustomized-post-template">

y justo debajo añadimos:


<div class='date'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.timestamp/>&quot;;
if (timestamp != &#39;&#39;) {
var timesplit = timestamp.split(&quot;,&quot;);
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(&quot; &quot;);
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
if (date_dd.substring(0,1) == &quot;0&quot;) {
var date_dd=date_dd.substr(1,1);} 
} 
</script>
<div class='date_d'><script type='text/javascript'>document.write(date_dd);</script></div>
<div class='date_m'><script type='text/javascript'>document.write(date_mmm);</script></div>
<div class='date_y'><script type='text/javascript'>document.write(date_yyyy);</script></div>
</div>

4. Antes de ]]></b:skin> añadimos el css:


.date { width: 60px; 
height: 48px; 
float: left; 
background: url('la imagen de fondo') no-repeat;
}
.date_d {color: #919E7A;  
font-family: Times New Roman;  
letter-spacing: -2px;
display:block;
margin-top:0px;
text-align: center; font-size: 26px;
}
.date_m { display:block; 
margin-top: -9px;
color: #CFCB96;
text-align:center; 
font-size: 15px; 
}
.date_y { display:block; 
margin-top: -2px;
color: #FCAC4B;  
text-align:center; font-size: 12px; 
}

En url('la imagen de fondo') ponemos la dirección url de la imagen de fondo previamente alojada en nuestro alojamiento habitual.

Resumen de entrada con imagen y "leer más"

2009-05-01T19:14:00.009+02:00

Se trata de mostrar el inicio de nuestras entradas con una imagen y el "leer más".

A diferencia del "leer más" habitual, en este caso se incorporará automáticamente a todas las entradas del blog con una imagen que será la primera que hayamos incorporado.

Así mismo al pulsar en "leer más" nos abrirá la entrada completa con los comentarios de la misma forma que ocurre al pulsar en el título de la entrada.

1. Expandimos la plantilla y localizamos <data:post.body/> , lo cambiamos por este código:


<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

2. Ahora colocamos el script. Antes de </head> pegamos:


<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://vietwebguide2.googlepages.com/summary-post-v20-test.js' type='text/javascript'/>

donde summary_noimg es el número de caracteres a mostrar en el resumen de la entrada, cuando no hay imágenes en ella.
summary_img es el número de caracteres a mostrar en el resumen de la entrada, si hay imagen.
img_thumb_height es el alto de la imagen.
img_thumb_width es el ancho de la imagen.

El script está alojado originalmente en Google Pages. Como se sabe Google Pages dejará de funcionar, así que lo más recomendable sería descargar el script y subirlo a nuestro alojamiento habitual.

3. Si queremos adaptarlo al aspecto de nuestro blog añadimos las etiquetas que lo controlan (antes de ]]></b:skin>).


.rmlink{ /* propiedades generales */
...
}
.rmlink a{ /* Propiedades del enlace a simple vista */
...
}
.rmlink a:hover{ /*Propiedades del enlace al pasar el ratón sobre él */
...
}

Visto en Google Adsense for Vietnames

Highlight.js en Blogger. Colores en el código

2009-03-28T19:44:00.027+01:00

Highlight.js nos permite colorear el código que listamos en nuestras entradas, según el tipo de lenguaje.

De esta manera comprendemos más fácilmente los listados de código que instalaremos después en las plantillas ayudándonos en su modificación si fuera necesario.

Demo.

Los pasos son sencillos:

1. Bajamos el fichero zip que contiene los ficheros necesarios (default.css y highlight.pack.js). En la carpeta styles hay otros ficheros css que modifican el estilo, sería bueno hacer pruebas con cada uno de ellos para ver cuál es el que mejor se adapta a nuestro blog. Nos permite bajar también el lenguaje, en Blogger sería suficiente con css, xml y javascript en la mayoria de los casos.

2. Alojamos los ficheros default.css y highlight.pack.js en nuestro alojamiento habitual (últimamente hay problemas con skydrive).

3. Despues de </head> pegamos este código:

<link href='TU_URL/default.css' rel='stylesheet' type='text/css'/>
<script src='TU_URL/highlight.pack.js' type='text/javascript'/>
<script type='text/javascript'>hljs.initHighlightingOnLoad();</script>

TU_URL es la dirección del alojamiento.

Guardamos la plantilla.

4. En la entrada donde vamos a poner el listado del código pondremos:

<pre><code class="LENGUAJE">

AQUI EL CÓDIGO

</code></pre>

cambiaremos LENGUAJE por css, html o javascript dependiendo del tipo de código a listar.

Poner pestañas/tabs en Blogger

2009-03-03T17:27:00.027+01:00

Las pestañas o Tabs son elementos muy útiles en nuestro blog.

Demo.

Las pestañas nos pueden ayudar a mostrar mucha información en poco espacio, por ejemplo en la sidebar, mostrando y ocultando los datos sólo pulsando en ellas. La instalación en Blogger no es díficil.

Estos son los pasos a seguir:

1. Bajamos el fichero zip. En él se encuentran varios ficheros de ejemplos y el javascript (tabber.js) que deberemos alojar en nuestro sitio de alojamiento de ficheros habitual.

2. Antes de </head> añadimos el código del script.

<script type="text/javascript" src="tu_url/tabber.js">
</script>

tu_url es la dirección de tu alojamiento de ficheros.

3. Justo antes de ]]></b:skin> añadimos el css.

/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide { display:none;}

/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {}
.tabberlive { margin-top:1em;}

/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif;}
ul.tabbernav li { list-style: none; margin: 0; display: inline;}
ul.tabbernav li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none;}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover { color: #000; background: #AAE; border-color: #227;}
ul.tabbernav li.tabberactive a { background-color: #fff; border-bottom: 1px solid #fff;}
ul.tabbernav li.tabberactive a:hover { color: #000; background: white; border-bottom: 1px solid white;}

/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {  padding:5px; border:1px solid #aaa; border-top:0;

/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */

/* height:200px; */

/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */

/* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 { display:none;}
.tabberlive .tabbertab h3 { display:none;}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {}
.tabberlive#tab2 {}
.tabberlive#tab2 .tabbertab { height:200px; overflow:auto;}
.tabberlive .tabbertab li{list-style-type:none;background:transparent url(i/b.gif) no-repeat 0 2px;border:0;margin:0 0 1px;padding:0 0 0 15px;}

Guardamos los cambios.

4. En "Elementos de la página" agregamos un nuevo elemento HTML. En él añadimos el siguiente código:

<div class="tabber">

<div class="tabbertab" title="Pestaña1">
Contenido de la pestaña 1.
</div>

<div class="tabbertab" title="Pestaña2">
Contenido de la pestaña 2.
</div>

</div>

Guardamos.

El resultado será una primera pestaña con el texto "Contenido de la pestaña 1" y otra segunda con el texto "Contenido de la pestaña 2". En lugar de texto podemos incluir cualquier elemento (Perfil, últimos comentarios, últimas entradas, etc)

Podemos agregar tantas pestañas como necesitemos siempre que nos entren en el espacio que tengamos disponible, añadiendo este bloque las veces que sean necesarias:

<div class="tabbertab" title="PestañaX">
Contenido de la pestaña X.
</div>

Para adaptarlo al estilo de nuestro blog modificaremos la parte del css.

Visto en BarelyFitz Designs

Convertir foto a dibujo a lápiz con gimp

2009-02-15T16:59:00.006+01:00

Con gimp es fácil convertir una foto a un dibujo a lápiz.

1. Abrimos la foto.

2. Realizamos este camino: Filtros > Detectar bordes > Diferencia de Gaussianas.

Ajustamos Radio 3 a 1.

y el resultado se puede ver arriba.

Cambiando los valores de Radio obtenemos resultados distintos, es cuestión de probar.

s3Slider, otro carrusel de fotos en Blogger

2009-02-11T12:25:00.023+01:00

S3Slider es otro carrusel (slide) para ver una serie de fotos con un texto.

El texto se adapta a los lados, con una descripción de cada foto o elemento. Aquí ya vimos otro carrusel.

Demo.

Estos son los pasos a seguir:

1. Bajamos los ficheros jquery.js y y s3slider.js y los alojamos en nuestro alojamiento habitual.

2. Antes de </head> ponemos:

<script src="TU_URL/jquery.js" type="text/javascript"></script>
<script src="TU_URL/s3Slider.js" type="text/javascript"></script>

3. Después de <body> ponemos:

<script type="text/javascript">
$(document).ready(function() {
$("#s3slider").s3Slider({
timeOut: 4000
});
});
</script>

En timeOut: 4000 modificamos el tiempo en milisegundos que tardarán en deslizarse las imágenes.

4. Ponemos lo siguiente donde queramos poner el Carrusel:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="TU_URL_IMAGEN1" />
<span>TEXTO DE LA IMAGEN1</span>
</li>
<li class="s3sliderImage">
<img src="TU_URL_IMAGEN2" />
<span>TEXTO DE LA IMAGEN2</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

En TU_URL_IMAGENX ponemos la dirección url de nuestras fotos.
En TEXTO DE LA IMAGENX ponemos el texto que describe cada foto.
Añadimos los bloques :

<li class=”s3sliderImage”>
<img src=”TU_URL_IMAGEN” />
<span>TEXTO DE LA IMAGEN</span>
</li>

que necesitemos.

5. Añadimos el css antes de ]]> :

#s3slider {
width: 400px;       /* mismo ancho  que las imágenes */
height: 300px;      /* misma altura que las imágenes */
position: relative; /* importante */
overflow: hidden;   /* importante */
}#s3sliderContent {
width: 400px;       /* mismo ancho que las imágenes */
position: absolute; /* importante */
top: 0;             /* importante */
margin-left: 0;     /* importante */
}
.s3sliderImage {
float: left;        /* importante */
position: relative; /* importante */
display: none;      /* importante */
}
.s3sliderImage span {
position: absolute; /* importante */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* opacidad caja del texto */
-moz-opacity: 0.7;         /* opacidad caja del texto */
-khtml-opacity: 0.7;       /* opacidad caja del texto */
opacity: 0.7;              /* opacidad caja del texto */
color: #fff;
display: none;      /* importante */
top: 0;
/*
si ponemos top: 0;
la caja de texto estará en la parte superior
si ponemos bottom: 0;
la caja de texto estará en la parte inferior
*/
}
.clear2 {
clear: both;
}

Fácil.

Poner foto comentaristas en blogger

2009-02-05T10:08:00.025+01:00

Con esto ponemos la foto de los comentaristas de nuestras entradas.

En otras plataformas es bastante común encontrar plantillas con la foto de los comentaristas de nuestro blog, esa foto es la que se encuentra en el perfil de los lectores. Blogger no contempla esa posiblidad.
Vamos a hacer algunos cambios que nos permitirá tenerlo en Blogger.

1. Descargamos el archivo comment_photos.js y lo alojamos en nuestro servidor habitual.

2. Antes de </head> añadimos este script:


<script src='url_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage =
'url_imagen_sinfoto'
BloggerProfiles.imageWidth = 60;
BloggerProfiles.imageHeight = 75;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author',
1);});
//]]></script>

En url_comment_photos.js ponemos la url donde hemos alojado el fichero . js anterior.
En url_imagen_sinfoto ponemos la url de la foto que hemos elegido para identificar los comentaristas que no tienen foto en su perfil de Blogger.
En BloggerProfiles.imageWidth = 60; ponemos la anchura de la foto.
En BloggerProfiles.imageHeight = 75; ponemos la altura de la foto.

3. Expandimos la plantilla y buscamos la parte siguiente e incorporamos las dos lineas resaltadas en amarillo:


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class='commentphoto' style='float:left;'/>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<div style='clear:both;'/>
</b:loop>
</dl>

Y añadimos este css antes de ]]></b:skin>.


.commentphoto img {
margin: 2px;
}

Visto en Purple Moggy.

Igualar columnas sidebar en blogger

2009-02-04T08:39:00.022+01:00

Se trata de igualar la altura de la sidebar cuando tenemos dos o más columnas.

Desde siempre había querido tener las dos sidebars de mi plantilla de la misma altura ya que como tienen distinto color de fondo parecía que una se quedaba coja respecto de la otra. Al final lo he conseguido usando jQuery.

1. Bajamos el fichero jquery-1.2.6.js y lo alojamos en nuestro servicio de alojamiento habitual.

2. Antes de </head> copiamos el script:


<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script language="javascript">
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".columnas"));
});
</script>

3. Antes de ]]></b:skin> copiamos el css que adapta el estilo de las columnas a nuestro blog, en mi caso es el siguiente:


/* Columnas
---------------------------- */
.columnas {
width:100%;
float:right;
margin: 0px;
padding: 0px;
}

.columnas .widget{
text-align: left;
margin: 3px;
padding: 3px;
}

.columnas h2 span {
color: $sidebarheader;
}

.columnas ul {
list-style:none;
margin-left: 0;
}

.columnas li {
margin:0;
padding-left: 5px;
text-indent:-40px;
line-height:1.5em;
}

.columnas p {
color:#666;
line-height:1.5em;
}

4. Sin expandir artilugios buscamos esto o algo parecido (depende de los widgets que tengamos en nuestras sidebar1 y sidebar2):

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Nube de etiquetas' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Últimas entradas' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Últimos comentarios' type='HTML'/>
</b:section>
</div>

y cambiamos sidebar por columnas, quedando así:


<div class='sidebar-wrapper'>
<b:section class='columnas' id='sidebar1' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Nube de etiquetas' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='columnas' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Últimas entradas' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Últimos comentarios' type='HTML'/>
</b:section>
</div>

Eso es todo. Este truco es muy útil cuando tenemos las sidebars entre dos widebars, como es mi caso en esta plantilla.

Visto en cssnewbie.

Expand/Collapse, Mostrar/Ocultar (2)

2009-01-23T13:23:00.005+01:00

Esta es otra forma de Ocultar/Mostrar, ya vimos otra forma en esta entrada.

Sólo se requiere poner en la entrada, widget, etc. el siguiente código:

<div class="pre-spoiler">
<span style="float: left; padding-top: 2px;"></span>
<input id="xs" value="Ver más" style="margin-left: 50px; padding: 0px;
width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button"> </div>
<div>
<div class="spoiler" style="display: none;">

COLOCAMOS AQUI LA PARTE A OCULTAR

</div>
</div>
</span>

Cambios en el código del botón:

margin-left: 50px; Distancia del botón al borde de la entrada desde la izquierda.
width: 80px; Ancho del botón. Si el texto es más largo hay que aumentar su tamaño aquí.
font-size: 14px; Tamaño de la letra del texto.
font-family: trebuchet ms; Tipo de letra del texto.

Añadir CSS

Para adaptar el botón al diseño de nuestro blog, añadiremos unas líneas en el código CSS de la plantilla antes de ]]>


#boton{
background: #fea502;
color: #000;
padding: 1px;
margin: 0px 0px 0px 3px;
border: 2px solid #6a8e20;
}

background: #fea502; Aquí cambiamos el color de fondo del botón.
color: #000; Aquí cambiamos el color del texto del botón.
border: 2px solid #6a8e20; Aquí cambiamos el grosor, tipo y color del borde del botón.

Fuentes: Trucos Key y El escaparate de Rosa.

Carrusel (Slide) de fotos en Blogger

2009-01-15T14:53:00.042+01:00

En los últimos tiempos se están poniendo de moda las plantillas tipo "magazine" para Blogger; en esas plantillas suele haber un carrusel o "slide" de fotos que gráficamente queda muy bien.

Demo

Me han preguntado como ponerlo en un blog. Vamos a ver como hacerlo.

Primero antes de ]]></b:skin> pegar:


#myslides{background:#2c3133;}
.stepcarousel{position: relative; /*no tocar*/
overflow: scroll; /*no tocar*/
width: 950px; /*Anchura total del carrusel*/
height: 165px; /*Altura total del carrusel */
margin: 0px 14px 5px 14px;
background:#2c3133;
}
.stepcarousel .belt{
position: absolute; /*no tocar*/
left: 0;top: 0;
}
.stepcarousel .panel{ 
float: left; /*no tocar*/
overflow: hidden; /*no tocar*/
margin: 10px 17px ; /*margen de cada foto*/
width:220px; /*Anchura de cada foto*/
background:#202325;
height:140px;
border:1px solid #393f42;
}
.stepcarousel .panel p{
text-align: left; /*no tocar*/
overflow: hidden; /*no tocar*/
margin: 5px 5px ; /*margen de cada foto*/
}
.stepcarousel .panel h2{
text-align: left; /*no tocar*/
height:20px;overflow: hidden; /*no tocar*/
margin: 2px 5px ; /*margen de cada foto*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*no tocar*/
background:#040404; /*fondo de la imagen*/
margin: 10px 10px 10px 10px; /*margen de cada foto*/
padding:0px 0px;
}

Aquí deberiamos modificar ancho, alto, background, etc. para adaptarlo graficamente a nuestro blog.

Segundo, antes de </head> pegar:


<script src='URL TU ALOJAMIENTO DE jquery.js' type='text/javascript'/>
<script src='URL TU ALOJAMIENTO DE slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--sfHover = function() {var sfEls = document.getElementById("menu").getElementsByTagName("LI");var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=" sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" sfhover\\b"), "");}}}if (window.attachEvent) window.attachEvent("onload", sfHover);//--><!]]></script>

Los ficheros .js se pueden descargar aquí.

Tercero, poner lo siguiente donde queramos poner el Carrusel (normalmente estará bien antes de <div id='content-wrapper'>) :


<!-- Casing -->
<div id='casing'>
<!-- Myslides -->
<div id='myslides'>
<script type='text/javascript'>
stepcarousel.setup({galleryid: &#39;mygallery&#39;, //id of carousel DIVbeltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVspanelclass: &#39;panel&#39;, //class of panel DIVs each holding contentpanelbehavior: {speed:500, wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 2, leftnav: [&#39;http://web2feel.com/images/rem1.jpg&#39;, -14, 60], rightnav: [&#39;http://web2feel.com/images/rem2.jpg&#39;, 0, 60]},statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panelscontenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]})</script><div class='stepcarousel' id='mygallery'><div class='belt'><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div></div></div></div></div>

Cambiar YOUR-POST-LINK por la dirección url (enlace) que queramos que se dirija cuando se pinche en la foto.

Cambiar YOUR-POST-TITLE por el título que queramos que salga cuando se pase el ratón por encima.

Cambiar URL_IMAGEN por la dirección de vuestra foto.

Parece más dificil de lo que realmente es. :)

Seguidores en Blogger

2009-01-12T12:07:00.011+01:00

Blogger nos obsequia con un nuevo elemento, "Seguidores". Aparte de la utilidad que para unos será mucha y para otros poca, lo que parece que no gusta es la apariencia, en la mayoria de los casos no se adaptará al estilo de nuestro blog. Vamos a intentar ponerlo a nuestro gusto.

Con la plantilla expandida, buscamos este código:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>

Vamos a cambiar algunas cosas...

1. Eliminar el número de seguidores que aparece con el título.

Buscamos:
<h2 class='title'><data:title/>(<data:totalFollowerCount/>)</h2>

y eliminamos (<data:totalFollowerCount/>).

2. Añadir un icono junto al texto de X Seguidores.

Buscamos:
<div class='followers-canvas profile-link'>
<data:followersFooterMessage/>

justo antes de esa línea podemos añadir la imagen del icono.
<img src='url-imagen-icono'/><data:followersFooterMessage/>

3. Cambiar texto de SEGUIDORES.

Cambiamos <data:followersFooterMessage/> por el texto que nos guste más.

4. Cambiar texto de PARAR SIGUIENTE.

Si ya somos seguidores de un blog en lugar de mostrar el texto "Seguir este blog" nos muestra "Parar siguiente" que equivale a eliminarle de nuestra lista.

Buscamos:
<div class='follow-this profile-link item-control following-stop-following-this'>

En las siguientes líneas cambiamos <data:stopFollowingMessage/> por el texto que nos guste más.

5. Borde,color, fondo de avatar, etc.

Esta parte es donde más adaptamos el elemento a nuestro blog. Guardamos la plantilla y sin expandir la plantilla antes de ]]></b:skin> añadimos:

.follower-img {/*Borde y color de fondo en las imágenes*/
border:1px solid #000;background-color:#fff;padding:2px;margin:0;}

.follow-this {/*Seguir este blog y Parar siguiente*/
text-align:right;}

.follow-this a {color:#7E92A6;font-weight:normal;font-size:8px;}

.follow-this a:hover {font-weight:bold;color:#000;}

.followers-canvas{/*X seguidores*/
text-align:right;}

.followers-grid {/*Ajusta imágenes a la medida de nuestra sidebar:*/
width:170px;margin:0 auto;padding:0;}

Visto en Gem@ y Vagabundia

Emoticones en los comentarios

2009-01-11T12:54:00.011+01:00

Se trata de poner emoticones en los comentarios.

Lo primero que necesitamos es alojar el script en un servidor externo; este y las imágenes utilizadas se encuentran comprimidas en un archivo ZIP que puede descargarse desde aquí.

Segundo y antes de </head> incluimos lo siguiente:


<style type='text/css'>
.comment-body p img {vertical-align: top; padding-right: .3em;}
</style>

Por último al final de la plantilla, justo antes de </body> incluimos:


<b:if cond='data:blog.pageType == "item"'>
<script src='direccion_URL/VEmoticones.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Visto en Vagabundia

Fecha en todas las entradas en Blogger

2008-12-29T11:51:00.005+01:00

Desde hace mucho tiempo buscaba la posibilidad de poner la fecha en todas las entradas de un mismo día y no lo encontraba. Jmiur nos enseña como hacerlo.

Buscamos esto en la plantilla (expandida):


<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Y lo sustituimos por:


<b:if cond='data:post.dateHeader'>
<script>
var ultimaFecha='<data:post.dateHeader/>';
</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

Formulario de comentarios Blogger

2008-09-11T20:22:00.004+02:00

Blogger ha implementado por fin el formulario de comentarios al pie de las entradas, por el momento, a través de Blogger in Draft.

Para hacerlo funcionar primero vamos a "Configuración" de nuestro menú y después a "Comentarios".

En "Ubicación del formulario de comentarios", marcamos "Entrada incrustada a continuación":

Con todo esto el formulario se verá a continuación de todos los comentarios de la entrada en esta forma:

En algunas ocasiones habremos modificado alguna parte de la plantilla sobre todo la parte de comentarios y puede que el formulario no aparezca.

En esos casos hay que buscar esta linea en la plantilla:

<b:include data='post' name='comments' />

e inmediatamente después escribimos la siguiente:

<b:include data='post' name='comment-form'/>

Y grabamos la plantilla.

Visto en: Blogger Buster

Nube de etiquetas en movimiento

2008-09-10T16:08:00.006+02:00

Se trata de cambiar la clásica nube de etiquetas estática por una en movimiento que se mueve según vamos apuntando con el cursor. Ver demo.

1. Buscamos esta línea de código:

<b:section class='sidebar' id='sidebar' preferred='yes'>

2. A continuación de esa línea pegamos el siguiente código (la nube de etiquetas se mostrará al principio de la sidebar, después la moveremos donde queramos):


<b:widget id='Label50' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Para adaptarlos al estilo de nuestro blog, editamos alguna de las partes del código:

* Cambiar el ancho (240px) ,el alto (300px) y el color de fondo de la nube (#ffffff):

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

* Cambiar el color del texto (333333):

so.addVariable("tcolor", "0x333333");

* Cambiar el tamaño del texto (12):

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Visto en: Blogger Buster
Idea original de: Roy Tanck

Añadir otra sidebar

2008-05-31T20:15:00.005+02:00

Si tenemos una plantilla con una sola sidebar quizás en algún momento deseemos tener otra sidebar más si vamos añadiendo muchos elementos de página nuevos. Parece más complicado de lo que realmente es pero hazlo primero en un blog de pruebas o haz una copia de la actual (esto es deseable siempre que metemos mano a la plantilla...)
Vamos a hacerlo en una plantilla "Mínima" así que, en principio, servirá para todas las "Mínimas", aunque con pequeños cambios en los márgenes y los paddings creo que no habrá problemas.

1. Buscamos #outer-wrapper {

Establecemos el ancho (width) que será la suma total de entradas + sidebar1 + sidebar2.


#outer-wrapper {
width: 900px;

2. Buscamos #sidebar-wrapper {


#sidebar-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 */
}

Lo copiamos y, justo debajo pegamos el código que acabamos de copiar. Acabamos de duplicar la sidebar, ahora hemos de cambiarle el nombre y le ponemos, por ejemplo, sidebar2, además necesitamos que "flote" al otro lado, para que las entradas queden en el medio de las dos sidebar, para lograrlo le cambiamos el float, quedaría así:


#sidebar2-wrapper {
width: 220px;
float: 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 */
}

3. Buscamos <div id='content-wrapper'>

Justo debajo de esa línea añadimos el código necesario para que nuestra sidebar se muestre en el blog:


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

Guardamos cambios.
De momento nuestra nueva sidebar está vacía, así que para verla en el blog, hemos de ir a el panel de diseño, y allí veremos que ya es posible añadir nuevos elementos a la sidebar, añadimos uno, guardamos cambios y vemos la nueva sidebar pero se apreciará también, que la distancia de las sidebar a las entradas no es la correcta...
Solucionaremos esto volviendo a la plantilla - html, y añadiendo en #main-wrapper {
un nuevo valor para el margen:
margin-left: 20px;

Calendario archivos Blogger

2008-05-30T21:12:00.005+02:00

Este calendario funcionará como un sistema de archivos mostrándolos como un calendario que, de forma interactiva, permitirá a nuestras visitas navegar entre las entradas de nuestro blog, que serán mostradas por la fecha de publicación.

1. Descargamos el archivo ZIP que contiene los .css y .js necesarios.

2. Alojamos los ficheros contenidos en un alojador de ficheros (por ej. Googlepages).

3. Después de <head> colocamos este código:


<style type='text/css'>@import url(&quot;TU_URL/calendar.css&quot;);</style>
<script src='TU_URL/calendar.js' type='text/javascript'/>
<script src='TU_URL/calendar-es.js' type='text/javascript'/>
<script src='TU_URL/calendar-setup.js' type='text/javascript'/>

4. Activamos el elemento de página "Archivos".

5. Abrimos otro elemento de página HTML donde insertamos el siguiente código:


<div id="calendar-container"></div>
<script type="text/javascript">
function dateChanged(calendar){
if (calendar.dateClicked){
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth()+1;
var d = calendar.date.getDate();
if (m<=9&&d<=9){window.location = "/" + y + "_0" + m + "_0" + d + "_TUBLOG_archive.html";}
else if(m>9&&d<=9){window.location = "/" + y + "_" + m + "_0" + d + "_TUBLOG_archive.html";}
else if(m<=9&&d>9){window.location = "/" + y + "_0" + m + "_" + d + "_TUBLOG_archive.html";}
else window.location = "/" + y + "_" + m + "_" + d + "_TUBLOG_archive.html";
}
};
Calendar.setup(
{
flat : "calendar-container",
flatCallback : dateChanged
}
);
</script>

En TUBLOG ponemos el nombre del blog (sólo lo que está en azul, http://TUBLOG.blogspot.com).

Mensaje invitando a suscribirse

2008-05-14T11:54:00.010+02:00

Vamos a poner un mensaje para mostrar a tus visitas invitándoles a suscribirse a tu blog.

1. Añadimos antes de ]]></b:skin>


/* Animar a suscribirse */
.subscribe_cartel {
background: #ffc url(url_de_la_imagen_de_fondo);
border: 1px solid #a6c4e1;
padding: 5px;
margin: 0 2px;
font-size: 100%;
}
.subscribe_cartel a {
text-decoration: none;
}
.subscribe_cartel a:hover {
text-decoration: underline;
}

Aqui modificamos lo necesario para adaptarlo al estilo de nuestro blog:

background: #ffc url(url_de_la_imagen_de_fondo);
Si no queremos usar una imagen: background: #ffc;

border: 1px solid #a6c4e1;

padding: 5px; margin: 0 2px;

font-size: 100%;

Tamaño del mensaje
Si dejamos el código CSS tal como está, el tamaño del mensaje se adaptará al del lugar donde lo coloquemos. Si, por ejemplo, lo situamos en un elemento sobre las entradas, el mensaje ocupará el mismo ancho que estas, si queremos controlar su anchura, añadiremos width:300px;, o el valor que queramos para el ancho, por ejemplo, justo debajo de .subscribe_cartel {.

2. En un nuevo elemento de página insertamos:


<center>
<div class="subscribe_cartel">
<img src="url_imagen de tu feed"/>
<b>¿Es la primera vez que visitas mi blog?</b>
Quizás deseas suscribirte por
<a href="url_tu feed RSS"> RSS</a> o por
<a href="url_tu feed Email"> Email.</a>
</div>
</center>

En "URL_IMAGEN DE TU FEED" colocaremos la url de nuestro icono de suscripción.
En "URL_TU FEED RSS" la url de Feedburner o del servicio que usemos para facilitar la suscripción. Si no usamos ningún servicio externo, colocaremos aquí el de Blogger: http://Tu_blog.blogspot.com/feeds/posts/default
En "URL_TU FEED EMAIL" la del servicio que usemos para facilitar la suscripción por correo.

3. Guardamos los cambios en el nuevo elemento y lo arrastramos encima o debajo de nuestras entradas; también podemos dejarlo en la sidebar.
Localizaremos ahora nuestro nuevo elemento dentro del código de la plantilla y haremos los cambios necesarios para que solo sea visible en las páginas de archivos y etiquetas, para ello vamos a necesitar expandir los artilugios y seguir las instrucciones que se explican en esta entrada anterior.

Poner fondo transparente a una imagen con gimp

2008-05-13T14:40:00.017+02:00

Algunas veces bajamos una imagen que nos gusta pero que tiene un fondo que no es el que necesitamos en nuestro blog. Con el editor gráfico GIMP es muy fácil poner un fondo transparente a esas imágenes.

1. Abrimos la imagen .

2. Pinchamos con el botón derecho sobre ella y en el menú que se abre, escogemos "Capa" -> "Transparencia" -> "Añadir canal Alfa" (Si la opción aparece deshabilitada, es seguro que la imagen ya tiene aplicado el canal alfa así que continuamos).

3. Seleccionamos las partes de la imagen que queremos que sean transparentes.
Seleccionamos en el menú "Seleccionar" -> "Por color" y vamos haciendo click sobre las partes de la imagen a las que queramos aplicar transparencia. Después de hacer click, en el menú "Editar" seleccionamos "Cortar".
La zona que se va a eliminar, se verá entonces con unos cuadrados grises que la cubren por completo.

Si la imagen tiene más de un color de fondo, hay que repetir los pasos anteriores para cada color.

4. Por último, en "Archivo" -> "Guardar como" guardamos la imagen en un formato que soporte transparencias como GIF o PNG.

Scrollbars

2008-05-07T20:57:00.006+02:00

Una forma sencilla de poner un scrollbar en cualquier parte del blog es insertar esta pieza de código en el CSS de la plantilla, en la que especificaremos el alto (height) y el ancho (width) de la caja de scroll:


.scrollbox {
height:100px;
width:300px;
overflow:auto;
}

Y donde queremos poner el scroll (entrada, lista, vinculos, widgets, etc.) colocamos esto:


<div class="scrollbox">
TEXTO, IMAGEN, LISTA, VINCULOS, WIDGET ...
QUE VAMOS A INCLUIR EN LA CAJA DE SCROLL
</div>

Tutoriales/Hacks/Trucos Blogger

2008-04-20T13:31:00.020+02:00

Completísima lista de tutoriales realizada por Amanda en Blogger Buster, aunque en inglés... Está organizada por categorías.

↓↑ Noticias Blogger

Blogger's bX-codes Blog (and other useful resources)

How to Report bX-Codes to Blogger

Blogger's New Directory of Gadgets and Widgets

A New Interface for Blogger ~~Widgets~~ Gadgets

Scheduled Posts for Blogger Have Finally Arrived

Blogger in 2007: A Year in Review

Does Blogger Leave us Vulnerable to Impersonation?

Using OpenID to Leave Comments on Blogger Blogs

Tell Blogger Which Features You Would Like to Use

↓↑ Dominios

Easily Redirect Readers to your Blogger Custom Domain

A Better Way to Set Up your Custom Domain?

How to Set Up your Free GoDaddy Hosting Account

Create a Redirect Page for your Blog

How to Set Up your Blogger Custom Domain with GoDaddy

How to Set Up your Blogger Custom Domain (All Domain Providers)

Should You Have a Custom Domain for your Blog?

↓↑ Modificaciones generales

Add a "Top of Page" Icon Link

Background Styles for the Minima Blogger Template

How to Add Rounded Corners using CSS

Styling Sections of your Blog with Borders and Backgrounds

Add Style to Search Forms

Styling the Header and Footer Sections

Adjusting Margins and Padding in your Blogger Template

Create a Three Column Blogger Template

Creating a Three Column (or Wide Two Column) Canvas

Essential Tools for Blogger Template Design

A Cheats' Guide to Customizing Blogger Templates (Online Version)

Why Your Blog Design Needs to be Unique

Remove "no-follow" tags from your template

How to Install a Blogger Layout Template using Provided HTML Code

How to use Background Images

Create "Wordpress-Style" Blog Pages

How to Set Up a Test Blog (and why you may want to use one)

Fix your Layout Editor Wireframe (Firefox Layout Problems)

Adjust Padding in Blogger Templates

Adjust Margins in Blogger Templates

How to Hide the Blogger Nav-Bar

Add Background Music to your Blog

Create Classic Blogger Templates with Ease

Rounded Corners for Header and Sidebars

How to Upload Blogger XML (Layouts) Templates

Add a New Widget Section Above your Posts

↓↑ Cabecera/Navegación

Add Icons Beside Navigation Links

The Easy Way to Make a Great Blog Header

What Makes a Great Blog Header?

Create Navigation Buttons for your Blogger Blog

Get a Free Animated Header for your Blog

How to Create a Custom Header

↓↑ Entradas

15 Stylish Ways to Make your Posts Stand Out

How to Create Post Summaries in Blogger

How to Add MyBlogLog Comment Avatars

Customize Block-Quotes in your Posts

Create a "Post-Options" Box Beneath Your Posts

Create a Calendar Widget to Date your Posts

Inline Comments Hack (For Classic Blogger Templates)

Inline Comments Hack for Blogger Layouts (New Blogger)

How to Generate Links to Related Posts

Manually Install Haloscan Comments and Trackbacks

Add "Blog This" Links to Each of Your Posts

Add Social Bookmark Buttons to your Posts

How to Install Haloscan Trackbacks in Blogger Templates

How to use Selective Post Summaries

↓↑ Sidebars

Create a Cross-Fading, Featured Posts Slideshow

Creating a Label/Tag Cloud in your Sidebar

↓↑ Footer

How to Add Three Columns to your Footer Section

↓↑ Feeds y Sindicación

The Stylish Way to Show Off your Feed Count

An Easy Way to Display your Feedburner Subscriber Count

What is Atom/RSS?

Mobilize your Blog with Widsets

All About your Blog Feeds
- Part 1
- Part 2
- Part 3
- Part 4

Enable Per-Post Comments Feeds

Five Ways Feedburner can Help Improve your Readership

Create an Email Subscription Box with Feedburner

Use your Blog Feed to Generate More Traffic

How to Create an Animated Blog Headlines Box

What is a Blog "Feed" and Why Do I Need It?

↓↑ Tutoriales en general

Top 12 Keyboard Shortcuts for Bloggers

Learn About Web 2.0 in Five Minutes

Protect your Email Address from Spam Bots

How Much is Your Blog Worth?

What is a Blog Meme?

How Addicted to Blogging Are You?

↓↑ Imágenes, Iconos y Badges

Fixing PNG Transparency in IE6

Add a "Top of Page" Icon Link

Favicons Made Easy!

Add Stylized Captions to Images in your Blog Posts

A "New Year" Banner for your Blog

A Christmas Banner for your Blog

Problems Uploading Your Images to Blogger? Here's a Solution

Create Screenshots with This Free Tool

How to use Background Images

Free Blog Icon Set Download

Find Free Icons for your Blog with Iconlet

Photoblogging with Flickr

Free Animated Email Icons

Use CSS Styling to Alter Images in your Blog

Create a Favicon for your Blog

Create an Animated Advertising Banner

Looking for Copyright Free Images for your Blog?

↓↑ Etiquetas y categorías

A Drop-Down Menu for your Labels

Show Labels without the Post Count

Control the Number of Posts Displayed on Label Pages

How to Include Technorati Tags at the Bottom of Each Post

↓↑ Ganar dinero con el blog

Feature AdSense in Blogger Post Pages Only

AdSense Beneath Blogger Post Titles (or at end of posts)

AdSense in Blogger Posts (the basics!)

↓↑ Recursos para Bloggers

Blogger Tips at BloggingTips

Backup, Restore or Import Posts using Blogger

101 Excellent Blogger XML Templates (for free download)

Why Traffic, Your Subscriber Count and Money Doesn't Matter

Check your Backlinks with This Free Tool

Creating a Contact Form with WebFormDesigner

Free Web 2.0 Design Tools

5 Best Free File Hosting for your Images and Scripts

A New (Improved) Blog Headlines Ticker

Blog Directories: A Quick Guide to Listing your Blog

Top 25 Blog Directories

Using Stumbleupon for Blog Traffic

Useful Links when Using Blogger

↓↑ SEO y Tráfico

Blogger Generates a Sitemap for your Blog

Optimize your Blogger Template for Search Engines

Optimizing a Blog for Search Engines (Case Study)

Free SEO Stats Display Box

Free PageRank Display Button

Create a Custom Google Search Engine

What are Trackbacks? How do I Use Them?

↓↑ Widgets y Añadidos

Popular Posts (Most Commented) Widget for Blogger

Add a Technorati Link Count Widget to your Blogger Posts

Top Commenters Widget for Blogger

Create a Customized MyBlogLog Recent Readers Widget

A Tabbed Navigation Widget for your Blog (Customizable)

Using a "Tab-View" Widget to Streamline Content

Two New Search Widgets for your Blogger Blogs

A New Style of AddThis Widget for Social Bookmarking your Posts

Making your Links More Attractive with SnapShots

How to Copy Widgets from One Template to Another

Create Your Own Recent Comments Widget

Translate your Blog Using the Google Translator Widget

A "Time of Day" Image Greeting Widget

A Digital Clock Widget for your Blogger Blog

Add a Realtime Clock and Date Widget

Installing the AffiliateBrand Popular Posts Widget

Add a Simple Search Widget

Create a Table of Contents for your Blogger Blog (Widget-Based)

What are Widgets and How do I Use Them?

Periódicamente Amanda actualizará esta lista.

Templates/Plantillas Blogger

2008-04-19T13:15:00.002+02:00

Yomisma de Meta microcosmos nos ha dejado esta lista de enlaces donde podemos encontrar plantillas gratuitas para nuestro blog; el listado es bastante extenso e incluye todo tipo de páginas: desde las que ofrecen unas pocas pero muy originales hasta directorios donde vereis miles de ellas, pasando por entradas de otros blogs con más listados.

Imágenes de los comentaristas

2008-04-18T17:06:00.002+02:00

Se trata de identificar con imágenes nuestros propios comentarios de los realizados por los visitantes. Necesitaremos tres imágenes, uno para nuestros comentarios, otro para los comentarios anónimos y otro para el resto.

Localizamos esta parte del código:
<b:if cond='data:comment.authorUrl'>
...
</b:if>
y la cambiamos por:


<b:if cond='data:comment.authorUrl'>
<!-- autor reconocido -->
<b:if cond='data:comment.author == "mi_alias"'>
<!-- mis propios comentarios -->
<img class='comenta-avatar' src='URL_imagenYO'/>
<b:else/>
<!-- comentarios de los visitantes -->
<img class='comenta-avatar' src='URL_imagenOTROS'/>
</b:if>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<!-- comentarios anónimos -->
<img class='comenta-avatar' src='URL_imagenANONIMO'/>
<data:comment.author/>
</b:if>

Donde mi_alias será nuestro nombre (las mayúsculas y minúsculas son importantes) y URL_imagen serán las direcciones donde hayamos alojado cada una de las imágenes.

Hay ciertos ajustes que pueden hacerse y dependerán mucho de las propiedades CSS de cada blog. Para eso, las imágenes tienen una clase especial llamada img.comenta-avatar y bastaría agregarla a nuestra hoja de estilo para establecer márgenes o cualquier otro detalle:

img.comenta-avatar { }

Otras clases que controlan las propiedades gráficas de esa sección de la plantilla son:

.comment-author {}
.comment-author a {}
.comment-timestamp {}
.comment-footer {}

Visto en Vagabundia

Comentarios diferenciados con colores

2008-04-18T15:17:00.001+02:00

Se trata de colorear los comentarios según si son pares o impares y también los propios del autor del blog.

El código que necesitamos modificar es el contenido en el bloque:

<b:includable id='comments' var='post'>
...
</b:includable>

Estas son las secciones del código que debemos manipular (añadimos la parte en azul):

<b:includable id='comments' var='post'>
...
<dl id='comments-block'>

<!-- ponemos el contador a cero -->
<script type='text/javascript'>var contadorComentarios=0;</script>

<b:loop values='data:post.comments' var='comment'>

<!-- agregamos un bloque para darle un nombre único a cada comentario -->
<div class='' expr:id='data:comment.id'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/> <!-- el texto "dijo..." -->

<!-- el código del contador -->
   <span class='comentacontador'>
      <a expr:href='"#comment-" + data:comment.id' title='Vinculo al comentario'>
         <script type='text/javascript'>
            contadorComentarios=contadorComentarios+1;
            document.write(contadorComentarios)
         </script>
      </a>
   </span>

</dt>

<dd class='comment-body'>
...
</dd>

<!-- establecemos la clase del comentario -->
<script type='text/javascript'>
   ContarC('<data:comment.id/>')
</script>

</div>

</b:loop>
</dl>
...
</div>
</b:includable>

Ahora, agregaremos las propiedades de estilo antes de la etiqueta </head>. Estas, podrán ser muchas y muy variadas, dependiendo de cada plantilla. En mi caso, el código es el siguiente:

<!-- numerar los comentarios  -->
<style type='text/css'>
.comentacontador {          
float: right;
display: block;
width: 50px;
margin-top: -25px;                   /* la posición de los números    */
text-align: right;                   /* el número a la derecha        */
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;                               /* el tipo de la fuente          */
font-weight: normal;font-size: 26px; /* el tipo y tamaño de la fuente */
}

/* como son enlaces, forzamos las propiedades de color */
.comentacontador a:link, .comentacontador a:visited {color: #445566 !important;}
.comentacontador a:hover, .comentacontador a:active {color: #FF9933 !important;}

/* propiedades para diferenciar pares e impares */
.comentarioPar {                  /* los comentarios PARES          */
margin: 5px 0px;                  /* separación entre comentarios   */
padding: 5px 10px 5px 10px;       /* margenes internos              */
background-color: #efeff7;        /* el color de fondo              */
border-bottom: 3px solid #AECAEB; /* los bordes                     */
border-top: 1px solid #445566;
}

.comentarioImpar {                /* los comentarios IMPARES        */
margin: 5px 0px;                  /* separación entre comentarios   */
padding: 5px 10px 5px 10px;       /* margenes internos              */
background-color: #efeff7;        /* el color de fondo              */
border-bottom: 3px solid #AECAEB; /* los bordes                     */
border-top: 1px solid #445566;
}

.comentarioPropio {               /* NUESTROS comentarios           */
margin: 5px 0px;                  /* separación entre comentarios   */
padding: 5px 10px 5px 10px;       /* margenes internos              */
background-color: #ffffcc;        /* el color de fondo              */
border-bottom: 3px solid #FFFF4A; /* los bordes                     */
border-top: 1px solid #445566;
}
</style>

Lo que nos falta es agregar el script que establecerá la clase (las propiedades) de cada comentario según sea par/impar o del autor. La agregamos inmediatamente después del estilo:

<script type='text/javascript'>
function ContarC(cual,quien) {
if (quien ==&#39;TU_NOMBRE&#39;) {
document.getElementById(cual).className=&#39;comentarioPropio&#39;
} else {
var resto;
resto = contadorComentarios % 2;
if (resto == 0)
document.getElementById(cual).className=&#39;comentarioPar&#39;
else
document.getElementById(cual).className=&#39;comentarioImpar&#39;
}
}
</script>

En TU_NOMBRE ponemos nuestro nombre.

El resultado, puede verse en el blog, abriendo cualquier post que contenga comentarios.

Visto en Vagabundia

Scrolls o barras de desplazamiento

2008-04-18T09:06:00.000+02:00

Las scrollbars se usan para subir y bajar por una página web. También podemos usarlas en algunas partes de nuestro blog.

Scrollbars en todos los widgets del blog
Añadimos justo debajo de /* Sidebar Content :

.sidebar .widget{
height:200px;
overflow:auto;
}

Scrollbars en los widgets de una de las sidebars
También lo colocaremos debajo de /* Sidebar Content . Localizamos el nombre de nuestras sidebares, normalmente suele ser sidebar una de ellas, la otra será newsidebar, sidebarleft, sidebarrigth...Vamos a suponer que se llaman "sidebar1" y "sidebar2", si queremos colocar las scrollbars en "sidebar1" pegaremos esta pieza de código:

#sidebar1 .widget{
height:200px;
overflow:auto;
}

Si preferimos colocarlas en la otra sidebar "sidebar2" pegaremos esto:

#sidebar2 .widget{
height:200px;
overflow:auto;
}

Scrollbar en un Widget solamente.
Localizamos en la plantilla el "id" o nombre del elemento al que queremos añadir las scrollbars.
En nuestra plantilla ->Edición HTML sin expandir los elementos veremos algo como esto:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='MIS AMIGOS' type='LinkList'/>
<b:widget id='Archivelist' locked='false' title='' type='ArchiveL'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
</b:section>
</div>

Lo que está en azul es la "id" de cada widget, imaginemos que vamos a ponerle scrollbars a una de nuestras listas de links "LinkList1". Buscaremos /* Sidebar Content y justo debajo pegaremos esta pieza de código (cuando el widget escogido es una lista, hemos de añadir el "ul" :

#LinkList1 ul{
height:200px;
overflow:auto;
}

Scrollbars en el cuerpo de las entradas
Localizamos en el HTML de la plantilla: .post { y justo debajo colocar el código para mostrar las barras:

.post {
height:200px;
overflow:auto;
}

Scrollbars para una parte del post (ScrollBox o Caja de Texto)
Insertamos esta pieza de código en el CSS de la plantilla, en la que especificaremos el alto (height) y el ancho (width) de la caja de scroll:

.scrollbox {
height:100px;
width:300px;
overflow:auto;
}

En el editor de entradas escribimos el post normalmente y donde queremos incluir la parte con scrollbars, colocamos esto:

<div class="scrollbox">TEXTO O IMAGEN/ES QUE VAMOS A INCLUIR EN LA CAJA DE SCROLL</div>

Posts más comentados

2008-04-17T10:52:00.002+02:00

Rosa ha adaptado al español el widget de Amanda de los Posts más comentados modificando la Yahoo Pipe.

Copiamos y pegamos en un nuevo elemento HTML el código del script.


<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=54d6d19d945db96177de90962bc15e83&
url=http%3A%2F%2FNOMBRE_BLOG.blogspot.com&num=5" type="text/javascript"></script>
<span style="gt;Widget by <a href="http://www.bloggerbuster.com">Blogger Buster </a></span>

En NOMBRE_BLOG ponemos el nombre de nuestro blog.

En text-transform: capitalize; (que pone en mayúsculas la primera letra de cada palabra) podemos poner text-transform:uppercase para ver todo el título en mayúsculas.

Para cambiar el número de entradas a mostrar, cambiamos donde dice &num=5 por el número de entradas que queremos ver en el widget.

Y así de fácil, eso es todo.

Expand/Collapse, Ocultar/Mostrar

2008-04-13T18:21:00.000+02:00

Este es un truco para ocultar y mostrar cualquier cosa que deseemos tener "recogida". Pueden añadirse enlaces, imágenes, listas, etc. Se puede usar en las entradas o en los widgets.

1. Colocamos este código en la parte del CSS de nuestra plantilla, por ejemplo antes de ]]></b:skin>:


.commenthidden {display:none}
.commentshown {display:inline}

2. Colocamos ahora este script justo antes del </head> de nuestra plantilla.


<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown")
{ whichpost.className="commenthidden"; }
else { whichpost.className="commentshown"; }
}
</script>

3. Colocamos este código donde queramos (entradas, widgets, etc.):


<a title="Ver/Ocultar" 
href="javascript:togglecomments('UniqueName')">
+/- Título</a><br />
<div class="commenthidden" id="UniqueName">

AQUÍ LO QUE QUEREMOS OCULTAR

</div>

Cuando pinchemos sobre +/- se abrirá la lista de links o lo que sea que hayamos puesto, cuando se vuelva a pinchar se recogerá.

Importante

Donde dice "UniqueName" dentro del último código lo sustituimos por una palabra cualquiera que no se esté usando en otro código de la plantilla.

Si vas a colocar más de un elemento con este truco, recuerda que no puedes usar la misma palabra.

Dejando el "UniqueName" y añadiendo al segundo elemento un 1 detrás "UniqueName1", al tercero un 2 "UniqueName2"... funciona perfectamente.

Truco de BlogU

Poner una Widebar (sidebar doble)

2008-04-13T08:33:00.000+02:00

Una 'Widebar' es otra sidebar que ocupa el espacio de dos sidebars, encima o debajo de ellas. Naturalmente, esto sólo funciona si tu blog tiene dos sidebars.

Para usar el código, primero lee este post de Vivak para tener una idea general del hack. Tiene buenos gráficos para verlo facilmente.

Primero hay que cambiar la anchura en px a porcentaje. La suma total debe ser del 100%, por ejemplo:

* margen izquierdo 5%
* margen derecho 2%
* width 93% (este 93% contiene el main y las dos sidebars)

El desglose podría ser:

* main 50%
* sidebar izquierda 22%
* sidebar derecha 22%
* 6% para el espacio entre las columnas

Después asignamos este valor a la widebar (que es el 100% de la barra lateral izquierda y derecha)

* widebar 44%

Antes de empezar, haz una copia de seguridad de tu plantilla o práctica en un blog de pruebas. Para aplicar este hack en tu blog, este es el código que hay que añadir a tu hoja de estilo CSS (entre <head> y </ head>):


    #widebar-wrapper {
    width: 44%;
    float:right;
    padding-bottom:10px;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    }

    #widebar {
    width: 100%;
    padding:10px 0 5px 0px;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */
    }

Ahora, sin expandir se busca <div id='main-wrapper'>. En otras plantillas será content-wrapper, y añadimos este código:


    <div id='widebar-wrapper'>
    <b:section class='sidebar' id='widebar' preferred='yes'>
    </b:section></div>

Guardamos la plantilla. Vamos a 'Elementos de página' y vemos un nuevo 'Agregar elemento de página' en los widgets. Podemos crear un nuevo widget para la Widebar, o arrastrar un widget de una de sus barras laterales a la misma.

Con unos pocos ajustes aquí y allá, debería funcionar en cualquier plantilla.

Diferente fondo en cada widget

2008-04-10T17:15:00.001+02:00

Cada widget tiene un nombre único. Por ejemplo: LinkList1, Text1, BlogArchive1

Se pueden encontrar buscando b:widget id=

Para cambiar la imagen o el color de fondo añadimos en el CSS lo siguiente:


/* Widgets
--------------------------------------- */
#Text1{
background: #fff url(IMAGE URL) no-repeat; /* Cambia la imagen de fondo */
background-color: #000;                    /* Cambia el color de fondo */
}

según sea el widget que deseemos cambiar. Y eso es todo.

Ver un widget en una pagina específica

2008-04-08T21:16:00.002+02:00

Esto sirve para que veamos un widget sólo en la página inicial o en una etiqueta o en una determinada página, etc.

En las páginas de etiquetas

1. Localizamos el widget escogido (lo más fácil es hacerlo por su título , si lo tiene).


<b:widget id="HTML2" locked="false" title="Links" type="HTML">

2. Añadimos lo que va en azul a su código, teniendo en cuenta que la primera línea va justo después de <b:includable id='main'> y la segunda justo antes del primer </b:includable> .


<b:widget id="HTML2" locked="false" title="Links" type="HTML">
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
......
Resto del código
........
</b:if>
</b:includable>
</b:widget>

Widget sólo visible en la página principal

La primera línea en azul la sustituimos por esta:


<b:if cond='data:blog.url == data:blog.homepageUrl'>

Widget sólo visible en una página concreta

Una vez instalado el widget, pinchamos en el título de esa entrada en concreto, copiamos la url que sale en nuestro navegador, y seguimos los pasos que hemos visto para los casos anteriores, colocando en lugar de la primera línea, esta otra:


<b:if cond='data:blog.url == "URL_PAGINA_DE_ENTRADA"'>

Widget sólo visible en la página de una etiqueta concreta

El metodo sería el mismo que para los anteriores, pero colocando en esa línea de código, la url de la etiqueta, es decir, la que vemos en nuestro navegador al pinchar sobre dicha etiqueta:


<b:if cond='data:blog.url == "URL_PAGINA_DE_ETIQUETA"'>

Sin comentarios, 1 comentario, n comentarios

2008-04-03T15:26:00.000+02:00

Este "truco" de Hoctro´c Place sirve para mostrar nuestros comentarios según hayan comentado o no.
Los comentarios se verán "sin comentarios" , "1 comentario" o "n comentarios" según la cantidad de comentarios que haya.

1- Vamos a plantilla - html y expandimos los artilugios.

Buscamos esto:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>

Unas líneas más abajo veremos un <h4>

Cambiamos desde <h4> hasta </h4>, ambos incluidos, por esto:


<h4>
<b:if cond='data:post.numComments == 0'>Sin comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>1 comentario:
<b:else/>
<data:post.numComments/> comentarios:
</b:if>
</b:if>
</h4>

2- Seguimos bajando por la plantilla hasta encontrar esto:

<p class='post-footer-line post-footer-line-1'>

Unas líneas más abajo veremos esto:

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

Cambiamos desde la línea que está a continuación de esa, hasta </a> por esto:


<b:if cond='data:post.numComments == 0'>sin comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>1 comentario
<b:else/>
<data:post.numComments/> comentarios
</b:if>
</b:if>
</a>

Damos vista previa y veremos "sin comentarios" , "1 comentario" y "n comentarios" (dependiendo del número de comentarios)

Breadcrums o "Estás en: "

2008-04-03T14:12:00.001+02:00

Sirven para indicar el camino realizado desde Inicio a la entrada que estamos leyendo.

Buscamos esta línea de código:

<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">

Unas líneas de código más abajo, encontraremos el main principal:

<b:includable id='main' var='top'>

Justo encima de esto añadimos este código:


<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
Estas en:
<a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</a> &gt;
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

Buscamos esta otra línea de código en la plantilla, estará unas líneas más abajo del código que acabamos de incluir:

<b:if cond='data:post.dateHeader'>

Pegamos esto, justo encima de la línea anterior:

<b:include data='post' name='breadcrumbs'/>

Finalmente añadimos el código necesario en el CSS, como suelo deciros, ante la duda lo colocamos justo antes de ]]></b:skin>:


.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

Visto en: Hoctro´s

Entradas relacionadas

2008-04-02T10:27:00.000+02:00

Con este script mostramos las entradas relacionadas con la que estamos leyendo, como un nuevo elemento del pie de los post y se mostrará solamente en las páginas individuales, no en la principal.

1. Justo debajo de la etiqueta ]]></b:skin>agregamos el siguiente script. Hemos de colocarlo exactamente ahí ya que para que funcione correctamente, debe estar antes que cualquier otro script que hayamos colocado:


<script type='text/javascript'>
//<![CDATA[

var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();

function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}

function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}

function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 3) {
break;
}
}
document.write('</ul>');
}

//]]>
</script>

En relatedTitles.length && i < 20), se ponen los posts que se verán según los caracteres que formen su título.

En if (cuantosPosts == 3) aumentamos la cantidad de posts a mostrar.

2. Buscamos ahora esta parte del código y añadimos lo que he marcado en azul:


<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>

<b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"'
type='text/javascript'/>
</b:if>

</b:loop>
</b:if>

En max-results=10 ponemos la cantidad máxima de posts que se mostrarán, es conveniente poner un valor bajo para evitar que la página tarde mucho en cargarse.

3. Una vez hecho esto, buscamos esta línea de código:

<p class='post-footer-line post-footer-line-3'/>

Y colocaremos nuestro nuevo código justo a continuación:


<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>

Visto en El Escaparate de Rosa.

Mostrar - ocultar

2008-03-28T21:15:00.001+01:00

Lo que vamos a hacer será reducir el código del menú desplegable de manera que clicando en una imagen o texto mostrará los botones que a simple vista estarán ocultos lo que ahorrará espacio y dará un aspecto más despejado a la sidebar.
Comenzaremos situándonos en Plantilla/Edición HTML y justo después de <head> añadiremos lo siguiente:


<!-- desplegable -->
<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
<!--desplegable -->

Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:


<a href="javascript:void(0);" onclick="expandcollapse('Botones')"><img src="url-de-la-imagen"/></a>
<ul id="Botones" class="texthidden">

<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
</ul>

Si deseamos añadir este efecto de mostrar-ocultar más de una vez en nuestro blog deberemos cambiar el nombre "id" para que no se repita. En el código yo le puse "botones" podéis añadir cualquier otro, da igual el que sea.

Modificaremos las partes del código para añadir la url de la página y las imágenes.
No hay límite para añadir enlaces o botones, bastará con repetir el código que contiene la url de la página y el-los enlaces.
Cerraremos siempre el código del desplegable con la etiqueta </ul> de lo contrario se mostrará la parte oculta.

Para ocultar un texto en vez de un botón esta es la solución:

Añadimos el Script de la plantilla después de <head>

Luego editamos la entrada como de costumbre, escribimos la entrada hasta llegar al lugar que vamos a ocultar y añadimos lo siguiente:


<a href="javascript:void(0);" onclick="expandcollapse('cualquiercosa')">Ver ejemplo</a>
<ul id="cualquiercosa" class="texthidden">
Texto oculto-Texto oculto-Texto oculto
</ul>

Donde "cualquiercosa" es un nombre cualquiera que no deberemos repetir si agregamos este código más de una vez en nuestro blog. Podemos añadirlo cuantas veces deseamos pero con un nombre diferente.

Visto en Gem@ Blog

Entradas en expandible para las categorías

2008-03-26T21:16:00.003+01:00

Sirve para listar el título de las entradas con la posibilidad de [+/-] (Expandir/Contraer el contenido de las entradas).

De esta manera parece más cómodo encontrar lo que buscamos y la navegación es más rápida (lo podéis comprobar clicando en alguna etiqueta de la cabecera)

Nos situamos en Plantilla/Edición de HTML y buscamos el código </head> y antes añadimos:
+/- Código


<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
}
else {
post.style.display = '';
}
}
</script>

<script type='text/javascript'
src='http://rarunach.googlepages.com/hackosphere.js' />

Ahora hay que buscar las partes que se encuentran en negro y añadir las que están en rojo como se muestra aquí

Guardamos los cambios y listo.

Caja contenedora de código

2008-03-26T13:17:00.002+01:00

Para poner una caja donde poner los códigos.

Para hacerlo agregaremos estilos CSS donde personalizaremos la caja, es decir background, color, margin, padding etc. Lo podemos hacer agregando las propiedades en la plantilla, antes de ]]></b:skin> y el código a añadir es el siguiente:


/* Caja de código */
pre {
background:transparent url(aquí la url de una imagen) no-repeat 0 0; /* Imagen Superior, si deseas cambiarla modifica lo que se encuentra dentro de url(AQUI) */
padding-top:22px; /* Relleno - para ajustar Fondo */
}

pre code {
overflow:auto; /* Determina si es necesario agregar barras de Scroll */
background-color:#E9E9E9; /* Color de Fondo en Hex */
border:1px solid #999999; /* Color de Borde en Hex */
color:#990000; /* Color de letra en Hex */
display:block; /* No tocar */
padding:8px; /* Relleno del cuadro */
white-space:pre; /* No tocar */
text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su
min-height:63px; /* Altura minima del Cuadro */
}

/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */
code:hover {
background-color:##ffffff; /* Color de Fondo en Hex */
border:1px solid ##666666;/* Color de Borde en Hex */le
}
/* FIN Caja de código */

Donde dice aquí la url de una imagen es el lugar donde podemos añadir una imagen preferiblemente de la misma medida de nuestra caja para que no sobresalga.

Si preferimos no añadir imagen bastará con suprimir el texto entre paréntesis. El resto de los valores los podemos adecuar al tamaño según la media que deseamos para nuestra caja así como el lugar donde la añadiremos y los colores para personalizarla.

Una vez guardados los cambios nos situamos en la plantilla de entrada:Configuración/Formato/Plantilla de entrada donde añadiremos <pre><code></code></pre> y guardamos los cambios nuevamente.

Con este último paso lo que conseguimos es que al editar una entrada nos aparezcan automáticamente las etiquetas <pre><code></code></pre> evitándonos tener que copiar y pegar cada vez que vamos a necesitarla. Si no la necesitamos no es problema, la suprimimos de la entrada y listo.

Cuando tengamos que mostrar un código añadiremos dicho código dentro de las etiquetas, es decir: <pre><code>aquí el código</code></pre>
El resultado será más o menos como la caja contenedora de código de esta entrada.

Cargando página

2008-03-26T12:11:00.003+01:00

Se trata de poner una imagen en movimiento que indica que la página se está cargando y una vez que el blog ha cargado por completo, la imagen desaparece.

Antes de </head> añadimos este código:


<!-- imagen de carga -->
<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById(&quot;imgLOAD&quot;).style.display=&quot;none&quot;;
}
</script>

Y para ver la imagen de carga en la esquina superior derecha:


<div align='left' id='imgLOAD' style='position:absolute;top:140px;right:182px;font-size:12pt'>
<span style='color: #7c9fbd;'>Cargando...</span>
<img src='http://img165.imageshack.us/img165/1922/loadinganimationliferaysd8.gif'/>
</div>

En "top" podemos cambiar la distancia de la imagen a la parte superior de la página.
En "right" cambiaremos la distancia de la imagen al borde de la página.

Numerar los comentarios

2008-03-21T18:56:00.000+01:00

Para numerar los comentarios usamos las mismas etiquetas que para numerar cualquier tipo de lista.

1. Añadimos las etiquetas <ol>, </ol>, <li> y </li>, tal como están colocadas en el código siguiente (están en azul):


   <ol><dl id='comments-block'>
   <b:loop values='data:post.comments' var='comment'>
   <li><dt class='comment-author' expr:id='data:comment.anchorName'>
   <a expr:name='data:comment.anchorName'/>
   <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   <data:commentPostedByMsg/>
   </dt></li>

   <dd class='comment-body'>
   <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
   <b:else/>
   <p><data:comment.body/></p>
   </b:if>
   </dd>
   <dd class='comment-footer'>
   <span class='comment-timestamp'>
   <a expr:href='data:comment.url' title='comment permalink'>
   <data:comment.timestamp/>
   </a>
   <b:include data='comment' name='commentDeleteIcon'/>
   </span>
   </dd>
   </b:loop>
   </dl></ol>

Así de fácil.

Visto en El escaparate de Rosa.

Listado de plataformas de blogs gratuitos

2008-03-11T21:11:00.001+01:00

Un listado de páginas de blogs gratuitos.

WordPress: http://wordpress.com/

Blogger: http://www.blogger.com/

Bitacora Gratis: http://www.barceloca.com/

Bitacoras: http://www.bitacoras.com

Blogdiario: http://blogdiario.com/

Bloges: http://bloges.org/

BlogFX: http://blog-fx.com/sitio.php

Bloggy: http://bloggy.com.ar/

Blogia: http://www.blogia.com/altas.php

Bloginom: http://www.bloginom.com/portal.php

BlogYa: http://www.blogs.ya.com/

Blogviajes: http://blogviajes.com/

Diariogratis: http://www.diariogratis.com/

Elfotolog: http://www.elfotolog.com/

ijijiji: http://www.ijijiji.com

Ohlog: http://ohlog.com/

Rincon Consolas: http://www.rinconconsolas.net

Sitio blogs: http://www.sitioblogs.com/

Sooblog: http://blogs.soogus.com/

Wanadoo: http://blogs.wanadoo.es/es/

Zoomblog: http://www.zoomblog.com/

Zona Libre: http://www.zonalibre.org

Aeonity: http://www.aeonity.com/

Anyonesblog: http://anyonesblog.com/

Apcala: http://apcala.com/

Avatale: http://www.avatale.com/

Blogs: http://blog.ringllc.com/

Blogdrive: http://www.blogdrive.com/

Blog Pirates: http://blogpirates.com/

Blog Studio: http://www.blogstudio.com/

BlogAlert: http://blogalert.net/default.aspx

Blogates: http://blogates.com/

Blog-City: http://www.blog-city.com/bc/

Blog: http://int.blog.com/

BlogDog: http://www.blogdog.com/

BloggerCrab: http://www.bloggercrab.com/

BloggerDo: http://www.bloggerdo.com/

Bloggin: http://www.blogging.com/

Bloggoing: http://www.bloggoing.com/

Blog Harbord: http://www.blogharbor.com/

BlogHI!: http://bloghi.com/

BlogHorn: http://bloghorn.com/wizard/

Blogigo: http://www.blogigo.com/

BlogiZm: http://www.blogizm.com/home.php

Bloglegion: http://www.bloglegion.com/portal.php

BlogMyWay: http://www.blogmyway.org/login.php

Blogo Monster: http://www.blogomonster.com/blogo.php

Blog On The Web: http://free-blog-site.com/

Blog Page: http://blogpage.com/

Blog Roll: http://www.blog-roll.info/

Blogs A Million: http://www.blogsamillion.com/

Blog Sharing: http://www.blogsharing.com/

Blog Some: http://www.blogsome.com/

Blog Source: http://www.blogsource.com/

Blogster: http://blogster.com/

BlogStream: http://www.blogstream.com/

Blog Text: http://www.blogtext.org/

BlogThing: http://www.blogthing.com/

BlogWebsites: http://www.blogwebsites.net/

BlogZy: http://www.blogzy.com/

Bloty: http://www.bloty.com/

CrabBlog: http://www.crablog.com/

DeadJournal: http://www.deadjournal.com/

eBloggy: http://www.ebloggy.com/

iBlogs: http://www.iblogs.com/

Ipadder: http://www.ipadder.com/

Iuplog: http://www.iuplog.com/

JetSet: http://www.jetsetweblog.com/

Just Blog Me: http://www.justblogme.com/

Kitehost: http://www.kitehost.com/index.htm

La Coctelera: http://www.lacoctelera.com

LiveLog: http://www.livelog.com/

Live Journal: http://www.livejournal.com

Marrioba: http://blogcindario.miarroba.com/

Memebot: http://www.memebot.com/

MessageMonster: http://blog.messagemonster.com/

ModBlog: http://www.modblog.com/

MindSay: http://www.mindsay.com/

MogBlog: http://www.mogblogs.com/

MSN Spaces: http://spaces.msn.com/

My Blog: http://www.myblog.com/

My eBlog: http://www.my-e-blog.com/

My Weblog: http://www.myweblog.com/

My Space: http://myspace.com

ohBlog: http://www.ohblog.com/

Quick Journal: http://www.qj.net/

Rootten Tomatoes: http://www.rottentomatoes.com/vine/journal.php

SailBlogs: http://www.sailblogs.com/

Splash blog: http://www.splashblog.com/index.aspx

Tabulas: http://www.tabulas.com/

The Blog: http://www.theblog.cc/

Thumblogger: http://www.thumblogger.com/

TheBlogs: http://theblogs.net/

The diary: http://www.thediary.org/

Yahoo Blog: www.blog.360.yahoo.com/blog

Weblogs: http://weblogs.us/

Xanga: http://www.xanga.com/

X-Journal: http://www.x-journal.com/

Xlogz: http://www.xlogz.com/

XBlog: http://www.xrblog.com/

Zoorpia: http://www.zorpia.com/

Menú horizontal

2008-03-10T19:48:00.003+01:00

Para poner un menú horizontal con los enlaces que nos interesen.

1- Antes de ]]></b:skin> en el HTML de nuestra plantilla, colocamos esta porción de CSS:

#navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #C0C0C0;
color: white;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */

}

#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
background-color: #333399;
}

#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #CC3300;
color: white;

}

#navcontainer #active { border-left: 1px solid #fff;
}

Aquí es donde podemos cambiar los colores de nuestro menú, el tamaño del texto, la separación, etc.

2- Buscamos en nuestra plantilla esta línea de código:

<div id='content-wrapper'>

Y justo a continuación añadimos la parte del código que mostrará nuestro menú debajo de la cabecera del blog:

<div id='navcontainer'>
<ul id='navlist'>
<li id='active'><a href='http://jesgopru23.blogspot.com' id='current'>Inicio</a></li>
<li><a href='mailto:jesgo999@gmail.com'>Contacto</a></li>

</ul></div>

Scroll en los widgets

2008-02-27T12:28:00.001+01:00

Si tienes la columna lateral tan llena de listas y de elementos que sobrepasa a las entradas, puedes hacer que se "encojan" mediante un scroll.

El código para colocarlo es muy sencillo.
Sin expandir elementos, mira como se llama el elemento que quieres encoger.
Por ejemplo, la lista de entradas se llama BlogArchive1 y la de etiquetas se llama Label1.
Si tienes listas de enlaces se llamarán LinkList1, 2, 3 etc. dependiendo de cuantas tengas.
Si son elementos HTML/Javascript, se llamarán HTML1, 2, 3 etc.
Averigua cual es la denominación exacta del que quieres mostrar así y en la parte del CSS, verás que pone

/* Sidebar Content
----------------------------------------------- */

Justo debajo de esta línea discontinua añades este código (vamos a suponer que es para la lista de entradas)

#BlogArchive1{
height:200px;
overflow:auto;
{

puedes cambiar la altura quitando o añadiendo píxels.
Esto lo puedes poner en tantos elementos como quieras, simplemente has de ir añadiendo los códigos cambiando el nombre del elemento pero ¡CUIDADO!
si tienes 2 columnas laterales o sidebars, has de asegurarte de en cual de las dos están los elementos.
Cuando busques su nombre, verás que en el código aparecen bajo esta línea

o bajo esta otra

Si el elemento que quieres encoger está en la nueva columna tendrás que añadir esto:

/* Newsidebar Content
----------------------------------------------- */

y debajo, el código del scroll en el elemento correspondiente.

Consejo:
Pon siempre título a los elementos, de esta forma te será más fácil localizarlos, pero si por algún motivo no quieres hacerlo, ten en cuenta que la lista que ves en el HTML debajo de sidebar-wrapper y de newsidebar-wrapper, está en el mismo orden en que se ven los elementos en las columnas.

Nube de etiquetas

2008-02-26T10:28:00.001+01:00

Una nube de etiquetas convierte el listado habitual de nuestras etiquetas en una nube mucho más gráfica.

Antes de empezar tenemos que añadir en la sección elementos de la plantilla, un nuevo elemento "etiquetas" y, por supuesto, hemos de tener etiquetados nuestros post. Si estamos usando ya un elemento de etiquetas, por ejemplo, para nuestro menú de pestañas, no importa, puede añadirse otro nuevo para usar con la nube.

[1] Vamos a nuestra plantilla - html y no expandimos la plantilla de artilugios. Localizamos esto: ]]></b:skin> y justo antes, o lo que es lo mismo, al final del CSS, colocamos este código que definirá el estilo de nuestra nube:

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

[2] Volvemos al mismo sitio de antes: ]]></b:skin> solo que ahora hemos de colocar el código después de esto, es decir, antes de </head>:

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Cambiamos YOURBLOG por el nombre de nuestro blog.

[3] Buscamos en la plantilla esta línea de código, tendremos en cuenta que si hemos añadido un nuevo elemento de etiquetas, el elemento se verá como label2 :

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Hemos de reemplazar esa línea por todo este código:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Nota:
Para que el código funcione correctamente tendremos que cerciorarnos de que al menos, una de las etiquetas, tenga mas de una entrada y no debe aparecer en las etiquetas ninguna comilla ".

PARA PONER LA NUBE DEBAJO DE LA CABECERA:

Ponemos debajo del Header:

<b:section class='header' id='header' maxwidgets='1'>
...
</b:section>

este código:

<b:section class='nube' id='nube' maxwidgets='1'>
NUBE DE ETIQUETAS
</b:section>

Y después cortamos el código del widget de la nube:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
...
</b:widget>

y lo pegamos donde pusimos NUBE DE ETIQUETAS

Por último cambiamos esto en el CSS:

#labelCloud {text-align:center;font-family:arial,sans-serif;}

por:

#labelCloud {text-align:center; font-family:Georgia,Serif; border: 1px black solid; padding: 10px 10px; margin: 5px 0px;}

para cambiar el tipo de letra, el padding, el margen y el borde.

Añadir 3 columnas en el pie

2008-02-23T16:21:00.001+01:00

Con este truco añadimos 3 columnas en el pie del blog.

1. Retiramos cualquier elemento que tengamos colocado en el footer del blog. Podemos moverlo a la sidebar de forma temporal y, una vez añadidas las tres columnas en el footer, volver a colocarlo en esa sección.

2. Buscamos, casi al final de su código, estas líneas Sin expandir artilugios:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

3. Dependiendo de la plantilla que estemos usando, podría cambiar el código a buscar ("footer" o "footer-wrapper"), en el caso de la Rounders, por ejemplo, hay dos divs en la sección del footer, en cualquier caso, el código que hemos de cambiar es la línea que está resaltada en negrita, sustituyéndola por este código:

<div id='footer-columna-contenedor'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#6633FF' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

4. Añadiremos ahora unas líneas de CSS para controlar la separación de las columnas. Pegamos estas líneas antes de ]]></b:skin>

#footer-columna-contenedor {
clear:both;
}

.footer-columna {
padding: 10px;
}

5. Ya podemos guardar los cambios y colocar los elementos que habíamos retirado a la sidebar donde nos parezca mejor.

6. En el código está incluida una línea de separación entre las tres columnas y el footer antiguo, en el ejemplo podéis ver que se muestra de color azul.
La parte del código que hace que se vea esta línea, es esta:

<hr align='center' color='#5d5d54' width='90%'/>

Podemos cambiar su color en color='#5d5d54'
También podríamos prescindir de ella borrando la línea por completo.

Solución al problema del scroll en plantillas de 3 columnas en Blogger

2008-02-23T12:26:00.003+01:00

Últimamente Blogger nos ha quitado la barra de scroll con la que se podía acceder a la zona derecha para editar los elementos de página que tuvieramos en esa parte.

Después de mirar por aquí y por allí he descubierto que se soluciona simplemente con el cursor (con -> nos desplazamos a la zona de la derecha y con <- nos desplazamos a la izquierda).Me funciona tanto en IE como en Firefox.

Menú lateral fijo

2008-02-22T20:19:00.003+01:00

Este truco coloca un menú lateral fijo, es decir, que al bajar el scroll el menú continua en la misma posición.

Buscamos el siguiente código:

]]></b:skin>

Y justo arriba colocamos:

#menulateral{
position:fixed;
text-align:left;

/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
margin-top:100px;
margin-left:-28px;
}

* html #menulateral{ /*para IE*/
position:absolute;
}

#menulateral a img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
}

#menulateral a:hover img{
opacity:0.8;
-moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px;
}

* html #menulateral a img{
filter:alpha(Opacity=100);
}

#menulateral img{
margin-bottom: -5px;
}

* html .menulateral{
margin-bottom: -3px;
}

Ahora buscamos el siguiente código:

<div id='content-wrapper'>

En algunas plantillas podría ser mejor ubicar “<div id=’outer-wrapper’><div id=’wrap2′>”. Para otros sistemas de blog o en una web ubica el div del contenedor principal.
Y debajo de ese código colocamos el siguiente:

<div id='menulateral'>
<span>
<a href='http://TUBLOG.blogspot.com/' style='border:0;' title='Inicio'><img alt='Inicio' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya1AI/AAAAAAAABoI/6EXVwJ-0xxc
/s1600/menu-lateral-inicio.png'/></a>
<br/><a href='#BlogArchive1' style='border:0;' title='Archivo'><img alt='Archivo' src='http://bp2.blogger.com/_Zuzii37VUO4/RlpT2Jya08I/AAAAAAAABno/fEetH56Ftgw
/s1600/menu-lateral-archivo.png'/></a>
<br/><a href='mailto:TU-MAIL@servidor.com' style='border:0;' title='Contactame'><img alt='Contactame' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0-I/AAAAAAAABn4/F5Ax7A_8rLA
/s1600/menu-lateral-contacto.png'/></a>
<br/><a href='http://TUBLOG.blogspot.com/feeds/posts/default' style='border:0;' title='Suscribete a nuestro Feed'><img alt='Suscribete a nuestro Feed' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0_I/AAAAAAAABoA/HgSHFryV6kc
/s1600/menu-lateral-feed.png'/></a>
<br/><a href='#' style='border:0;' title='Arriba'><img alt='Arriba"' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya09I/AAAAAAAABnw/38HqImjH21E
/s1600/menu-lateral-arriba.png'/></a>
</span>
</div>

En ese código hacemos las sustituciones siguientes:

“http://TUBLOG.blogspot.com/” - Por la dirección de tu blog.
“TU-MAIL@servidor.com” - Por tu dirección de correo
“http://TUBLOG.blogspot.com/feeds/posts/default” - Sustituye “TUBLOG” por esa parte de la dirección de tu blog.
Guarda y ¡listo!

Corregir el enlace a comentarios de Blogger

2008-02-22T19:20:00.001+01:00

Con este truco conseguimos que desde la página principal, de archivos y etiquetas el link que manda a comentarios te envíe a los comentarios ya publicados en la página individual del post correspondiente.

Buscamos el siguiente código:

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

Y lo sustituimos por:

<a class='comment-link' expr:href='data:post.url + "#comments"'>

Con esto, se podrán leer los comentarios en el mismo blog y también estará el link para publicar un comentario.

Leer Más / Sólo Resumen

2008-02-21T16:05:00.013+01:00

Algunas veces es bueno mostrar sólo el resumen de la entrada, en esos casos vendrá bien este widget para incorporar un "Leer Más...". Al pulsar mostrará el resto de la entrada y al final encontraremos un "Sólo Resumen" para volver a mostrar sólo el resumen.

Antes de </head> copiar este código:


<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

Después buscamos b:includable id='post' y en lugar del código que va de:

<b:includable id='post' var='post'>

a...:

<div style='clear: both;'/> 
</div>

pegamos este código:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Leer Más...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Sólo Resumen...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Por último vamos a Configuración -> Formato y en Plantilla de entrada copiamos:

Escribe aquí el Resumen
<span id="fullpost">
Escribe aquí el resto de la entrada
</span>

Esto saldrá al crear una nueva entrada, escribimos el Resumen donde dice "Escribe aquí el Resumen" y el resto de la entrada donde dice "Escribe aquí el resto de la entrada" dejando el resto en esa posición. posición.

Últimos comentarios

2008-02-20T22:02:00.004+01:00

Este widget muestra los últimos comentarios en la columna lateral. Añadir en elementos de página.

<script style="text/javascript"  src="http://jgh9991.googlepages.com/showrecentcomments2_sp.js"></script>
<script  style="text/javascript">
var numcomments =  10;
var showcommentdate = true;
var showposttitle = true;
var numchars  = 50;
var standardstyling =  true;
</script>
<script  src="http://TU_BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

numcomments es el número de entradas a mostrar.
showcommentdate = true muestra la fecha (false para no mostrar)
showposttitle=true muestra el título de la entrada (false para no mostrar)
numchars muestra los caracteres de la entrada
standardstyling=true muestra el estilo convencional (false para modificar con css)
TU_BLOG es el nombre del blog

Últimas entradas

2008-02-20T15:23:00.008+01:00

Este widget muestra las últimas entradas en la columna lateral. Añadir en elementos de página.


<script style="text/javascript" src="http://jgh9991.googlepages.com/entradasrecientes.js"></script>
<script style="text/javascript">
var numposts = 95;
var showpostdate = true;
var showpostsummary = true;
var numchars = 65;
var standardstyling = true;
</script>
<script src="http://TU_BLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

numposts es el número de entradas a mostrar.
showpostdate = true muestra la fecha (false para no mostrar)
showpostsummary=true muestra el resumen de la entrada (false para no mostrar)
numchars muestra los caracteres de la entrada
standardstyling=true muestra el estilo convencional (false para modificar con css)
TU_BLOG es el nombre del blog

Traduce el blog

2008-02-20T11:59:00.004+01:00

Traductor del blog a varios idiomas.
Poner este código en un elemento de página cambiando la dirección (url) por la de vuestro blog.



<center><img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/></center>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang"> 
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán 
<option value="IT"/>Español - Italiano 
<option value="PT"/>Español - Portugués 
<option value="RU"/>Español - Ruso 
</select>
<input value="http://jesgopru23.blogspot.com/" name="wl_url" type="hidden"/> <input style="font-size: 70%; width: 50px;" value="Traducir" type="submit"/> </form>

El ancho se cambia en: width: 160px .
El texto del botón en: "Traducir".
El tamaño del botón en: width: 50px.

Buscar y Suscribirse

2008-02-19T17:18:00.002+01:00

Entrando por Blogger Draft ahora Google nos ofrece la posibilidad de poner muchos elementos fácilmente.
Dos de ellos son los que he incorporado a la plantilla, Buscar y Suscribirse.
Se incorporan de la forma habitual como Añadir elemento de página.

Contacto

2008-02-18T11:00:00.009+01:00

Rellena el formulario y pincha en enviar... así de fácilGracias por venir por aquí. Cuando pinches en ENVIAR volverás a la página inicial.
Si lo prefieres, puedes enviarme un correo a
.

Modificando la plantilla Harber

2008-02-16T19:19:00.001+01:00

En este blog de pruebas modificaré todos los trucos o añadidos que veo en otros blogs.
Parto de la plantilla Harber original de Blogger, modificada a 3 columnas.

Descargar plantilla