Elegante sistema de expandir entradas

Muchas formas se han mostrado para aplicar el conocido "Leer más" algunas son una verdadera odisea sobre todo en plantillas adaptadas, la que he descubierto me ha sorprendido como ninguna por la facilidad de añadir al blog y sobre todo el bello efecto y la posibilidad de expandir más de una entrada al mismo tiempo.

[+/-] Ver ejemplo.

Si les gusta vamos a seguir los pasos para mostrar esas entradas demasiado extensas de una bonita forma. Pero antes debo dar las gracias a Ariane de Templates Novo Blogger gracias a ella podemos saber que el autor de esta maravilla es Stu Nicholls

Comenzamos por situarnos en la plantilla Edición de HTML, localizamos ]]></b:skin> y justo antes añadimos lo siguiente:

.maintext {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
.maintext p {padding:5px 0 0 0; margin:0;}
.maintext p.bold {font-weight:bold;}
.maintext h2 {margin:0; padding:0;}
.switch {display:block; font-size:1px; width:16px; height:16px; background:url(url-imagen-abrir); cursor:pointer;}
.off {background:url(url-imagen-cerrar);}
.hide {display:none;}
.show {position:absolute; display:block; width:500px; background:#fff; border:1px solid #000; padding:10px; margin-top:5px; z-index:500;}
.show img {float:left; padding:0 10px 10px 0;}

Personalizar la caja de contenido requiere alguna modificación aunque no es necesaria, excepto el ancho de la caja que no debe ser mayor al espacio de las entradas:

width:500px; anchura de la caja expandible.
background:#fff; color de fondo de la caja.
border:1px grosor del borde.
solid #000; tipo de borde y color.
background:url(url-imagen-abrir) : url del icono rojo (expandir).
background:url(url-imagen-cerrar) :url del icono verde (recoger)

Lo siguiente lo añadiremos antes de </head>


<script>

onload = function() {


var e, i = 0;


while (e = document.getElementsByTagName ('B') [i++]) {

if (e.className == 'switch') {

e.onclick = function () {

this.className = this.className == 'switch' ? 'switch off' : 'switch';

this.nextSibling.className = this.className == 'switch' ? 'hide' : 'show';

}

}

}

}

</script>

Nos queda el último paso, se trata de añadir en cada entrada:


<div class="maintext">
<b> Texto inicial de la entrada </b>
<b class="switch"></b>
<div class="hide">Aquí escribimos el contenido oculto</div>
</div>

Donde dice "Texto inicial de la entrada" escribiremos el texto que será visible, es decir el que se muestra sin expandir la entrada.

"Aquí escribimos el contenido oculto" es el espacio para añadir el contenido de la caja, texto, imágenes, código...

Si, ya sé que es una lata copiar y pegar el código en la entrada cada vez que deseamos expandir nuestros post pero eso no es problema si lo añadimos a la plantilla de entrada.

Otras formas de expandir entradas:
Leer más- Read More (Con imagen)
Leer más con efecto expandir y recoger
Leer más (Read More)
Leer más o Read More para todas las plantillas de Blogger
Y el recomendado: Leer más original de Blogger.

ElHackerZ