27
may
2009
Listar datos sidebar a dos columnas

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.







19
may
2009
Eliminar/Modificar el "Suscribirse a: (Atom)"

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.

12
may
2009
Fecha tipo calendario en blogger

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.

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.

1
may
2009
Resumen de entrada con imagen y "leer más"

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.

28
mar
2009
Highlight.js en Blogger. Colores en el código

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.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License