Menú para cambiar el tamaño del texto del blog a opción del lector

Con anterioridad aprendimos a insertar el menú que ofrece la posibilidad de cambiar el tamaño del texto en el blog, además del tipo de fuente.

Para obtener dicho widget usábamos javascript y no era necesario alojar scripts externos.

Este otro menú es, al igual que el anteriormente descrito, muy sencillo de instalar y funciona correctamente, además de resultar más cómodo.

Esta es una imagen del menú:

Puedes probarlo en este blog de pruebas.

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

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

<script src='http://sites.google.com/site/scriptsbalcon/b/blconfigtext.js' type='text/javascript'/>

Seguidamente guarda la plantilla.




A continuación vamos a utilizar un gadget html-javascript para insertar el menú en la barra lateral.

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

Pega este código:

<center><a href="javascript:ts('body',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfMU5N_t6CROV3vsCTN25TFVlcx18HK_RU6xFrRXosulg2pV9stIi0V2o94dmARfYmy036eNJPSFsc_oPVtmccAsnFV3d53LIBhCyesjgQu8oJNEJTFHzK0DcSLrDCN_0Px0QS-oVfYZA/s320/blmas.png" title="Ampliar tamaño texto" /></a><a href="javascript:ts('body',-1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAVP3TViYV103EvwlKYLm4JPhoAGAg3aIbTQlyp1SCXssBaZEKdWVL5Xp-_Qfq_Dvei3ReT-8aL4ZwKA_sNGezdc2StBTamu_Ti-CT9jnRyZhrXB-ap_vUU9ky2X1xWQt9WseqsYFDJ4g/s320/blmenos.png" title="Disminuir tamaño texto" /></a href="javascript:ts('body',-1)"></center>

En caso de querer editar el aspecto...

- Cambiar las imágenes del menú:

Reemplaza las siguientes líneas...

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfMU5N_t6CROV3vsCTN25TFVlcx18HK_RU6xFrRXosulg2pV9stIi0V2o94dmARfYmy036eNJPSFsc_oPVtmccAsnFV3d53LIBhCyesjgQu8oJNEJTFHzK0DcSLrDCN_0Px0QS-oVfYZA/s320/blmas.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAVP3TViYV103EvwlKYLm4JPhoAGAg3aIbTQlyp1SCXssBaZEKdWVL5Xp-_Qfq_Dvei3ReT-8aL4ZwKA_sNGezdc2StBTamu_Ti-CT9jnRyZhrXB-ap_vUU9ky2X1xWQt9WseqsYFDJ4g/s320/blmenos.png

Por la URL (dirección) del icono "agrandar texto" y "encoger texto" respectivamente ^[+].

- Usar una palabra o frase en lugar de un icono:

Para ello, haz uso de este otro código:

<center><a style="margin-right: 4px;" href="javascript:ts('body',1)">Agrandar texto</a><a href="javascript:ts('body',-1)">Encoger texto</a href="javascript:ts('body',-1)"></center>

Guarda el gadget para terminar.

Notas:

El menú agranda y disminuye el tamaño del texto en todo el blog. Para hacer que únicamente se pueda editar el tamaño del texto de las entradas reemplaza body por main en el segundo código, que debe insertarse en el gadget (necesitarás hacerlo tres veces).

Para hacer que el menú no afecte a la velocidad de carga del blog, es aconsejable que alojes el script (el que utilizamos en el primer paso) en un servidor, como puede ser XooImage o Google sites.

Descárgalo haciendo clic aquí.

Simple reproductor de audio en el blog (Google Reader)

Seguramente todos nos hayamos puesto a pensar alguna forma de insertar música en el blog y poder compartir nuestros artistas favoritos con el resto del mundo.

Google Reader nos ofrece un sencillo reproductor de funcionamiento e instalación simple.

Funciona de maravilla y puede ponerse tanto en una entrada como en un elemento html-javascript de la barra lateral del blog.

Para insertarlo en tu blog (ya sea en un post o en un gadget) necesitarás este código:

<object width="360" height="27" id="movie" type="application/x-shockwave-flash" data="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=DIRECCION ARCHIVO">
<param name="movie" value="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=DIRECCION ARCHIVO" />
<param name="wmode" value="transparent" >
<param name="allowScriptAccess" value="never">
<param name="flashvars=" value="playerMode=embedded">
</object>

Ahora solo necesitas reemplazar DIRECCION ARCHIVO por la URL de tu canción Mp3.

Para obtener dicha dirección debes alojar el documento. Yo utilicé Google sites y no muestra ningún problema, además de ser bastante rápido a la hora de subir el archivo.

Publica la entrada o el gadget html-javascript y tus lectores podrán disfrutar de una canción (o varias...).

Notas:

Si alojas la canción en Google sites, ésta tendrá una dirección (URL) con una estructura muy similar a esta:

http://sites.google.com/site/scriptsbalcon/b/bethoven-3thsymphony.mp3?attredirects=0&d=1

Tan solo necesitas eliminar la parte resaltada en negrita antes de introducirla en el reproductor. De esta forma, el archivo podrá ser reproducido correctamente.

Es aconsejable utilizar archivos con formato Mp3. A pesar de haber probado con extensiones .wav, el resultado no es muy satisfactorio (además de retrasar el tiempo de carga).

Flechita al final de las entradas para volver arriba

Tras haber aprendido la forma de insertar una imagen en una esquina del blog y que ésta nos trasladase al inicio del blog con un solo clic y mostrando un efecto deslizante ^[+], podrás, con esta entrada, inluir un icono en el pie de todos tus posts para ofrecer a los lectores la opción de "Subir" o "Volver arriba".

En este blog puedes ver el truco en funcionamiento. Para instalarlo, bastará con seguir los siguientes pasos:

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

Busca esta línea:

<div class='post-footer'>

Un poco más abajo encontrarás una etiqueta similar a alguna de estas dos:

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

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

Simplemente tienes que añadir este código debajo:

<a href='#' style='bottom: 0px; right: 0px;' title='Subir'><img align='right' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge0LKEI-Jz0PW1J_UiguPDriBySj1dSyCwB_N3N2PCASEtokNHE0kQ25nb0NDISb5oGxSW93LK3PUhtnYtJ8GjZf3M9l0otDYHFJM3sghfRG7_y7UhZByUTCvEjozB31d6Od-kB3NVzF4/s320/blsubirp.png'/></a>

La línea marcada en color verde es la dirección de la flecha que aparece en el ejemplo. Puedes reemplazarla por la URL de tu imagen.

En caso de querer usar una frase, utiliza esta otra línea:

<a href='#' title='Subir'>Vuelve al inicio</a>

Guarda la plantilla para terminar:

Paxilo enrollado

Paxilo enrollado
Paxillus involutus

Paxillus involutus: Tóxica

Este hongo fue considerado durante muchísimo tiempo como seta comestible. Hoy en día se la conoce perfectamente y se califica como no comestible. Tras haber sido el factor culpable de numerosas intoxicaciones o enfermedades, entre ellas destaca la anemia hemolítica.

Pertenece a la clase de los Bsidiomicetos, al orden de los Boletales y a la familia de las Paxiláceas.

El paxilo enrollado tiene la carne muy amarga y puede resultar mortal, sobre todo si es ingerida en estado crudo.

El sombrero, convexo, plano y deprimido al final presenta un color parduzco. Tiene una cutícula amarilla parduzca y es un tanto viscosa.

La carne es también amarilla y se torna a una tonalidad parda rojiza al entrar en contacto con el aire. Al cocinarla se ennegrece.

Las láminas, de color ocre, son decurrentes, están ramificadas y son delgadas. El pie es corto y se ensancha hacia éstas. Dota de un color amarillento (más pálido que el del sombrero).

Suele encontrarse durante todo el año (siempre y cuando, las condiciones sean adecuadas) bajo los árboles caducifolios así como bajo diversas coníferas, además de estar presente también bajo los álamos o abedules.

Superándole en tamaño tenemos al Paxilo de pie negro (paxillus atrotomentosus), otra especie que además se puede diferenciar de la actualmente descrita por su color oscuro. Se encuentra alrededor de los viejos tocones o troncos de los pinos y tampoco es comestible pues la carne es amarga.

Escrito por Jaime Trujillo Escobedo

El Yorkshire Terrier

El yorkshire Terrier es uno de los perros más populares en las ciudades. Su éxito como raza comenzó en los años 70. Perteneciente a la clase Toy, al grupo de los perros más pequeños en la raza canina, es un fiel compañero con un carácter muy especial.

La raza Yorkshire Terrier es el resultado de varios cruzamientos, como Dandie Dinmonty, Manchester Terrier, Skye Terrier y Maltés, que fueron estudiados por criadores ingleses con el propósito de crear una nueva raza, de tamaño pequeño, que pudiese "limpiar" las pestes, como los roedores, instalados en las casas de la época.

Además de conseguir lo que deseaban, los criadores obtenieron también una nueva raza llena de vitalidad e inteligencia.

Tiene un instinto de protección muy marcado y es sin duda un fiel compañero para todo el que le aporte cariño. A pesar de estas buenas cualidades, el Yorkshire es también un tanto desobediente y caprichoso (sobre todo si le fomentamos sus "peticiones"). Su temperamento es abundante, a pesar de su pequeño tamaño, por lo que una buena educación es el factor de mayor importancia.

Las Características

Pareciéndose bastante a un terrier enano, el yorkshire tiene un pelo largo y sedoso que adquiere tonalidades azul gris palteado o azul acero brillante, además de un color dorado en la cabeza, más oscuro a los lados, que le cae por los laterales del hocico. Alcanza un peso de 6 kilos y su aspecto demuestra elegancia y armonía.

La cabeza:

Su cráneo tiene un tamaño pequeño y es un tanto plano, además de no ser del todo redondo.
La nariz es negra y el hocico, cubierto por el pelo dorado, no es largo.

La mandíbula, dotada de dientes bien implantados en los maxilares, es completa y regular; Produce una mordida de tijera, lo que viene a significar que los incisivos superiores encajan a la perfección por delante de los inferiores.

Los ojos son medianos, chispeantes, de tonalidades oscuras y con tonalidades negruzcas en el borde de los párpados.


Las Orejas:

Son puntiagudas y adquieren un color dorado, cubiertas de pelo corto y erectas.

El Cuerpo:

Una espalda nivelada y sostenida, con proporciones prácticamente perfectas.

El cuello suele ser bastante largo, a pesar de su pequeño tamaño.

La Cola:

Dotada de una gran cantidad de pelo azulado, suele amputarse (por costumbre) hasta una longitud mediana, lo que la eleva un poco más que la altura del lomo.

Realiza un movimiento equilibrado, dotado de bastante empuje y mantiene el nivel de la espalda recto, con los hombros inclinados al mover las extremidades.

Escrito por Jaime Trujillo Escobedo

Las vitaminas en mi perro

Todo animal necesita un total de seis nutrientes, que son: los lípidos, el agua, los minerales, las proteínas, los hidratos de carbono y las vitaminas.

Siendo necesarias e imprescindibles para la vida y un correcto desarrollo del metabolismo, las vitaminas o moléculas orgánicas se deben administrar en cantidades pequeñas, junto al alimento.

Algunas vitaminas no pueden obtenerse junto al alimento y por ello son sintetizadas en el organismo, lo que evita la aparición de una carencia notable.

La forma más sencilla de clasificarlas es utilizando las características de su soludibilidad, lo que las divide en dos claros grupos: las solubles en grasas (o liposolubles) y las solubles en agua (o hidrosolubles) que pertenecen al grupo B y vitamina C.

Al llevar dietas pobres en grasas nos exponemos a una carencia de vitaminas liposolubles, así como de vitaminas hidrosolubles, las cuales no pueden acumularse en el cuerpo.

Actuando como un "catalizador", cada vitamina tiene su función o misión específica en el organismo, como en la reproducción y la visión (la vitamina A), la fabricación de glóbulos rojos (la vitamina B), la formación y reparación del esqueleto (la vitamina D) o en la coagulación (la vitamina K).

Las vitaminas liposolubles son eliminadas junto a la bilis, en las heces del animal, ya que son ingeridas y extraídas junto a los lípidos.

A continuación mostraré una tabla con las principales consecuencias de la falta o el exceso de los complejos vitamínicos en el organismo del perro:




Escrito por Jaime Trujillo Escobedo

Menú que cambia el color de fondo del blog al pasar el cursor por encima

Tras haber aprendido la forma de insertar el botón en el blog que, al pulsarse, amplía la zona de las entradas y oculta la barra lateral, continuaremos con otra opción muy curiosa que puede ofrecerse a los lectores de nuestro sitio web.

Se trata de un menú a base de colores que construí con unos simples atributos en javascript, y que, al pasar el cursor sobre cualquier recuadro, el fondo del blog cambia automáticamente al color que la casilla encierra.

Aquí puedes ver una imagen del menú:

Y aquí encontrarás un ejemplo en funcionamiento.

Para instalarlo en tu blog bastará con seguir estos sencillos pasos:

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

Pega este código:

<center><table border="0" style="cursor:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOpbCxKqrjywvB5YZB8OsDCafeXCJ7Z2xwM2yEmxAP6Fc4yj21fdyIk9JUf1abjLgQIvS39LjGjcE71ljYvPUmm-x8PCOrErAUzoTw0YNXKIGVdpN6XZCaeutOGs6k6Gz9zaab4t_9m2g/s400/blcursorgif.gif'), auto;"" align="center" width="22%">
<tr>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#d9d13f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMk9O9iBKCkDfdur_BFy6VGZHgN2tEnb3YfT2SSGi3cEXv1BXce5uFBJ8cU7Mo0mEdoSuNbF-DFgnE7y7zJ-U1DQh-goVQ6wUx_KALeyCc3v5Epl8KjA32HqP8pQG5NBcJ20EhSQ-uqp0/s320/blfondoamarillo.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#3f6dd9'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzLZI1q4ubcR1oeKIeQ5FrFeZi5_ukmSs0sLmDa0z6MXucNge2jTi8d91Lik-xgxE4rvzveFdBUsiM1iRDiN2eGsiO7c1qwhz3iD4UJoXXt0TzWHLCECGHXHJ9iYR8x2exKsn8P4lhfwJG/s320/blfondoazul.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#d9993f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFvcZdydZuyKCb2WRYSELFfz8-5sNGEg48KCDrPBm_95qCxWE-dBtKgFfduGTjDVCT0h5dIR1rabcYXyvjqNGceT26Grb0lSowxUlrHlNd8Hj5fHUv__D1tRaGe_VDzu4WUUQAI91d5NZD/s320/blfondonaranja.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#cccccc'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCSbVUj21uA3-gBz0RgbPkuUDAJoRSwTguX2zabcnmoqB1_W05MvNKoKG7XkggxwFabC4R_fNp-WyFRg1XobmpO7hCPh9UkCgpw5YxBlKMyB9RrO2_J3j1Z7PpTqcyCIWnz0fkeLLIHinN/s320/blfondogris.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#ffffff'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2xyTKBuEt79c49Kn40CuXcmcGER7GKr4dSNJx2cBK9yfNf2fhbHU-0GQFMIdEMTTxNtD8C8NrJRHb-f2UNB2IKFKQc04iMjcUa-RhBncsDft68FxjizxYpDndRYgPFBB-G46t4Xt3e9w/s400/blfondoblanco.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#9b5b1c'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqsE3Kgt8-GuyLCHDmAU_GKUxAcEPXkOCuDsy-xCDpKSvkjewikNI1Yaw_MIcXm5vohec4oh-Jb5LoHhlnwDtpmHs57zDsK5_FV0kCjIG8EfDi-5OsvyUQnGrcHMVUcharQ2YXkN8AYsY6/s320/blfondomarron.png" /></span></td>
</tr>
<tr>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#57d93f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXS4FdxBsUsIbJcOeNwG8QUfpw2c2OY7DuJa4SLEnkJw6BoB3s170EdXsr-5eZLx8XJH_8iGYZVdxgSPhBFtlnn6kcfHNZ7UDeF1FwcGugq_9_aULZwNtv4nI1oE0T4VQe0qCH55CAYiwf/s320/blfondoverde.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#d9483f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0Gvt9p5fLTdX14zO3UAtTJh-cz36enCjg2QRCJQB98AE9uvQN9cjpByDl_CIgGxGqNKReKFHScf9Bjf-MKo7dwDdmV_ihSI7hf0vp5YWdKlJ8HS7oY14CzvDr2LL2VuskECCMsJMSmax/s320/blfondorojo.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#FFCCCC'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibwibb9ryUMvN-rVpPVIoW7qfibeX9FiAcUotJJ6rEq6NnDOLXOW8zvPSdOAS8nhPotWeqy7cNucHEf0VlIrrvnzSduL7VGGuIS7_qK0nlWcz1b2OfFzklNG9iAh_pFjN7b5Qd4JDpHmuq/s320/blfondorosa.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#993fd9'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB8OeLk44veebt9v9D27b5ikGAu5eizmI3V2MdPm2AiUV9MpHwPil-5-a6ykUrFKaC0zhSwk0V72FQi9518kxxFQd1yO_7uHflt5lp_7_HOxnV9iu_5JgPbh5HP0DhgS4aeXyBWVoVUUtE/s320/blfondomorado.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPEg1ETxMWA3JElpXEOZhv86aRKdnb01NXEXI8EHYNEnu9r-SyAWMrt36EjE3zEC0gjMjgUHjzQv-n5AsBdLll99emSKLUVwch3wIb52HBfo3lRYp5O_MB-rQLsb7mYC1oWlbYbrRPk4dV/s320/blfondonegro.png" /></span></td>
<td><span onmouseover="javascript:document.body.style.backgroundColor='#74b8fb'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm-mjMPDovwJ0zjUHcLIxdhpYB62Qs_93aFwLY2TZfTZ0FEB2m_1yEMJDaxUY-2RLEl3_kVySUpdGAN-FUjWWYxn5kOvPlueKfymVE2Bw_M6idrEueKeBRqdlHCIxQC9kF4WxxvO3ZZ85T/s400/blfondoazul2.png" /></span></td>
</tr>
</table></center>

Pulsa el botón "Guardar" y habrás terminado.

Aunque en el menú hay bastantes colores, si deseas añadir alguno más o, por el contrario, deshacerte de uno en particular necesitas hacer lo siguiente [+/-]

El código se compone a base de líneas como esta:

<span onmouseover="javascript:document.body.style.backgroundColor='#d9d13f'; document.body.style.backgroundImage='none';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZMk9O9iBKCkDfdur_BFy6VGZHgN2tEnb3YfT2SSGi3cEXv1BXce5uFBJ8cU7Mo0mEdoSuNbF-DFgnE7y7zJ-U1DQh-goVQ6wUx_KALeyCc3v5Epl8KjA32HqP8pQG5NBcJ20EhSQ-uqp0/s320/blfondoamarillo.png" /></span>

La línea en color naranja es la URL o dirección de la imagen, que en este caso, es el recuadro de color amarillo.

Para cambiarlo bastará con reemplazar dicha URL por la de tu icono personal.

En caso de querer cambiar el color de fondo que contiene un botón específico, sustituye el valor hexadecimal que ves en color verde e inserta cualquier código de la tabla de colores.

Si necesitas ayuda durante la instalación no dudes en avisarme.

Botón para mostrar y ocultar la sidebar (barra lateral)

Con Javascript podemos hacer innumerables cosas que pueden resultar de mucha utilidad para los lectores de un blog o una página web.

Probando con distintos atributos se me ocurrió construir un botón que oculte o muestre la barra lateral y permita modificar el ancho de las entradas en el blog, ofreciendo así un amplio espacio para poder leer de manera cómoda.

Es muy sencillo de instalar y el resultado es bastante prometedor. Puedes probarlo en este blog de pruebas pulsando el botón con el símbolo mas.

Diseño>Edición HTML>expandimos artilugios

Busca estos bloques de CSS (o al menos, de aspecto similar):

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

¿Ves la línea width: 410px; y width: 220px;? Representan el ancho del bloque de entradas y la barra lateral, respectivamente.

Lo único que necesitas hacer en este apartado del truco es apuntar el ancho de la zona de entradas (que en este caso es de 410 píxeles) y la suma del ancho de la sidebar con el del bloque de entradas, que en mi código es de 630 píxeles. Para ello puedes hacer uso del bloc de notas o Notepad.

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

Pega el código:

<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display='none'; getElementById('main-wrapper').style.width='630px';"><img title="Agrandar entrada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-9RRnL_ven0ukdYHNTyT2UDwkVw6mzTs82bjw-cPdxcWAZm7heYvwvO2LZwnMqM0g_7-1wSO7pxIPKsOutYSeOmEkSWhvHFxr0cpgE4EPO4oOA_Lh42EhQhY3uFNPgGYVd8c__XriqJOR/s320/blmas.png" /></a>
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display=''; getElementById('main-wrapper').style.width='410px'"><img title="Encoger entrada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRl_EM8n-AYa47dRXAcclUBx-_m1TAOFFiCZt5sY379YNlVB0qNsmQOzpv9QICsHfrOfi7rRTu97pTuLOukN4NazdktKxhAddaXtTnnrmh75jlanVNHyUp1yhm0BbXF72RwzbmmlOkfSs/s320/blmenos.png" /></a>

Como puedes observar, hay dos valores resaltados en color verde. Se trata del ancho total (que previamente hemos sumado) y del ancho que hay en la zona de las entradas.

Reemplaza estas cifras si en tu blog tienes un valor diferente para el ancho en cada bloque.

Finalmente guarda el gadget y arrástralo hasta ponerlo encima de las entradas del blog, de manera que pueda visualizarse al ocultar la sidebar.

Si tu blog tiene dos barras laterales y deseas insertar el botón para ocultarlas, utiliza este otro código en lugar del anterior:

<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display='none';getElementById('newsidebar-wrapper').style.display='none'; getElementById('main-wrapper').style.width='630px';"><img title="Agrandar entrada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-9RRnL_ven0ukdYHNTyT2UDwkVw6mzTs82bjw-cPdxcWAZm7heYvwvO2LZwnMqM0g_7-1wSO7pxIPKsOutYSeOmEkSWhvHFxr0cpgE4EPO4oOA_Lh42EhQhY3uFNPgGYVd8c__XriqJOR/s320/blmas.png" /></a>
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display=''; getElementById('newsidebar-wrapper').style.display=''; getElementById('main-wrapper').style.width='410px'"><img title="Encoger entrada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRl_EM8n-AYa47dRXAcclUBx-_m1TAOFFiCZt5sY379YNlVB0qNsmQOzpv9QICsHfrOfi7rRTu97pTuLOukN4NazdktKxhAddaXtTnnrmh75jlanVNHyUp1yhm0BbXF72RwzbmmlOkfSs/s320/blmenos.png" /></a>

Lo que está resaltado en color verde es el nombre de la nueva sidebar (barra lateral). Puede que en tu plantilla, ésta tenga un nombre distinto. En caso de no saber como encontrarlo, deja un comentario y podré ayudarte.

Nota:

Puedes cambiar las imágenes del botón reemplazando las URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-9RRnL_ven0ukdYHNTyT2UDwkVw6mzTs82bjw-cPdxcWAZm7heYvwvO2LZwnMqM0g_7-1wSO7pxIPKsOutYSeOmEkSWhvHFxr0cpgE4EPO4oOA_Lh42EhQhY3uFNPgGYVd8c__XriqJOR/s320/blmas.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRl_EM8n-AYa47dRXAcclUBx-_m1TAOFFiCZt5sY379YNlVB0qNsmQOzpv9QICsHfrOfi7rRTu97pTuLOukN4NazdktKxhAddaXtTnnrmh75jlanVNHyUp1yhm0BbXF72RwzbmmlOkfSs/s320/blmenos.png

Por la dirección de tus iconos. Encontrarás un gran surtido de símbolos en esta página y esta otra.

Blogger y el tamaño de las imágenes

Al subir una imagen a blogger para publicarla posteriormente en la entrada, seguimos un corto y sencillo proceso, el cual consta de hacer clic en dos botones. También disponemos de varias opciones para configurar las imágenes, entre las que destacan el tamaño y la posición.

El apartado del tamaño únicamente se refiere al tamaño que tendrá la imagen que vamos a subir en la entrada, no al peso que ésta tiene (el cual no debe ser problemático si no excede de los 8 megabytes):

¿Pero y si deseamos una imagen más pequeña o una más grande?

Una vez subida la imagen a la entrada, al hacer clic en la opción "Edición de HTML" del editor de entradas, encontramos su código correspondiente:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvW5SZJoJc9rR8LlRnRqyw_7zm97Zfw8tVf6tBfe2EIcCGjTowg8hfZtz99EQxRL-yJykKGkaTP6N2iVGQwJKxnyVnv-FlfeYg-8_ietLH9Hf3SRDstB92PVwioTk2WjdPDHRqNLbXkQT/s1600-h/parapente+10.jpg"><img style="text-align: center; margin: 0px auto 10px; width: 320px; display: block; height: 213px; cursor: hand" id="BLOGGER_PHOTO_ID_5440444914852388706" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvW5SZJoJc9rR8LlRnRqyw_7zm97Zfw8tVf6tBfe2EIcCGjTowg8hfZtz99EQxRL-yJykKGkaTP6N2iVGQwJKxnyVnv-FlfeYg-8_ietLH9Hf3SRDstB92PVwioTk2WjdPDHRqNLbXkQT/s400/parapente+10.jpg" /></a>

Lo que realmente nos interesa de todo el bloque es la etiqueta IMG y sus correspondientes atributos, de forma que nos quedaremos con esto:

<img style="text-align: center; margin: 0px auto 10px; width: 320px; display: block; height: 213px; cursor: hand" id="BLOGGER_PHOTO_ID_5440444914852388706" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvW5SZJoJc9rR8LlRnRqyw_7zm97Zfw8tVf6tBfe2EIcCGjTowg8hfZtz99EQxRL-yJykKGkaTP6N2iVGQwJKxnyVnv-FlfeYg-8_ietLH9Hf3SRDstB92PVwioTk2WjdPDHRqNLbXkQT/s400/parapente+10.jpg" />

Y lo que verdaderamente determina el tamaño que la imagen tendrá son las líneas resaltadas en naranja.

width: 320px; Indica el ancho
height: 213px; Indica el alto

Por tanto la imagen será de 320 x 213 píxeles. Entonces pensarás: al incrementar o disminuir esos valores conseguiré el tamaño deseado. Pero no es así. Si te fijas bien, hay un tercer atributo resaltado en el código.

s400, que aparece en el interior de la dirección de la imagen:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvW5SZJoJc9rR8LlRnRqyw_7zm97Zfw8tVf6tBfe2EIcCGjTowg8hfZtz99EQxRL-yJykKGkaTP6N2iVGQwJKxnyVnv-FlfeYg-8_ietLH9Hf3SRDstB92PVwioTk2WjdPDHRqNLbXkQT/s400/parapente+10.jpg

Por tanto estamos ante las miniaturas que crea blogger. Esto puede servirnos de mucho ya que con una única imagen podemos obtener múltiples tamaños.

Blogger, por defecto, inserta los siguientes tamaños a la URL:

s200 al marcar la casilla "Pequeñas"
s320 al marcar la casilla "Medio"
s400 al marcar la casilla "Grandes"

Pero nosotros podemos editarlo:

s32	s48	s64	s128	s150	s00
					Tamaño real: 320px x 213px

El tamaño s00 mostrará la imagen en su tamaño real, mientras que los demás la redimensionarán a una miniatura con dimensiones distintas.

Referencias: Vagabundia.

Un bonito efecto en los links o enlaces con JQuery

Esto es otro de los muchos efectos que podemos conseguir con JQuery. En este caso, conseguiremos que los enlaces del blog cambien de color al pasar el ratón lentamente.

Puedes ver un ejemplo del truco aquí, pasando el cursor por cualquier enlace que encuentres.

¿Te gusta el resultado? Si es así, sigue estos sencillos pasos:

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

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

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

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() {
$(this).animate({ opacity: &#39;0.3&#39; } , 1000);
}, function() {
$(this).animate({ opacity: &#39;1&#39; }, 1000);
});
});
</script>

Los dos primeros scripts (jquery-1.3.2.js y jquery.min.js no tendrás que añadirlos una segunda vez si ya los tienes en la plantilla).

Guarda la plantilla para terminar:




Los colores que adoptarán los enlaces al pasar el cursor podrás personalizarlos en las siguientes líneas de CSS (las cuales pueden estar ya en tu plantilla):

a:link { color:#000000; text-decoration:none;}
a:active { color:#cccccc; outline: none;}
a:visited {color:#000000; text-decoration:none;}
a:hover { color:#cccccc; text-decoration: none;}

El código del color puedes reemplazarlo por el de cualquier otro, para ello utiliza la tabla de colores.

Si necesitas ayuda en cualquier otra cosa dímelo.

Volver arriba con efecto deslizante usando JQuery

Gracias a JQuery podemos crear una enorme cantidad de elegantes efectos para el blog. Uno de los trucos para blogger más conocidos es el de "volver arriba con una imagen o enlace", el cual permite a los visitantes volver al inicio del blog con un solo clic.

¿Pero y si realizamos el truco con JQuery? El efecto cambia. Al hacer clic en el botón de "subir" éste nos conduce al inicio del sitio web con un efecto deslizante muy curioso.


Ver el truco en funcionamiento

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



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

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

<script src='http://sites.google.com/site/scriptsbalcon/b/blsubirjquery.txt' type='text/javascript'/>

La primera línea se el script de JQuery.min.js y no es necesario que lo vuelvas a insertar si ya lo hiciste en algún otro truco.

Ahora busca la etiqueta </body> y encima pega este código:

<a title="Volver arriba" onclick="MGJS.subir();return false;" href="#"><img style="position: fixed; bottom: 10px; left: 10px;" src="URL DE TU IMAGEN"></a>

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

Guarda la plantilla para terminar:




Hacer que la flechita nos lleve hasta el final del blog

Si lo que estabas buscando es la manera de instalar un icono en la esquina superior derecha de tu blog y que su función sea la de, con este mismo efecto, deslizarnos hasta el final del blog, lee los comentarios número 8 y 10 en los que Jose me pregunta justamente esto.

Nota:

- Puedes encontrar iconos de flechas muy variados en esta página.

- El segundo código a añadir también puede introducirse en un gadget html-javascript.

Referencias: Neoease

Crear un foro en una página independiente o estática dentro del blog

Tras haberos enseñado a crear un foro en blogger, os traigo un nuevo truco que se me ocurrió mientras construía el foro de "prueba" para El Balcón.

Se trata de hacer una comunidad siguiendo el mismo procedimiento que vimos en la entrada anterior pero esta vez, hacer que se muestre en una entrada individual.


Ver el blog normal

Ver la entrada del foro


Sigue los pasos y en poco tiempo tendrás una nueva forma de comunicación y expresión en tu blog.

1) Crea una nueva página independiente en el blog (leer tutorial) pero no escribas nada en ella. Tampoco necesitas escribir un título. Una vez creada, resérvala.

2) Ve al apartado de Diseño y añade un nuevo gadget html-javascript:

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

Pega en el contenido, el código ofrecido en el sitio web Nabble (ver pasos para crear el foro) con la siguiente línea:

<a href="URL BLOG">Inicio del blog</a></center>SCRIPT DEL FORO AQUI
<style>#main-wrapper{visibility: hidden; display: none; height: 0px;}</style>

Reemplaza SCRIPT DEL FORO AQUI por el código que te ofrecen en Nabble, así como URL BLOG por la dirección de tu blog.

Esto hará que el foro cargue a mayor velocidad y evitando que el blog se paralice.

Finalmente introduce el título: Mi Foro (luego podrás editarlo) y guarda el gadget.

3) Coloca el elemento html-javascript bajo la cabecera del blog. En esta entrada puedes ver como habilitar dicha zona y así pocer añadir gadgets.

4) Dirígete a la opción de Edición de HTML:


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



Busca un código similar a este (aunque sea distinto, debe contener la frase "Mi Foro") y añade las líneas que ves en color verde:

<b:widget id='HTML4' locked='false' title='Mi Foro' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://linksdelbalcon.blogspot.com/p/foro-del-balcon.html&quot;'>
<!-- 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'>
<data:content/>
</div>

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

Como comprobarás, hay una dirección web: http://linksdelbalcon.blogspot.com/p/foro-del-balcon.html, se trata de la URL o dirección de mi entrada independiente o estática. Debes reemplazar esa URL por la de tu entrada.

5) Guarda la plantilla para terminar:




Ahora simplemente necesitas anunciar tu foro en el blog. Puedes poner un enlace en la sidebar (barra lateral) para que tus lectores se adentren con facilidad en él.

Ampliar las entradas y ocultar la sidebar en las páginas independientes

Ya vimos la manera de personalizar la lista de páginas independientes en blogger. En esta entrada te enseñaré a conseguir que las entradas independientes o páginas estáticas tengan un ancho mucho mayor al de las entradas normales y que la sidebar (barra lateral) se oculte, permitiendo una lectura más sencilla.

Ver el blog normal

Ver una página independiente en el mismo blog con el truco aplicado

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



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

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#main-wrapper {float: center; width: 860px;}
#sidebar-wrapper {visibility: hidden; display: none; width: 0px;}
</style>
</b:if>

El main-wrapper (la zona de las entradas) tendrá un ancho de 860 píxeles.

La barra lateral (sidebar-wrapper) estará oculta (visibility: hidden; display: none;) y con un ancho de 0 píxeles (width: 0px;).

Guarda la plantilla para terminar:

Maranta, Planta de la oración

Maranta, Planta de la oración
Maranta Leuconeura "Erythroneura"

Procedente de Brasil, la Maranta alcanza los 35 centímetros de altura y debe situarse en un espacio luminoso, sin rayos de sol directos y con una temperatura cálida, comprendida entre los 18 y los 20ºC. Soporta los descensos de hasta 10ºC.

El abonado es realizado de forma semanal, entre los meses de abril a septiembre. Para podarla bastará con arrancar las hojas secas o marchitas.

Suelen instalarse en macetas o cestas colgantes, en un centro de plantas verdes o incluso en una botella.

Tiene hojas verdes, oblongas, con nervaduras en el envés de un color rojo que destaca bastante. Las raíces son tuberosas. Las flores, por el contrario, carecen de interés y son de color blanco.

Si las hojas pierden color estaremos ante dos posibles causas: la falta de luz o la necesidad de abono.


Un ambiente demasiado seco o demasiado frío puede hacer que las hojas se sequen y se retarde el crecimiento.

El trasplante se realiza durante el mes de abril (una vez al año), utilizándose un substrato (o mantillo) no demasiado liviano, así como turba.

Se debe regar de forma abundante (sobre todo en épocas calurosas y secas) y la tierra debe permanecer siempre húmeda. También es aconsejable vaporizar el follaje, además de disminuir los riegos en épocas frías (reposo invernal) así como el abonado, que debe suprimirse.

Se aconseja utilizar una mezcla a base de turba en lugar de mantillo durante la primavera.

Es sensible a las cochinillas y la araña roja, la cual aparece con la sequedad.

Para multiplicar la Maranta se cogen los estolones arraigados y se introducen en macetitas individuales, durante la primavera. También pueden cogerse los esquejes terminales, que luego son introducidos en un substrato liviano y un espacio húmedo.

Escrito por Jaime Trujillo Escobedo

Crear un foro en blogger

Lo más probable es que todos sepamos lo que es un foro o comunidad. En blogger, desgraciadamente, no disponemos de la opción "crear un foro" y por tanto resulta un poco difícil obtener uno.

Trás haber estado bastante tiempo dándole vueltas a la cabeza se me ocurrió un método para hacer que un blog de blogger se convierta en un auténtico foro.


Ver el foro del Balcón


A continuación te explicaré paso por paso como crear tu propia comunidad en blogger:

1) Crea un nuevo blog ^[+]

2) Dírigete a:

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


3) Selecciona todo el código de la plantilla y bórralo.

4) Ahora, pega esta "plantilla" en su lugar:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title>TITULO DEL BLOG</title>
<b:skin><![CDATA[/*
-----------------------------------------------
Foro para Blogger
Diseñado por Nabble y adaptado por El Balcón de Jaime (http://elbalcondejaime.blogspot.com/)
----------------------------------------------- */

body {
background:#FFFFFF;
}
]]></b:skin>
<!-- Favicon-->

<link href='URL DEL FAVICON' rel='shortcut icon' type='image/x-icon'/>
<link href='URL DEL FAVICON' rel='icon' type='image/ico'/>
<link href='URL DEL FAVICON' rel='shortcut icon' type='image/ico'/>

<!-- Favicon-->
</head>
<body>
CODIGO JAVASCRIPT DE NABBLE
<div id='blcn1'>
<b:section class='blcn2' id='blcn2' showaddelement='yes'>
</b:section>
</div>
</body>
</html>

5) Accede al sitio web Nabble.

6) Escoge tu nombre de usuario, el nombre de tu foro (título) y redacta una breve descripción.

7) Serás reenviado a tu propio foro. En la esquina derecha encontrarás varios enlaces. Busca el que dice "Embedding options" y haz clic en él.

8) Copia el script que te ofrecen y pégalo en la plantilla (que previamente aplicaste al nuevo blog), reemplazándolo por CODIGO JAVASCRIPT DE NABBLE.

9) Ahora, en caso de tener favicon en el blog, inserta su URL en donde dice URL DEL FAVICON (debes hacerlo tres veces).

10) Por último escribe un título en el blog, borrando antes la frase TITULO DEL BLOG y guarda la plantilla.

¡Ya tienes un foro en el blog!

En el próximo truco te enseñaré a crear un foro en una entrada individual.

Nota:

El único inconveniente es que el foro tendrá los enlaces en Inglés (pero siempre se puede crear un tutorial de "ayuda" para explicar cada apartado).

Violeta africana, Saintpaulia, Violeta de Usambara

Violeta africana, Saintpaulia, Violeta de Usambara
Saintpaulia Ionantha

Alcanza una altura de 15 a 20 centímetros y se sitúa en un espacio luminoso, con una temperatura constante comprendida entre los 19ºC y los 22ºC.

Tiene hojas de color rojo en el reverso y verde en el anverso, unidas a una cepa por los carnosos y largos peciolos.

Da flores que se abren a principios de la primavera y tienen diversos colores, blancas, malvas, rosadas o bicolores.

Los riegos deben ser frecuentes (2 veces por semana en primavera y verano) pero regulados (en otoño se reducen a una vez por semana y en invierno a una vez cada quince días) ya que un exceso de agua provocará la pudrición, la tierra debe mantenerse uniforme. Es aconsejable que se evite el vaporizar el follaje.

Si la planta se pudre, aparecerá el hongo conocido como Botritis el cual muestra un moho grisáceo. La solución será eliminar las hojas afectadas y suprimir el riego durante un tiempo, trasladándola a un lugar cálido.

En cuanto a la poda, bastará con arrancar las hojas marchitas o secas.

Se trata de una planta sensible a los pulgones, las cochinillas blancas y los trips.
El abonado se hace después de la floración, cada 15 días. Se puede añadir fertilizante líquido al agua de riego, cada 3 semanas.

Para trasplantarla utilizamos un substrato bastante liviano compuesto a base de turba y lo hacemos durante la primavera y el verano (cuando termina la floración).

Se multiplica por medio de esquejes de mata u hoja que son introducidos en un recipiente con agua templada en todo momento o en turba y posteriormente trasplantados a una maceta pequeña.

Puede ocurrir que las hojas amarilleen, los tallos se alarguen y terminen cayéndose, lo que claramente es un exceso de luz. Si las hojas se cubren de manchas parduzcas y terminan pudriéndose estaremos ante un exceso de agua.

Una solución sería la de regar la planta con un platito que se coloca bajo la maceta durante unos 20 minutos para que la planta absorba la cantidad necesaria.

Si la planta no florece quiere decir que necesita abono. Si optas por limpiarla, no uses abrillantador ni agua, utiliza un pincel cada quince días.

Escrito por Jaime Trujillo Escobedo

Icono de suscripción que cambia el color de fondo al pasar el cursor

Si te gusta ofrecer el contenido de tu blog a cualquier lector no hay nada mejor que insertar un botón de suscripción en la barra lateral.

Para fabricarlo utilizaré la técnica de los sprites (algo que aprenderemos a utilizar posteriormente), de manera que la imagen no tarde en cargar y el efecto al pasar el cursor por encima se muestre automáticamente.

Pasa el cursor por el siguiente botón:

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

Pega este código:

<a href="URL DEL FEED"><div onmouseout="this.style.backgroundPosition='0px -42px';" style="margin: 11px auto; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVzywuuMX3DmwQ1IFOyj-3mvLf8ujkbPMvZjuWGMrIqWpmsonxf8CkSsS5qFYVuBj47iRo8vIhJ4Qp8L6FDKScaShjgeS006Wp_hHHUj2mfz_q_R0ALCe-QqwnRNC9LzExv2eoJKX2vg/s1600-r/blrss.png) no-repeat scroll 0px -42px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; cursor: pointer; height: 42px; width: 42px;" title="Clic para Suscribir" onmouseover="this.style.backgroundPosition='0px 0px';" align="center"></div></a>

Reemplaza URL DEL FEED por la dirección del feed de tu blog. En mi caso, como uso el servicio Feedburner, tengo esta URL:

http://feeds.feedburner.com/ElBalcnDeJaime

Guarda el gadget para terminar y obtendrás el bonito efecto del cambio de color.