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 .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>.Se trata de suprimir o modificar el "Suscribirse a" que encontramos en la parte final del blog.
Buscamos .feed-links
.feed-links {
display: none;
visibility: hidden;
}
.feed-links {
clear: both;
line-height: 2.3em;
padding-left:18px;
padding-top:3px;
background: url(nuestro_icono) center left no-repeat;
}
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:
<div class='date'>
<script type='text/javascript'>
var timestamp = "<data:post.timestamp/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
if (date_dd.substring(0,1) == "0") {
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>
.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.
<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>
<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.
.rmlink{ /* propiedades generales */
...
}
.rmlink a{ /* Propiedades del enlace a simple vista */
...
}
.rmlink a:hover{ /*Propiedades del enlace al pasar el ratón sobre él */
...
}
<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.<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.