La sidebar o barra lateral y el bloque de entradas con la misma altura

Normalmente las plantillas de blogger suelen contener una sidebar o barra lateral. En ocasiones podemos encontrar diseños que contienen dos o más barras laterales pero prácticamente siempre tendremos el problema de la altura de éstas.

La altura en una sidebar es irregular, de manera que, según agregamos gadgets (elementos de página), ésta va "creciendo" hacia abajo.

¿Pero que sucede si no tenemos los suficientes gadgets como para "alargarla" lo suficiente? ¿Y si nuestros artículos son más largos que la barra lateral?

En la imagen siguiente puedes ver mejor lo que conseguiremos con este truco:

Lo mejor de todo es que el procedimiento es sencillo y el resultado: un blog más elegante y ordenado.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el script:

<a style="padding: 4px;" href="http://goo.gl/4xVx"><center><script type='text/javascript'>
var blsidebar_i=new Object()
blsidebar_i.bl_igual=["sidebar-wrapper", "newsidebar-wrapper", "main-wrapper"]
blsidebar_i.blaltura_config=function(reset){
var blsidebar_1=0
var resetit=(typeof reset=="string")? true : false
for (var blsidebar_tipo=0; blsidebar_tipo<this.bl_igual.length; blsidebar_tipo++){
if (document.getElementById(this.bl_igual[blsidebar_tipo])!=null){
if (resetit)
document.getElementById(this.length[blsidebar_tipo]).style.height="auto"
if (document.getElementById(this.bl_igual[blsidebar_tipo]).offsetHeight>blsidebar_1)
blsidebar_1=document.getElementById(this.bl_igual[blsidebar_tipo]).offsetHeight
}
}
if (blsidebar_1>0){
for (var blsidebar_tipo=0; blsidebar_tipo<this.bl_igual.length; blsidebar_tipo++){

if (document.getElementById(this.bl_igual[blsidebar_tipo])!=null)

document.getElementById(this.bl_igual[blsidebar_tipo]).style.height=blsidebar_1+"px"
}
}
}
blsidebar_i.resetHeights=function(){
this.blaltura_config("reset")
}
blsidebar_i.blfunc=function(target, functionref, bl_tipo){
var bl_tipo=(window.addEventListener)? bl_tipo : "on"+bl_tipo
if (target.addEventListener)
target.addEventListener(bl_tipo, functionref, false)
else if (target.attachEvent)target.attachEvent(bl_tipo, functionref)
}
blsidebar_i.blfunc(window, function(){blsidebar_i.blaltura_config()}, "load")

blsidebar_i.blfunc(window, function(){if (typeof blsidebar_i.blsidebar_func!="undefined") clearTimeout(blsidebar_i.blsidebar_func); blsidebar_i.blsidebar_func=setTimeout("blsidebar_i.resetHeights()", 200)}, "resize")</script>Trucos y ayuda para tu blog</center></a>

Guarda el gadget para terminar.

¿No te funciona el truco?

Debes saber que en algunas plantillas (normalmente las que han sido modificadas o diseñadas), el truco no funciona correctamente, o en caso de hacerlo, aparece un enorme espacio bajo la sidebar o barra lateral.

Por otra parte, puede deberse al nombre asignado en el script (sidebar-wrapper o main-wrapper) para describir la barra lateral y el bloque de entradas, que en tu plantilla, tienen otra definición.

Flechita flotante en una esquina del blog para volver arriba

Hemos visto con anterioridad, dos trucos para conseguir una flechita, ya sea con efecto deslizante o al pie de cada entrada, que nos lleve al inicio del blog con solo un clic.

En este tercer truco explicaré la manera más sencilla de conseguir que una imagen nos permita "subir".

Sin necesidad de alojar script alguno o editar la plantilla, podemos conseguir que, tanto una imagen como una palabra o frase quede flotando en una esquina del blog, cumpliendo esta función.

Tienes dos formas de añadir el truco. La primera es la más sencilla ya que únicamente necesitarás hacer clic en el siguiente botón:

Como resultado obtendrás la siguiente imagen en la esquina derecha de tu blog:




El segundo procedimiento, a pesar de ser un poco más costoso, tiene una pequeña ventaja: podrás escoger la imagen que desees (ya sea una flecha o un icono) o escribir una palabra cualquiera.

Diseño>añadir gadget (elemento de página)>html-javascript

Inserta este código:

<a style="position: fixed; bottom: 0px; right: 10px;" href="#" title="Subir"><img src="URL DE LA IMAGEN"></a>

Reemplaza URL DE LA IMAGEN por la dirección de tu icono y listo ^[+].

Si en lugar de una imagen prefieres hacer uso de una frase utiliza este otro código en lugar del anterior:

<a style="position: fixed; bottom: 0px; right: 10px;" href="#" title="Subir">Volver arriba</a>

Puedes editar la frase "Volver arriba" por cualquier otra cosa.

Guarda el gadget para terminar.

Menú lateral flotante con efecto deslizante para el blog

Hace tiempo aprendimos a instalar un menú flotante horizontal con buscador incluido, herramienta que resultaba de mucha utilidad y era muy sencilla de configurar.

Durante varios días estuve investigando los diferentes efectos que se pueden conseguir al hacer uso de JQuery.

El resultado que obtuve fué este elegante menú lateral flotante y deslizante...

Para ver el menú en funcionamiento, accede a este blog de pruebas.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y añade estos bloques de CSS justo encima:

ul#blmenudeslizante {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#blmenudeslizante li a {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQ13iqTNuNCPo7m9xjjFmlQ_rslVL-CTXTmu4WIWL9c0mXCkhoHvm95gyJZnWywYU0Ad4y_B1FIvlz1qDkB1SfnYd22f5viOjdTak8iuZkxNl1K3MTbRG05zdmx3DqglRiF96Ck1bTA4/") no-repeat scroll 0 0 transparent;
text-align: center;
height:54px;
padding-top: 20%;
padding-left: 4px;
padding-right: 4px;
margin-right:-2px;
width:116px;
display:block;
font-size: 14px;
color: #ffffff;
}
ul#blmenudeslizante li {
width: 100px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 0;
text-indent:-12px;
}
ul#blmenudeslizante li a:hover {
color: #ffffff;
text-decoration: none;
}

Ahora busca la etiqueta </head> y agrega esto encima:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(function() {
$(&#39;#blmenudeslizante a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-70px&#39;},1000);

$(&#39;#blmenudeslizante &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},400);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-70px&#39;},400);
}
);
});
</script>

Guarda la plantilla:



Seguidamente añadiremos el código necesario para mostrar los enlaces que componen el menú.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código:

<ul id="blmenudeslizante">
<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>
<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>
<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>
</ul>

Reemplaza URL DEL ENLACE por la dirección de tu página web o blog, así como TITULO por el título que llevará el enlace.

En caso de querer añadir más de tres enlaces, pega líneas como esta:

<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>

Siempre antes de la etiqueta de cierre </ul>.

Sombra en las imágenes de tu blog con CSS

Hace tiempo descubrimos un generador de sombras para las imágenes del blog, el cual era muy fácil de usar.

En esta entrada aprenderemos un truco aún más sencillo que puede instalarse en unos pocos segundos y nos ofrece la posibilidad de mostrar las imágenes del blog con una bonita sombra.

Podemos aplicar el truco a todas las imágenes del blog.

Y es tan sencillo como dar un solo clic en el siguiente botón:

O añadiendo unas líneas de CSS en tu plantilla:

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y añade este bloque justo encima:

.post img, table.tr-caption-container {
-moz-box-shadow:4px 4px 3px #cccccc;
-ms-filter:
"progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5)";filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5);-webkit-box-shadow: 4px 4px 3px #cccccc;
}

Guarda la plantilla para terminar...




Si lo que deseas es añadir sombra en una imagen en particular (o varias) en lugar de hacerlo para todos los iconos del blog, busca la etiqueta ]]></b:skin> y agrega este otro bloque de CSS encima:

.blsombra img {
-moz-box-shadow:4px 4px 3px #cccccc;
-ms-filter:
"progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5)";filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5);-webkit-box-shadow: 4px 4px 3px #cccccc;
}

Guarda la plantilla.

Dirígete a una entrada cualquiera en la que desees aplicar la sombra.

Ahora utiliza el siguiente código para insertar la imagen personalizada:

<div class="blsombra"><img src="URL DE TU IMAGEN"/></div>

Reemplaza URL DE TU IMAGEN por la dirección de tu imagen y listo ^[+].

Notas:

- Para no estar copiando el código que aplica la sombra a una imagen en especial, haz uso de la plantilla de entrada que ofrece blogger.

- Puedes editar el color de la sombra que llevarán tus imágenes.

Sustituye en cada caso el código #cccccc por el valor hexadecimal de tu color favorito (que podrás encontrar usando la tabla de colores).

Adelfa, Laurel rosa, Balandre, Adelfas

Adelfa
Nerium Oleander

Estamos ante una planta que ofrece una gran variedad de colores, tales como el rojo, el rosado, el blanco, el amarillo o el anaranjado.

Alcanza una altura de 150 a 180 centímetros y florece (en nuestras regiones) durante el verano. Las flores, agrupadas en las cimas de los tallos ramificados, están agrupadas y son bastante simples en cuanto a su forma.

Tiene hojas alargadas, coriáceas y estrechas, con un color verde oscuro y una nervadura central de un tono ligeramente más claro que puede percibirse perfectamente en el reverso.

Nota importante: La acacia posee una sustancia tóxica e irritante tanto en sus hojas como en sus ramas y tallos, la cual contiene componentes utilizados para la fabricación de productos raticidas, por lo que después de manipularla, debemos lavarnos bien las manos.

A continuación puedes ver un listado con las variedades de adelfa de flor simple:

1) Agnes Darac, con un color rosa.

2) Album Roseum, con un color blanco-rosado.

3) Atropurpureum, con un color rojo.

4) Aurantiacum, con un color amarillo claro.

5) Conde Pusterla Cortesini, con un color rosa albaricoque.

6) Emile Shaut, con un color rojo terciopelo.

7) Mont Blanc, con un color blanca.

Y seguidamente un listado con variedades de flor doble...

1) Géant des Batailles, con un color rojo bastante intenso.

2) Madoni Grandiflorum, con un color blanco.

3) Pierre Rondier, con un color rosa.

4) Prof. Placon, con un color naranja.

5) Tito Poggi, con un color salmón-albaricoque.

Se suele colocar en maceta o jardinera y durante el verano puede situarse al aire libre.

Requiere lugares luminosos pero sin sol directo, con una temperatura comprendida entre los 18 y los 22ºC durante la primavera y el verano y no menor a 5 – 7ºC durante el invierno.

Los riegos deben ser frecuentes en verano y épocas de sequía, así como regulados durante el invierno, época en la que la acacia permanece en reposo. Tampoco será necesario el abonarla en dicho periodo.

El trasplante, realizado con un substrato ligero, debe hacerse cuando las raíces rellenen la maceta por completo, durante la primavera.

El abonado se hace cada 15 días, entre los meses de abril a septiembre.

Para podarla bastará con rebajar las ramas que hayan florecido, justo después de la floración.

Se multiplica por medio de esquejes que se cortan a una longitud de 10 a 12 centímetros, quitándoles las hojas de la parte inferior e introduciéndolos en un substrato liviano. El lugar idóneo para situarlos será un espacio húmedo.

Una vez aparezcan las primeras raíces se trasplantan a macetas individuales con mantillo.

La adelfa es bastante sensible a la cochinilla y a los pulgones, además de a las orugas. En los países mediterráneos puede tener lugar la presencia de Daphnis nerii, que devora las hojas en la acacia.

Arriba: Cochinillas en un tallo de adelfa

Puede ocurrir que las hojas comiencen a marchitarse, lo que sucede cuando hay falta de agua. Debemos regarla bien, en especial durante la floración.

Si por el contrario, las hojas se tornan a tonalidades amarillentas y terminan cayendo, podemos estar tranquilos ya que es algo completamente normal.

En caso de que la planta no florezca y no brote (o si lo hace, éstos no se abren), estaremos ante una falta de luz.

Escrito por Jaime Trujillo Escobedo

Enlace o imagen que se mueve y se esfuma al hacer clic

En el anterior post aprendimos a usar prototype y scriptaculous para hacer que la sidebar o barra lateral del blog pudiese arrastrarse hasta una posición deseada.

Con este otro truco, y haciendo uso de los mismos scripts, conseguiremos un efecto magnífico para los enlaces o las imágenes en el blog.

Puedes ver el resultado haciendo clic sobre las siguientes imágenes...

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta y añade estos scripts encima:

<script src='http://sites.google.com/site/scriptsbalcon/b/blconfigtext.js' type='text/javascript'/>
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

<script type='text/javascript'>
function PuffEffect(element){
new Effect.Puff(element, {duration:3});
}
function ShowImage(element){
new Effect.Appear(element,{duration:1, from:1, to:1.0});
}
</script>

Las líneas resaltadas en color gris son los scripts de prototype y scriptaculous usados ya en varios trucos. Si están en tu plantilla, no es necesario que los agregues de nuevo.

Ahora guarda la plantilla.

Dirígete a una entrada cualquiera para probar el efecto con una imagen o un enlace...

1) Con imagen

Utiliza este código cada vez que desees insertarle el efecto a una imagen:

<div id="myimage" onclick="PuffEffect(this);">
<img style="cursor: pointer;" src="URL DE TU IMAGEN"/></div>

Reemplaza URL DE TU IMAGEN por la dirección de tu imagen o icono.

2) Con enlace

Utiliza este código cada vez que desees insertarle el efecto a un enlace:

<div id="myimage" onclick="PuffEffect(this);"><a href="DIRECCION">TITULO</a></div>

Reemplaza DIRECCION por la url o dirección de la página web o el blog, así como TITULO por el texto que llevará el enlace.

3) Con imagen y enlace

<div id="myimage" onclick="PuffEffect(this);">
<a href="DIRECCION"><img style="cursor: pointer;" src="URL DE TU IMAGEN" /></a>
</div>

Los códigos pueden utilizarse tanto en las entradas del blog como en los elementos de página o gadgets html-javascript que encontrarás en el apartado de Diseño.

Nota:

Para no estar copiando los códigos que insertan las imágenes o los enlaces con el efecto, haz uso de la plantilla de entrada que ofrece blogger.

Permitir que los lectores de tu blog puedan "arrastrar" la sidebar o barra lateral

La participación de los lectores en un blog siempre es bien recibida. Pero lo es mucho mas si el blog en el que nos gusta permanecer leyendo puede configurarse a nuestro gusto, permitirnos el colocar las cosas en lugares distintos o personalizar su aspecto.

Se me ocurrió un método que puede ayudarte a ofrecer comodidad a los visitantes de tu blog. Básicamente se trata de habilitar la sidebar o barra lateral de forma que pueda arrastrarse a cualquier sitio.

Puedes ver el truco en funcionamiento visitando este blog de pruebas.

Utilizaremos prototype y scriptaculous para conseguir lo que andamos buscando.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade estos scripts justo encima (no necesitarás hacerlo si ya se encuentran en tu plantilla:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Seguidamente busca esta línea y añade lo que ves en color verde:

<div id='sidebar-wrapper' style='cursor:move; border:0px;' title='Arrastra la barra lateral a donde desees'>

Para terminar, busca la etiqueta </body> y justo encima agrega esto:

<div id='blmovside' style='cursor:move; border:0px;'><script type='text/javascript'>new Draggable(&#39;sidebar-wrapper&#39;);</script></div>

Guarda cambios para terminar...

Imagen o icono a la derecha de los títulos de las entradas

Los títulos de las entradas en blogger pueden modificarse de muchas formas, y una de ellas es agregándoles una imagen o icono a su derecha.

Aunque también puede hacerse por medio de unas líneas de CSS, explicaré el procedimiento para realizar el truco en HTML (lo que tiene ventajas... Podremos añadir una imagen de fondo y un icono distinto a la derecha).

Diseño>Edición de HTML>expandimos artilugios

Busca este bloque de código:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Y añade la línea que aparece resaltada en verde a continuación:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>
<b:if cond='data:post.url'>
<img style="margin-right:4px;" src= "URL DEL ICONO"/><a expr:href='data:post.url'><data:post.title/></a>

<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Reemplaza URL DEL ICONO por la dirección de tu imagen o icono ^[+].

Haz vista previa para ver el resultado y guarda la plantilla para terminar.

Artículos relacionados con imagen en tu blog

Hace tiempo aprendimos a poner el truco de artículos relacionados en el blog y posteriormente vimos la forma de instalar los artículos relacionados por categorías.

Esta vez te traigo un nuevo truco con el que podrás mostrar las entradas relacionadas de tu blog junto a una captura de imagen (que contiene el artículo)...

Puedes ver el resultado del truco en este blog de pruebas.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade este script encima:

<script type='text/javascript'>//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAMZIQi2FtG6QZw-JCuAgBmQajsVN52mdHm3pfeSS-Pbw0kBf10_8-0Qje2FPsPOQ7PxG5rbJYKBATs2r_J44O7HDjiK1iI7lNfUdrdAp1DVOo5XRuWIf5Dn5G36K1v0mWP3VtBrXHSKh0/s320/blnoimg.png';}
if(relatedTitles[relatedTitlesNum].length>44) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 44)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs() { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; if(relatedTitles.length>0) document.write('<h4>'+relatedpoststitle+'</h4>'); document.write('<div style="clear: both;"/>'); while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:4px;float:left;');
if(i!=0) document.write('border-left: solid 0.5px #6ecf59;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:108px;height:76px;border:0px;" src="'+thumburl[r]+'"/><br/><div id="related-titles">'+relatedTitles[r]+'</div></a>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</div>'); }
//]]></script>

Ahora busca la etiqueta ]]></b:skin> e inserta estos bloques de CSS encima:

#related-posts{
border: 1px solid #6ecf59;
overflow:hidden;
min-height:100%;
margin-top: 40px;
margin-bottom: 20px;
text-transform:none;
height:100%;
padding:0;
}
#related-posts h4 {
background:none repeat scroll 0 0 #D7F5D1;
border-bottom:1px solid #6ECF59;
margin:0 0;
padding:6px;
color:#333333;
font-family:Trebuchet MS,Arial,sans-serif;
font-size:14px;
font-weight:normal;
}
#related-titles{
width:114px;
height:78px;
text-align:left border:none;
padding-left:2px;
font-size:90%;
line-height:normal;
font-weight:700;
color: #315d28;
margin:4px 0 0;}

#related-posts a{color:#333;}
#related-posts a:hover{color:#333;background-color: #c3f4b9;}

Por último busca esta línea en tu plantilla:

<p class='post-footer-line post-footer-line-1'>

En caso de no encontrarla, busca esta otra:

<div class='post-footer-line post-footer-line-1'>

Y agrega este código justo debajo:

<!-- bl_Articulos relacionados -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Te puede interesar...&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- bl_Fin Articulos relacionados -->

Selecciona la cantidad de entradas relacionadas con imagen a mostrar en la línea que ves en verde, reemplazando la cifra 4 por cualquier otra.

La frase que he marcado en naranja es el título que llevará el recuadro y puede sustituirse por cualquier otra cosa.

Guarda la plantilla para terminar:




Nota:

- Para reducir el tamaño de las casillas que recogen cada entrada relacionada, observa esta imagen y edita lo que ves en color rojo.

- Si deseas editar el gadget (colores, fondos, tamaños...) y no sabes como hacerlo, deja un comentario para que pueda ayudarte.

Referencias: Blogger Plugins

Quiche de berros y espárragos

Ingredientes:

- 150 grs. de berros
- 600 grs. de espárragos
- 3 huevos
- 10 cl. de nata
- Sal
- Pimienta
- 400 grs. de pasta brisa
- Mantequilla
- 50 grs. de queso parmesano (finamente rallado)

- La receta es para 4 personas
- Dificultad: Media
- Duración 45 minutos Cocción: 20-25 minutos

Modo de preparación:

Empecemos extendiendo bien la masa con ayuda de un rodillo y apretándola con los dedos, en un molde que previamente hemos cubierto con papel parafinado para horno y unas cuantas legumbres bien esparcidas y secas.

A continuación lo introducimos en el horno durante 20 minutos, a una temperatura de 200ºC.

Lavamos los espárragos, los cocemos en agua y los salteamos bien durante 5 minutos, en una sartén rociada con mantequilla. Los salpimentamos.

Seguidamente lavamos los berros y los mezclamos con dos de los tres huevos enteros, una yema de huevo, la sal, la pimienta, el queso parmesano y la nata hasta obtener una textura compacta y cremosa.

Esta crema se extiende sobre la masa y después se le añaden los espárragos, que se cubrirán también con crema.

Por último lo introducimos en el horno a 200ºC durante 25 minutos para después servirla templadita.

Escrito por Jaime Trujillo Escobedo

Modificar o personalizar el formulario de comentarios

Al dejar un comentario en un blog de blogger nos podemos encontrar con tres métodos: encontrar el formulario de comentarios incrustado bajo el artículo, un enlace que abre el formulario en una ventana emergente u otro que nos conduzca directamente a una página aparte en la que está el formulario.

En cualquier caso y suponiendo que tienes configurado el formulario de comentarios incrustado bajo las entradas ^[+], comenzaremos a sacarle el máximo partido para editar prácticamente todo lo que lo compone.

Diseño>Edición de HTML>expandimos artilugios

1) El primer paso será centrar el formulario de comentarios. Para ello, busca la etiqueta ]]></b:skin> y pega este bloque de CSS encima:

/* Formulario coment personalizado */

.comment-form {
width:412px;
margin:0px auto;
}

Si deseas enmarcarlo y añadirle un fondo de imagen o color, utiliza este otro bloque:

.comment-form {
color: #000000;
background: #99CC66;
border:2px solid #cccccc;
height:430px;
margin:0 auto;
padding:10px;
width:400px;
}

color: #000000; Representa el color del texto (negro). Puedes editarlo al reemplazar #000000 por el código del color escogido en la tabla de colores.

background: #99CC66; Representa el fondo del recuadro (verde). Puedes editarlo con ayuda de la tabla de colores.

En caso de querer añadir una imagen de fondo, cambia dicha línea por esta otra:

background: transparent url("DIRECCION DE LA IMAGEN") repeat top left;

Introduce la dirección de tu imagen donde dice DIRECCION DE LA IMAGEN.

border: 1px solid #cccccc; Es el borde que tendrá el recuadro. El grosor, 1 píxel, puede aumentarse o disminuirse, así como el estilo solid, que puede cambiarse haciendo uso de esta entrada (en la cual se explican los tipos de borde). Será de color gris al no ser que sustituyas dicho valor hexadecimal (#cccccc) por el de tu color favorito.

height:430px; Indica la altura que tendrá la caja que enmarca el formulario (430 píxeles)

padding: 10px; Es la distancia existente entre el borde del recuadro y el contenido (texto). Puedes aumentar esta distancia cambiando el valor 10.

width: 400px; Representa el ancho del recuadro (400). Modifícalo hasta ajustarlo a tu blog.


2) Seguidamente vamos a editar el texto "Publicar un comentario en la entrada" que aparece encima de nuestro formulario.

Para ello, visita esta otra entrada.


3) Otra opción será la de editar el recuadro que contiene el mensaje del formulario (que previamente hemos escrito en el apartado Configuración > Comentarios > Mensaje del formulario de comentarios).

Antes de comenzar a personalizarlo a tu gusto, añade este bloque justo debajo del que insertaste en el paso 1, antes de la etiqueta ]]></b:skin>

.comment-form p{
color: #000000;
border: 1px solid #cccccc;
background: #99CC66;
padding: 10px;
width: 368px;
}

Puedes editarlo a tu gusto y personalizar los colores. Para descubrir como hacerlo despliega esta sección [+/-].

color: #000000; Representa el color del texto (negro). Puedes editarlo al reemplazar #000000 por el código del color escogido en la tabla de colores.

border: 1px solid #cccccc; Es el borde que tendrá el recuadro. El grosor, 1 píxel, puede aumentarse o disminuirse, así como el estilo solid, que puede cambiarse haciendo uso de esta entrada (en la cual se explican los tipos de borde). Será de color gris al no ser que sustituyas dicho valor hexadecimal (#cccccc) por el de tu color favorito.

background: #99CC66; Representa el fondo del recuadro (verde). Puedes editarlo con ayuda de la tabla de colores.

En caso de querer añadir una imagen de fondo, cambia dicha línea por esta otra:

background: transparent url("DIRECCION DE LA IMAGEN") repeat top left;

Introduce la dirección de tu imagen donde dice DIRECCION DE LA IMAGEN.

padding: 10px; Es la distancia existente entre el borde del recuadro y el contenido (texto). Puedes aumentar esta distancia cambiando el valor 10.

width: 368px; Representa el ancho del recuadro (368). Modifícalo hasta ajustarlo a tu blog.

Guarda la plantilla para terminar.

El resultado será muy similar al que puedes ver en la siguiente imagen:

Orugas de mariposas, Oruga cigarrera, Oruga de librea, Oruga de zurrón

Estos insectos de apenas 3 centímetros de longitud y de forma cilíndrica provocan verdaderos desastres en el follaje de una planta.

Daños:

El borde de las hojas se encuentra entre su alimento favorito, aunque suele atacar a menudo al cuello de la planta y a los tallos. A pesar de no ser peligrosos, los daños que provoca no son saludables para las hojas y tallos, por lo que el crecimiento se retardará.

Tratamiento preventivo: Se aconseja vigilar diariamente las plantas.

Tratamiento curativo: El uso de insecticidas es recomendable ante un ataque formado por un gran número de individuos. En caso de localizar una oruga, se aconseja retirara como sea de la planta.

Cualquier planta puede ser víctima de una oruga.
A continuación veremos el efecto y la cura ante una plaga de orugas en las hortalizas y los frutales.

En las hortalizas:

Las Plusias o Gusanos verdes (Autographa gamma) son las más comunes en las hortalizas. Actuando de noche, devoran los frutos y las hojas; Se diferencian de los Gusanos grises debido a que pasan toda su vida de manera aérea.

Crea una crisálida en la planta, en un capullo bastante sedoso y blanco.
Pasando todo el invierno bajo la protección de su propia seda, las plusias crecen y se convierten en una mariposa de unos 4 centímetros de longitud.

Cura:

Deshaciéndonos de las malas hierbas que puedan crecer en la maceta será un impedimento más para los nidos de estos insectos.

Es posible hacer uso de un insecticida como el Bacillus thuringiensis o Piretrinas, los cuales son ecológicos, así como de un atrayente sexual o “trampas de feromonas”, lo que atraerá a las mariposas adultas hacia la planta.

La Oruga del tomate (Heliothis armigera)

Como su nombre indica, el tomate es la planta que se ve afectada por esta oruga, pero existen muchas otras como el maíz, tabalo, clavel, algodón o el pimiento que también corren un grave riesgo.

La crisálida suele aparecer en el suelo y perdura durante todo el invierno hasta dar lugar a la aparición de los adultos, que alcanzan los 3-4 centímetros de longitud.
Las hembras ponen sus huevos sobre las hojas de la planta, así como en los tallos, llegando a alcanzar la cifra de 1.500.

La larva, siendo muy resistente a los insecticidas, mide aproximadamente 5 centímetros y es dañina para las hojas de la col o la flor del clavel (entre otras).

Control

Como previamente vimos, eliminar las malas hierbas de la maceta será el primer método para prevenir la proliferación.

La colocación de trampas de feromonas (atrayente sexual) puede ayudar a la detección de los primeros vuelos de adultos y como método de control.

Es posible, en este caso, hacer uso de un ácaro depredador como el Bacillus thuriengiensis, el Triclorfon o la Piretrinas.

En los frutales:

En primer lugar voy a describir la Oruga de zurrón o peluda (Euproctis chrysorrhoea), que con un tamaño máximo de 3 centímetros consta de pelillos urticantes y un color negruzco.

Arriba: Oruga de zurrón (larva)

Arriba: Oruga de zurrón (adulto - mariposa)

A base de unir hojas secas con ayuda de ramitas o hilos sedosos que encuentran en los árboles frutales, la oruga de zurrón debe su nombre a la especie de bolsa que fabrica para pasar el invierno.

Una vez ha llegado la primavera, este insecto sale de su nido para comenzar su etapa como devoradora y arrasa tanto con yemas como con las hojas, esquivando los nervios de éstas últimas y la epidermis.

La Oruga de librea (Malacosoma neustria) es otro de los insectos que suele encontrarse frecuentemente en los frutales, en especial en los manzanos, los perales o los almendros.

Arriba: Larva (oruga) de librea

Alcanza un tamaño de 3 – 4 centímetros en estado adulto.
Estando inactivas por el día, aparecen a principios de verano para devorar los brotes y las hojas.

Nacen en primavera y construyen nidos con hilos entre los tallos y las hojas.

Escrito por Jaime Trujillo Escobedo

Lista de blogs con movimiento personalizable

Lo más probable es que si tienes un blog en blogger conozcas muy bien que existe la posibilidad de añadir gadgets (elementos de página) a la sidebar o barra lateral. Uno de los gadgets más destacados y, al mismo tiempo, más utilizados es el de "Lista de blogs".

Dicho elemento sirve para mostrar lo que lees con un blogroll (lista de enlaces) de tus blogs favoritos.

Hace un tiempo expliqué la forma de personalizar gadget de página y se me ocurrió que darle movimiento no sería una mala idea, por lo que te enseñaré a aplicárselo.

El resultado es bastante prometedor ya que los blogs enlazados se van desplazando hacia arriba, haciendo posible el que tu blog cargue con mayor rapidez.

Puedes ver un ejemplo en este blog de pruebas.

¿Te gusta el resultado? Sigue los pasos para conseguir la lista de blogs en movimiento...

Comprueba que has añadido el gadget "Lista de blogs":

En caso de no tenerlo, agrégalo a tu barra lateral.

Diseño>Edición de HTML>expandimos artilugios

Busca esta línea:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>

Lo que ves en naranja es el título de mi gadget. El tuyo tendrá el título que le hayas atribuido.

Un poco más abajo encontrarás esta otra línea:

<b:includable id='main'>

Ahora borra desde esta línea hasta su etiqueta de cierre </b:includable> (ambas incluidas) como te muestro a continuación:

Ver / Ocultar el código

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>

<div class='item-content'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>

</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Una vez eliminado, inserta este otro código en su lugar:

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<marquee direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1' scrolldelay='1' style='height: 240px; padding: 4px; border: 2px solid #cccccc;'><ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon' style='visibility: hidden; display: none;'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title' style='margin-bottom: 14px; font-size: 14px; text-decoration: none;'>
<a expr:href='data:item.blogUrl' style='text-decoration: none;' target='_blank'>
<img src='http://icons3.iconfinder.netdna-cdn.com/data/icons/Sizicons/12x12/arrow_2_right_round.png'/> <data:item.blogTitle/>...</a>
</div>
<div class='item-content' style='text-decoration: none;'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' style='color: #006633; text-decoration: none;' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>...
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time' style='margin-top: 6px; color: #006633; text-align: right;'>
<img src='http://icons3.iconfinder.netdna-cdn.com/data/icons/circular%20icons/bullet_black.png' style='padding-right: 4px;'/><data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='margin-bottom: 14px; border: 3px solid #ccc; clear: both;'/>

</li>
</b:loop>
</ul></marquee>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>

</span>

<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>

En caso de querer editar el movimiento, reemplaza el valor 1 (marcado en rojo) por 2, 3, 4...

Para cambiar la dirección y hacer que los blogs "bajen" en lugar de que "suban" cambia up por down.

Guarda el gadget para terminar.

¡Ya podrás disfrutar de una bonita lista en movimiento!

El territorio del gato: efectos de un cambio de casa

Llegando a medir hasta un total de treinta hectáreas, el territorio de los gatos es algo lo suficientemente importante como para que éstos se sientan de manera inmediata un indigente, sin rango social alguno, que necesitará adaptarse y encontrar su nuevo lugar al haberse mudado de su hogar.

Tanto en los pueblos como en las ciudades, los gatos cuentan con una población de individuos enorme, que se asemeja a la humana y que, por desgracia, su territorio se reduce cada vez más. Por suerte y al contrario que sus parientes más salvajes, el gato no siente estrés por falta de espacio y tampoco se ve afectado por trastorno psíquico alguno.

Si usted tiene que mudarse a un nuevo domicilio, sepa que no existe mayor tragedia para un gato adulto que la de cambiar su territorialidad y por tanto, deberá ser paciente y ofrecerle la mayor ayuda posible.

Es normal que en el nuevo barrio o la nueva urbanización, los otros gatos acudan a su jardín o terraza únicamente con el fin de pelearse con su gato. Lógicamente, será fundamental que usted evite estos desastres y que haga lo posible por espantar a cualquier inquilino desconocido, así como a intervenir durante una pelea.

Con el paso del tiempo, el gato recuperará su reputación en el nuevo entorno y sus vecinos “permitirán” la estancia en esa porción de terreno que le ha sido atribuida a su mascota.

Un gato bien alimentado controlará un territorio mucho menor al de otro en estado salvaje o simplemente, con carencia de alimento.

Escrito por Jaime Trujillo Escobedo

Galería de imágenes Brown Box (JQuery)

Tras haber explicado la forma de insertar una galería de imágenes en el blog con Lytebox, continué con los experimentos e JQuery.

Esta vez traigo un script que he modificado del original, ideado por Sohtanaka de tal manera que las imágenes de la galería se muestran en una pequeña caja marrón con los bordes redondeados (por ello la llamé Brown Box).

Su instalación no es muy complicada y el resultado es bastante elegante.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade esto encima:

<!-- Galeria balcon Brown box -->

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;ul.blcajagal li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);
} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});

$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 300);
});
$(&quot;ul.blcajagal li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;);
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});
});
</script>
<style>
ul.blcajagal { float: left; margin: 0; padding: 10px; width: 360px; list-style-type: none; list-style: none;}
ul.blcajagal li img { width: 100px; height: 100px; background: #482708; -ms-interpolation-mode: bicubic; border: 1px solid #391F05; padding: 6px; left: 0px; top: 0px; position: absolute;}
ul.blcajagal li img.hover { border: none; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBvVZIkyUCsQZ5zrK8r1UDOlt3lz9iwU86O1dEfVbr5l98dxTN9t5HdCLyh1dDYNYe4qm1Sl1UqhtTQdQRCKDCuWgVTaI_mkxt2r_fgXOaSu5eFXHfoDviMcEMrq2KfoF_tqTjCHtC1xbR/s320/caja.png) no-repeat center center; text-decoration: none;}
ul.blcajagal li { margin: 0; position: relative; padding: 5px; float: left; width: 120px; height: 120px;}
</style>

<!-- Fin galeria balcon Brown box -->

Seguidamente guarda la plantilla:




Ahora pega este código en el lugar que desees colocar la galería de imágenes (es aconsejable que hagas uso de una página estática o independiente, ofrecida por blogger).

<center><ul style="margin-left: 42px;" class="blcajagal">
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
</ul></center>

Reemplaza URL IMAGEN por la dirección de tus imágenes en cada línea ^[+].

Hay un total de seis espacios disponibles para introducir las fotografías. En caso de necesitar más casillas, agrega esta línea en el código tantas veces como sea necesario:

<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>

Ten en cuenta que siempre debe permanecer antes del cierre </ul>.

Publica la entrada para finalizar y obtener así la hermosa galería Brown Box ^^.

Mostrar y ocultar - Expandir y contraer cualquier cosa en el blog

El truco de expandir y contraer elementos suele ser bastante apreciado en el mundo del blogger, ya que resulta de bastante utilidad para acortar alguna entrada, evitar que el blog tarde en cargar, hacer una navegación más cómoda...

Nosotros hemos aprendido a expandir y contraer las entradas en las páginas de etiquetas ^[+], a hacer que el contenido de los gadgets (elementos de página) pueda desplegarse o recogerse ^[+] o a conseguir un efecto deslizante que muestra u oculta cualquier elemento ^[+].

Pero en esta entrada aprenderemos el truco de "expandir y contraer" básico, el más sencillo y el que mejor suele adaptarse al tiempo de carga de un blog.

Aunque después veremos algunos ejemplos, vamos a empezar la instalación.

Diseño>Edición de HTML>expandimos artilugios

Texto oculto con enlace para visualizarlo

Busca la etiqueta </head> y añade este script encima:

<script type='text/JavaScript'>
function blmostrocult(blconted) {
var c=blconted.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>

Ahora guarda la plantilla:



Dirígete al lugar en el que deseas insertar el enlace "mostrar - ocultar", ya sea una entrada o un gadget (elemento de página) que encontrarás en el apartado de Diseño.

Este es el código que vas a necesitar siempre que desees hacer uso del truco:

<a onclick="return blmostrocult(this);" style="cursor: hand; cursor: pointer;">TITULO</a><div style="display: none;">
CONTENIDO OCULTO
</div>

Simplemente debes reemplazar TITULO por el texto que llevará el enlace y CONTENIDO OCULTO por el texto, la imagen o cualquier cosa que desees ocultar.

Al ser tan sencillo y rápido, este truco puede usarse para infinidad de cosas. Seguidamente puedes ver algunos ejemplos...

- Un ejemplo con texto

Este es el texto que permanecerá oculto antes de que el lector pulse sobre el enlace. Como puedes ver, resulta de mucha utilidad el poder recoger secciones del blog. Escribir un mensaje, una advertencia o simplemente dividir tus artículos para que tu bitácora cargue con rapidez sería una idea magnífica.

- Un ejemplo con imágenes

Texto visible con enlace para ocultarlo

Probablemente lo que desees no sea mantener el contenido oculto y que, al hacer clic en el enlace, quede visible. Puede que prefieras mantener un texto a la vista y que, si el lector lo desea, pueda ocultarse...

- Ocultar el texto

Este es el texto que permanecerá visible antes de que el lector pulse sobre el enlace y lo oculte. Como puedes ver, resulta de mucha utilidad el poder recoger secciones del blog. Escribir un mensaje, una advertencia o simplemente dividir tus artículos para que la bitácora cargue con rapidez sería una idea magnífica.

Para ello, utiliza este script en lugar del anterior (insertándolo en el mismo lugar):

<script type='text/JavaScript'>
function blmostrocult(cual) {
var c=cual.nextSibling;
if(c.style.display==&#39;block&#39;) {
c.style.display=&#39;none&#39;;
} else {
c.style.display=&#39;block&#39;;
}
return false;
}
</script>

Y este otro código para activar el truco:

<a onclick="return blmostrocult(this);"><span style="font-style: italic;">OCULTAR</span></a><div style="display: block;">
CONTENIDO
</div>

Reemplazando OCULTAR por el texto del enlace y CONTENIDO por el texto, imagen o artilugio.

Notas:

Para no tener que estar copiando el código que inserta el enlace para expandir y contraer secciones del blog, haz uso de la plantilla de entrada ofrecida por blogger.

En caso de querer utilizar una imagen o un botón como enlace para desplegar o recoger elementos, reemplaza en el segundo código, TITULO por este código:

<img src="URL DE LA IMAGEN"/>

En donde dice URL DE LA IMAGEN, inserta la dirección del icono ^[+].