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.
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.
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 = "<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>
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.
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 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.
Visitas
