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