La misma persona, nueva creación

Tras el cierre de El Balcón en el año 2011, el autor se dedicó enteramente a una afición que le acompañaba desde niño. Actualmente ha hecho de ese pasatiempo su forma de vida. Entra en el nuevo sitio web y descubre su nueva obra. La misma persona, nueva creación

La misma persona, nueva creación. Entra y descúbrelo.   Canovu.com    

Efecto desvanecer y aparecer en imágenes al pasar el cursor

Con anterioridad vimos cómo darle un efecto de opacidad a las imágenes al pasar el cursor, para ello incluíamos dentro del código de la imagen los estilos necesarios para generar la opacidad. El efecto descavenecer o aparecer que se explica en esta entrada no es muy diferente al ya comentado pero posee una nueva característica. Al pasar el cursor sobre la imagen, ésta se desvanece o aclara suavemente.

A continuación puede verse el truco en funcionamiento:

El resultado presenta dos variantes del efecto. La primera tira de imágenes aparece con un grado de opacidad de 0.5 que produce la aparición de la imagen al pasar el cursor; la segunda tira, por el contrario, no presenta opacidad sino que se las imágenes se desvanecen al pasar el cursor.

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

Localizamos la etiqueta </head> y justo antes insertamos uno de los siguientes bloques, dependiendo de la variante escogida y la presentación deseada:

Para el efecto aparecer al pasar el cursor en todas las imágenes del blog:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Para el efecto desvanecer al pasar el cursor en todas las imágenes del blog:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 1.0);
$('img').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Para el efecto aparecer al pasar el cursor en las imágenes escogidas:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImagjtef').fadeTo('slow', 0.5);
$('.blImagjtef').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Para el efecto desvanecer al pasar el cursor en las imágenes escogidas:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImaggjtef').fadeTo('slow', 1.0);
$('.blImaggjtef').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Los dos últimos códigos, al contrario que los dos primeros (que al guardar la plantilla aplicarán el efecto a todas las imágenes), se aplican de forma manual, utilizando las clases resaltadas en color rojo (respectivamente), dentro del código de la imagen:

<img class='blImagjtef' src='URL DE LA IMAGEN'/>

<img class='blImaggjtef' src='URL DE LA IMAGEN'/>

En donde dice URL DE LA IMAGEN incluiremos la dirección de la fotografía o imagen.

El truco usa jQuery por lo tanto, si hemos instalado Scriptaculous, Prototype o Mootools seguramente no pueda utilizarse.

Con esto habremos terminado la instalación de este elegante efecto.

Mejorar el posicionamiento de imágenes con la etiqueta ALT

Utilizadas en imágenes como 'texto alternativo', las etiquetas ALT nos permiten incluir una descripción y mejorar así su posicionamiento en los buscadores.

Otra de las ventajas que ofrece es la de mostrar la descripción cuando la imagen, por el motivo que sea, no aparece.

Los buscadores deben disponer de términos adicionales que describan a la imagen para indexarla. Al realizar la búsqueda de una fotografía en Google, por ejemplo, solemos escribir una breve frase. El buscador muestra entonces los resultados, teniendo en cuenta las palabras clave utilizadas tanto por el autor como por el visitante.

La fotografía de una casa podría aparecer sin problemas en los resultados de búsqueda para imágenes de plantas. Esto ocurre gracias a las etiquetas ALT.

A continuación les muestro la estructura que llevará el código de la imagen y un ejemplo real:

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

Otro factor que mejorará el posicionamiento es la URL o dirección de la imagen, que debería contener también una breve descripción.

Recuerda que al incluir un código dentro de cualquier post, debe seleccionarse la pestaña de 'Edición de HTML' y no la de 'Redactar'.



Nota:

Si lo que buscas es hacer lo contrario, evitar que se indexe cierto contenido del Blog, accede a este otro tutorial.

Evitar que se indexe cierto contenido del Blog

El tráfico del blog es algo positivo pero, a veces, también preocupante. Y esque se dan casos en los que recibimos quizás demasiado tráfico por parte del buscador, lo que sólo da problemas.

Las imágenes son por lo general lo que normalmente deseamos ocultar. A alguien con un blog personal podría no hacerle mucha gracia encontrar las fotos de sus hijos o familiares en la búsqueda de imágenes de Google, percatándose de que cualquiera puede verlas o guardarlas.

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

Localizamos la siguiente línea:

<title><data:blog.pageTitle/></title>

Ahora, justo antes añadimos esta otra:

<meta name="robots" content="noimageindex"/>

La etiqueta Meta utilizada evitará que nuestras imágenes se conviertan en públicas.

Guardamos la plantilla y listo.

También podemos ocultar uno o varios elementos dentro de una entrada o de un gadget html-javascript (ya sea una imagen o varios párrafos).

Haremos uso de las etiquetas googleoff y googleon, resaltadas en color rojo:

Contenido indexado.
<!--googleoff: all --> Contenido protegido. <!--googleon: all -->
Resto del contenido indexado.

Para incluirlas en el post, debe seleccionarse la pestaña de 'Edición de HTML' y no la de 'Redactar'.


A pesar de que el truco es seguro, siempre conviene evitar cualquier publicación que dote de datos personales o fotografías inapropiadas.

Crear vinculos dentro de una misma entrada o artículo

Los enlaces no sólo facilitan la navegación al lector sino que también pueden vincular apartados dentro de un artículo extenso en donde se crea un índice con los temas tratados.

Este índice permite acceder a cualquier apartado con un click, sin abandonar la entrada.

Supongamos que nuestro índice se compone por la siguiente estructura:

Primer apartado
Segundo apartado
Tercer apartado

El primer paso constará de crear la tabla de contenido. Para ello utilizamos el atributo href al que atribuímos un nombre único (en lugar de una URL):

<a href="#primero">Primer apartado</a>
<a href="#segundo">Segundo apartado</a>
<a href="#tercero">Tercer apartado</a>

Seguidamente y haciendo uso del atributo name especificamos el área a donde conducirá cada enlace.

Para el primer apartado emplearíamos lo siguiente:

<a name="primero">Primer apartado</a>

Este sería el contenido perteneciente al primer apartado del artículo, como podría ser la introducción.

Haremos lo mismo para los apartados restantes. Debe tenerse en cuenta que el nombre a utilizar en el enlace (primer paso) y posteriormente en el apartado (segundo paso) debe ser único.

Si lo repetimos en otro apartado, el enlace no conducirá al tema apropiado y acudirá al área en donde tenemos el nombre correcto.

Al poner cualquier código en la entrada, conviene hacerlo en la pestaña de 'Edición de HTML' y no en la de 'Redactar'.



En el ejemplo se presenta un artículo 'falso'. El truco ha sido utilizado para crear, por ejemplo, numerosos artículos acerca de los periquitos.

Personalizar las etiquetas del post-footer o pie de las entradas

Personalizar las etiquetas de un blog presenta múltiples ventajas. Un color de fondo o un marco de un estilo determinado hará que los lectores se interesen más por las publicaciones del sitio.

A continuación presento tres modelos básicos que os ayudarán a destacar vuestras etiquetas.

Tanto los colores como el grosor y estilo de los marcos puede modificarse.

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

Localizamos un código similar a este:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<span class='blEtijjTeg'><a expr:href='data:label.url' rel='tag'><data:label.name/></a></span>
<b:if cond='data:label.isLast != "true"'> , </b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=20"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>

Le añadimos las líneas que resalto en color rojo para otorgar una clase única y poder así utilizar el CSS necesario.

La coma destacada (,) es la encargada de separar nuestras etiquetas. Puede reemplazarse por una imagen o icono utilizando este código:

<img src="URL IMAGEN"/>

Insertaremos la dirección de la flechita en donde dice URL IMAGEN.

Seguidamente, buscamos la etiqueta ]]></b:skin> y justo encima incluimos los dos bloques de CSS pertenecientes al estilo deseado.

Primer estilo

.blEtijjTeg a:link, .blEtijjTeg a:visited {
background: #A2C9D3; /* Color de fondo */
border: 1px solid #FFFFFF; /* Grosor, estilo y color del marco, respectivamente */
color: #296476; /* Color del texto */
padding: 4px 8px; /* Distancia entre el texto y el marco */
}
.blEtijjTeg a:hover {
background: #BCE0EA; /* Color de fondo al pasar el cursor por encima */
color: #333333; /* Color del texto al pasar el cursor por encima */
text-decoration: none;
}

Segundo estilo

.blEtijjTeg a:link, .blEtijjTeg a:visited {
border: 1px solid #A2C9D3; /* Grosor, estilo y color del marco, respectivamente */
color: #296476; /* Color del texto */
padding: 4px 8px; /* Distancia entre el texto y el marco */
}
.blEtijjTeg a:hover {
background: #BCE0EA;
color: #333333; /* Color del texto al pasar el cursor por encima */
text-decoration: none;
}

Tercer estilo

.blEtijjTeg a:link, .blEtijjTeg a:visited {
border-bottom: 3px solid #A2C9D3; /* Grosor, estilo y color del marco, respectivamente */
color: #296476; /* Color del texto */
padding: 2px 7px; /* Distancia entre el texto y el marco */
}

.blEtijjTeg a:hover {
border-color: #333333; /* Color del borde inferior al pasar el cursor */
color: #333333; /* Color del texto al pasar el cursor por encima */
text-decoration: none;
}

En los bloques he descrito la función de cada atributo para que puedan utilizar los colores o estilos que mejor conjunten con la plantilla.

Recuerden que para obtener el código de cualquier color o tonalidad debe usarse la tabla de colores.

Para personalizar los marcos conviene revisar esta entrada.

Guardaremos la plantilla una vez se haya terminado la edición.

Mensaje de bienvenida sobre las entradas de tu blog

En esta entrada aprenderemos a crear una nueva sección sobre las entradas que mostrará un elemento de página o gadget html-javascript con un mensaje de bienvenida sólo visible en la página principal o portada del blog.

Puede verse el resultado en la siguiente imagen:

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

Localizamos este código:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

Ahora, justo antes, añadimos el bloque que creará la nueva sección sobre las entradas:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='Mensajbljposjt' id='Mensajbljposjt' showaddelement='yes'>
<b:widget id='HTML68' locked='false' title='Mensaje de Bienvenida' type='HTML'/>
</b:section>
</b:if>

Buscamos la etiqueta ]]></b:skin> y justo antes incluimos el siguiente css:

/* Mensaje de bienvenida
----------------------------------------------- */
#Mensajbljposjt h3 {
color: #FFFFFF; /* Color del titulo (¡Bienvenid@! */
}
#Mensajbljposjt {
color:#333333; /* Color del texto */
background:#92DA8B; /* Color del fondo */
}

Puede modificarse el color de fondo (#92DA8B) en background:#92DA8B; haciendo uso de la tabla de colores. También se puede editar el color del texto, reemplazando #333333 o #FFFFFF por el código de otro color.

Ahora, antes de </head> agregamos esta línea:

<link href='https://sites.google.com/site/scriptsbalcon/b/Mensajbljjtepos.css' rel='stylesheet' type='text/css'/>

Guardamos la plantilla.

A continuación accedemos al apartado de Diseño > Elementos de la página y pulsamos sobre el enlace 'Editar' del gadget titulado 'Mensaje de Bienvenida'.

Insertamos este código en su interior:

<div id="Mensajbljposjt">
<h3>¡Bienvenid@!</h3>

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

<p>TEXTO PRIMERA LÍNEA</p>
<p>TEXTO SEGUNDA LÍNEA</p>
<p>TEXTO TERCERA LÍNEA</p>

<p>TEXTO CON ENLACE <a href="URL PAGINA">ESTE ES EL ENLACE</a></p>

</div>

Debe reemplazarse URL DE TU IMAGEN por la dirección de la miniatura de imagen a mostrar.

En TEXTO PRIMERA LÍNEA introduciremos el primer párrafo del mensaje de bienvenida y así sucesivamente.

En TEXTO CON ENLACE puede incluirse una frase que contenga un enlace de suscripción en su interior. La dirección del enlace (o feed) se insertará en URL PAGINA mientras que el texto que mostrará el link debe escribirse en donde dice ESTE ES EL ENLACE.

La única función de <p> y su cierre </p> es la de crear saltos de línea dejando un espacio en blanco. Para mostrar el texto sin saltos de línea bastará con eliminarlos.

Guarda el gadget para terminar.

Leporino manchado, Boga (Leporinus maculatus)

Nombre común: Principalmente se le conoce como ‘Leporino manchado’ pero comparte el nombre de ‘Boga’ con especies del mismo género, como Leporinus friderici, Leporinus obtusidens, Leporinus platycephalus, Leporinus fasciatus y Leporinus striatus, así como con especies como Schizodon fasciatum o Schizodon platae. El nombre ‘Lisa’ también lo comparte con Leporinus fasciatus. En inglés se le conoce como ‘Spotted leporinus’, en la Guayana Francesa como ‘Awalapoukou’, ‘Warak’, ‘Kwasima’, ‘Kwasimama’, y ‘Karp’ y en Brasil como ‘Araçu pinima’.

Nombre científico: Leporinus maculatus - Müller & Troschel, 1844

Nombres en desuso (no válidos): Leporinus paralternus. Se le ha confundido en múltiples ocasiones (incluso en textos científicos) con Leporinus marcgravii - Lütken 1875.

Clasificación:
• Orden: Characiformes.
• Familia: Anostomidae. (Anostómidos).

Biotopo: Aguas de ríos con corriente rápida y con fondos rocosos.

Distribución: Sudamériza. En Perú, Colombia, Brasil (río Oyapock, cuenca del río San Francisco), Paraguay (cuenca del río Paraguay), Surinam, (río Guayabero), Guayana (ríos Cuyuni, Marudi, Tucutu, Snedigar, Potaro… y cuenca del río Essequibo).

Características y cuidados del pez

Forma:
Pez de cuerpo alargado y alto, de cabeza pequeña y ojos relativamente grandes. Bifurcación profunda en la cola y perfil dorsal más convexo que el perfil ventral.

Leporinos es un término francés que viene a significar ‘pocas liebres’ y lo debe a sus dos dientes delanteros, que sobresalen como si de una liebre se tratase.

Coloración:
Presenta un color amarillo limón en la parte inferior del cuerpo y un ocre parduzco en la parte superior. Posee manchas (normalmente redondeadas aunque pueden ser de forma alargada) de color marrón oscuro negruzco a negro, de gran tamaño y por todo el cuerpo.

Tamaño: Aunque en un acuario su tamaño es menor, en libertad llega a los 18-20 centímetros de longitud.

Agua: Dulce. Debe poseer buena filtración. Soporta aguas ligeramente ácidas o neutras pero prefiere blandas. El pH debe ser de 5.5 a 7.5 y el GH de 2 a 12ºd.

Temperatura requerida: La temperatura ideal estará comprendida entre los 22ºC y los 28ºC.

Requisitos del acuario:
El acuario debe tener lugares para esconderse, como piedras (pequeñas cuevas) o madera. En su entorno natural suele apreciar las corrientes fuertes por lo que agradecerá el uso de una bomba potente. Debe tenerse en cuenta que incluye algunas plantas en su dieta por lo que mantenerlo en un acuario plantado podría no ser una buena idea.

Se aconseja arena o grava fina para el fondo. El tanque debe dotar de una tapa pues no dudarán en saltar si se les presenta la oportunidad. Dado que alcanza un tamaño considerable, cuanto más grande sea el acuario mejor.

Comportamiento:
Le gusta nadar en la zona media del acuario y en el fondo, cabizbajo y en busca de alimento caído o algas. Es un pez ideal y pacífico durante su juventud pero al llegar a la edad adulta puede tornarse agresivo, llegando a mordisquear las aletas de otros peces e incluso de sus propios congéneres.

Alimentación:
Su dieta se compone tanto por crustáceos como por vegetales: algas, calabacín, guisantes (descapsulados) o espinaca, que le aportan muchos nutrientes. Puede ofrecérsele también larvas pequeñas, artemia, insectos acuáticos o gusanos y con suerte escamas secas (digo con suerte pues es difícil conseguir que se acostumbre).

Dimorfismo sexual:
El tamaño de las hembras es ligeramente mayor y más grueso que el de los machos.

Reproducción:
Pez Ovíparo. Alcanza la madurez sexual al superar los 12 centímetros de longitud. Se desconoce su reproducción en cautividad aunque en libertad, los machos permanecen junto al nido. Desovan entre los meses de diciembre y mayo.

Escrito por Jaime Trujillo Escobedo

Cursor con burbujas

Se trata de una bonita forma de adornar el cursor y en cierto modo, el propio blog. Lo que pretendemos es hacer que salgan burbujitas del cursor cuando éste se mueve, de forma que se vayan esparciendo y elevando a medida que el lector mueva el ratón.

Puede verse un ejemplo a continuación. Mueve el cursor a donde quieras dentro del marco y verás cómo salen y suben las burbujas. Cuanto más se mueva el cursor más burbujitas aparecerán.

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

Localizamos la etiqueta </body> y justo antes añadimos esta línea:

<script type='text/javascript'>
// <![CDATA[
var blColorjtes=new Array("#7e9be7", "#a1b4e8", "#a1b4e8", "#7e9be7", "#cccccc");
var blCuantasujTeas=80;
// ]]>
</script>
<script src='https://sites.google.com/site/scriptsbalcon/b/bljBurbujaste.js' type='text/javascript'/>

Lo que he resaltado en naranja es el color de las burbujas. Podemos hacer uso de la tabla de colores para personalizarlo pero nos tendremos que asegurar de que el color escogido contraste con el fondo del blog (para que se aprecie el truco).

La cifra 80 indica la cantidad máxima de burbujas que se visualizarán, es decir, que se mantendrán visibles antes de desaparecer. Puede aumentarse o disminuirse conforme al gusto de cada uno.

Guardamos la plantilla y listo. Esto atraerá mucho a los lectores y ofrecerá al blog un ambiente especial.

Ocultar el bloque de las entradas en la portada del blog

Ya hemos visto cómo mostrar un gadget sólo en la portada, así como sólo en las páginas de entradas individuales.

Todo esto se consigue gracias a las condicionales de blogger, que se encargan de indicar dónde se ejecuta algo y dónde no. También podemos aplicar condicionales al bloque de entradas (con los artículos incluidos) de tal forma que se muestre en todas partes excepto en la portada del blog.

Puede comprobarse el resultado accediendo a este blog de pruebas.

Diseño>Edición de HTML>sin expandir artilugios

Localizamos estas líneas de código:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

Añadimos la condicional resaltada en color rojo:

<b:if cond='data:blog.url != data:blog.homepageUrl'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></b:if>

De este modo, todos los gadgets que tengamos en la sidebar o en las columnas bajo la cabecera se mostrarán en la portada, mientras que las entradas se mantendrán ocultas.

Nota:

- Aunque este procedimiento es el más seguro, existe un método muy práctico que consiste en acceder al apartado de Configuración y en la pestaña Formato, donde dice 'Mostrar un máximo de...', insertar la cifra 0.

Protege tu blog o tus entradas con contraseña

Quienes crean un blog de pruebas o una entrada con información personal seguramente alguna vez se habrán planteado protegerlo con una contraseña de tal forma que sólo los lectores autorizados tengan acceso.

Se trata de un script muy sencillo que permite mostrar una ventana de alerta al abrir la página, en la que el visitante introduce la clave.

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

Localiza la etiqueta </head> y añade uno de los siguientes códigos justo antes:

Para pedir la clave en cualquier apartado del blog:

<script language="javascript">
var cLAVEnjte = prompt("Escribe la contraseña para entrar al blog.")
if (cLAVEnjte!="CONTRASEÑA")
{location.href='PAGINA ERROR'}
else
{alert('La clave se ha escrito correctamente, acceso permitido.')}
</script>

Para pedir la clave sólo en la portada del blog:

<b:if cond='data:blog.url == data:blog.homepageUrl'><script language="javascript">
var cLAVEnjte = prompt("Escribe la contraseña para entrar al blog.")
if (cLAVEnjte!="CONTRASEÑA")
{location.href='PAGINA ERROR'}
else
{alert('La clave se ha escrito correctamente, acceso permitido.')}
</script></b:if>

Para pedir la clave en una entrada específica o etiqueta específica:

<b:if cond='data:blog.url == "DIRECCION"'><script language="javascript">
var cLAVEnjte = prompt("Escribe la contraseña para entrar al blog.")
if (cLAVEnjte!="CONTRASEÑA")
{location.href='PAGINA ERROR'}
else
{alert('La clave se ha escrito correctamente, acceso permitido.')}
</script></b:if>

Reemplaza CONTRASEÑA por la clave a utilizar. Las frases resaltadas en color grisáceo pertenecen a los mensajes de alerta que aparecerán antes y después de introducir la contraseña (correcta, claro); Puedes editarlas a tu gusto.

En PAGINA ERROR introduce la dirección a una página o entrada que notifique el error. También puede usarse la URL de una imagen, tal y como hice yo en el blog de pruebas.

En caso de emplear el último código, debe sustituirse DIRECCION por la direccion del artículo.

Guarda la plantilla para terminar. Puedes ver el resultado en este blog de pruebas, utilizando la clave 'balconjaime'.

Notas:

- Oloman me ha comunicado una desventaja del script. La clave podría adivinarse desde el código fuente de la página, opción a la que puede accederse desde cualquier navegador. Por ello, cabe concretar que hasta que publique un script actualizado, conviene no proteger datos estrictamente personales.

- El script no funciona en Internet Explorer. Por el contrario, es posible mostrar una advertencia acerca del navegador utilizado y el motivo por el que no puede accederse al contenido.

Personalizar el texto del nombre del comentarista en blogger

Ya hemos visto cómo destacar y personalizar el nombre del autor de las entradas en un blog. Ahora es el turno de los comentaristas y por lo tanto aprenderemos a modificar el aspecto del nombre o apodo utilizado por el lector que publica su opinión.

En la siguiente imagen puede comprobarse el resultado:

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

Localizamos este bloque de código en la plantilla:

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

Ahora bien, para personalizar el nombre del autor del comentario cuando éste ha iniciado sesión en blogger añadiremos lo resaltado en color verde:

<a expr:href='data:comment.authorUrl' rel='nofollow'><span class='bljAutrjteComen'><data:comment.author/></span></a>

En el mismo bloque de código pero unas líneas más abajo veremos nuevamente la etiqueta <data:comment.author/>, aunque esta vez sin enlace porque se trata de la utilizada por comentaristas que comentan como anónimo o nombre/url. Repetimos lo realizado anteriormente:

<span class='bljAutrjteComen'><data:comment.author/></span>

Para terminar, buscamos la etiqueta ]]></b:skin> para insertar justo antes estas propiedades CSS:

.bljAutrjteComen {
font-size: 14px; /* Tamaño del texto (14) */
color:#333333; /* Color del texto (#333333) */
font-family: Arial,helvetica,sans-serif; /* Fuente a utilizar */
font-weight:normal; /* Estilo del texto (para cambiar a negrita reemplaza normal por bold */
}

Cada línea contiene una descripción para facilitar la modificación. Utiliza la tabla de colores para obtener el código de cualquier color.

Menú vertical desplegable en blogger

Hace tiempo publiqué como instalar un menú tipo acordeón con efecto deslizante en Blogger.
En ese menú, cada vez que el lector pasa el cursor sobre una pestaña, ésta se expande de forma automática, mostrando una imagen que describe la categoría.

Basándonos en la misma idea pero utilizando sólo CSS vamos a instalar un menú que despliega tantas pestañas como deseemos presentar.

Puede verse un ejemplo funcionando a continuación:

Tanto los colores de fondo del menú como el color del texto o el borde puede editarse, logrando así que conjunte sin problemas con cualquier plantilla.

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

Localiza la etiqueta </head> y añade estas líneas justo antes:

<style type='text/css'>
/* Color texto */
#blcnMenujteAcord ul li a{color:#000000;}
/* Color fondo principal */
#blcnMenujteAcord{background:#d2b583;}
/* Color fondo al pasar el cursor */
#blcnMenujteAcord ul li a:hover{background:#a5834a;}
/* Color del borde (debe incluirse dos veces) */
#blcnMenujteAcord ul li {border-bottom: 1px solid #a5834a;}
#blcnMenujteAcord{border:1px solid #a5834a;}
</style>
<link href='https://sites.google.com/site/estoesunejemplodeprojecto/archivadorcanciones/blcnAcordJteMenu.css' rel='stylesheet' type='text/css'/>

En el propio código se indican las funciones de cada atributo css.

Recuerda que para modificar el color debe reemplazarse su código (por ejemplo #d2b583) por uno de la tabla de colores.

Para personalizar el estilo de borde, conviene leer esta entrada.

Guarda la plantilla una vez hayas finalizado la edición.

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

Pega este código en su interior:

<div id="blcnMenujteAcord">
<ul>
<li><a href="#">Pestaña 1</a></li>

<li><a href="#">Pestaña 2</a>
<ul>
<li><a href="#">Pestaña 2.1 </a></li>
<li><a href="#">Pestaña 2.2 </a></li>
<li><a href="#">Pestaña 2.3 </a></li>
</ul>
</li>

<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Pestaña 3.1 </a></li>
<li><a href="#">Pestaña 3.2 </a></li>
<li><a href="#">Pestaña 3.3 </a></li>
</ul>
</li>

<li><a href="#">Pestaña 4</a>
<ul>
<li><a href="#">Pestaña 4.1 </a></li>
<li><a href="#">Pestaña 4.2 </a></li>
<li><a href="#">Pestaña 4.3 </a></li>
</ul>
</li>
</ul>
</div>

Sustituye en cada caso Pestaña X por el título de la pestaña que actuará como enlace para desplegar las sub-pestañas (Pestaña 1.1, Pestaña 1.2, etc).

La línea resaltada en color verde pertenece a la primera pestaña del menú, que a excepción de las otras, no despliega sub-pestañas (por tanto contiene un enlace).

La dirección web a la que conducirá cada pestaña debe introducirse en donde aparecen las almohadillas (#).

Para agregar más Pestañas 'generales', que no despliegan contenido, utiliza lo siguiente:

<li><a href="#">Pestaña 1</a></li>

Recuerda introducirlo siempre antes del cierre </ul>.

Si deseas aumentar la lista de sub-pestañas, utiliza líneas como esta:

<li><a href="#">Pestaña 2.2 </a></li>

Insértalas en el mismo grupo, antes del cierre </ul>.

Guarda el gadget una vez hayas terminado.

Rotador automático de entradas recientes en blogger

Ya hemos visto cómo mostrar las últimas entradas con miniatura de imagen (Modo simple), mostrar las últimas entradas de una etiqueta específica en la barra lateral e incluso mostrar de forma aleatoria las últimas entradas en el blog.

Han sido muchos quienes me han preguntado si es posible poner un rotador de entradas recientes que se actualice de forma automática en el blog.

Sí se puede, y se realiza usando el mismo script presentado en la primera entrada sobre este tema y la librería jQuery.

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

Busca la etiqueta </head> y añade antes uno de estos dos códigos:

Para el gadget con imágenes:

<link href='https://sites.google.com/site/scriptsbalcon/b/bljjultimrotad.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>#bljArticjteSlider {
border: 3px solid #5A9CDD;
background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474;
height: 234px; width: 380px;}
.js #bljArticjteSlider .slides li .entry {background: #8CBAE8;width: 378px;}</style>

Modifica lo siguiente para personalizarlo:

border: 3px solid #5A9CDD; Representa el borde o marco azul. Modifica el ancho (3) a tu gusto, el estilo (solid) con ayuda de esta entrada y el color (#5A9CDD) haciendo uso de la tabla de colores.

background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474; Reemplaza URL IMAGEN por la dirección de tu imagen de fondo (en caso de querer utilizarla). #FBB474 Pertenece al color de fondo (anaranjado) que se utilizará si no incluyes la URL de la imagen.

height: 234px; La altura (234) del recuadro general.
width: 380px; El ancho (380) del recuadro general.

background: #8CBAE8; El color de fondo (azul) del rectángulo que contiene el título.
width: 378px; El ancho (378) del rectángulo que contiene el título.

Para el gadget sin imágenes:

<link href='https://sites.google.com/site/scriptsbalcon/b/bljjultimrotad.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>#bljArticjteSlider {
border: 3px solid #5A9CDD;
background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474;
height: 62px; width: 380px;}
.js #bljArticjteSlider .slides li .entry {background: #8CBAE8;width: 378px;}
#bljArticjteSlider .slides li{height: 62px;}</style>

Modifica lo siguiente para personalizarlo:

border: 3px solid #5A9CDD; Representa el borde o marco azul. Modifica el ancho (3) a tu gusto, el estilo (solid) con ayuda de esta entrada y el color (#5A9CDD) haciendo uso de la tabla de colores.

background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474; Reemplaza URL IMAGEN por la dirección de tu imagen de fondo (en caso de querer utilizarla). #FBB474 Pertenece al color de fondo (anaranjado) que se utilizará si no incluyes la URL de la imagen.

width: 380px; El ancho (380) del recuadro general.

background: #8CBAE8; El color de fondo (azul) del rectángulo que contiene el título.
width: 378px; El ancho (378) del rectángulo que contiene el título.

Guarda la plantilla una vez hayas terminado.

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

Incluye esto en su interior:

<div id="bljArticjjteSlider" onmousedown="return false" oncontextmenu="return false" onselectstart="return false"><div><script src="https://sites.google.com/site/scriptsbalcon/b/blgUltimjaime.js" type="text/javascript"></script>
<script language="JavaScript">
blcnJCaImgn = new Array();
blcnJCaImgn[0] = "";
bljjtImagn1 = true;
blcnJCantStl = true;
blcnJCantidad = 10; //
blcnJURLblog = "DIRECCION DE TU BLOG";
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/scriptsbalcon/b/jquerybljjtECycle.js" type="text/javascript"></script>
<script type="text/javascript">
$bljArticjteSlider = { context: false, tabs: false, timeout: 3000, slideSpeed: 1000,
tabSpeed: 1000, fx: 'fade',
init: function() { this.context = $('#bljArticjteSlider'); this.tabs = $('ul.slides-nav li', this.context); this.bljjtescEntrad(); }, bljjtescEntrad: function() { $('div.slides > ul', $bljArticjteSlider.context).cycle({ fx: $bljArticjteSlider.fx, timeout: $bljArticjteSlider.timeout, speed: $bljArticjteSlider.slideSpeed, fastOnEvent: $bljArticjteSlider.tabSpeed, pager: $('ul.slides-nav', $bljArticjteSlider.context), pagerAnchorBuilder: $bljArticjteSlider.prepareTabs, before: $bljArticjteSlider.activateTab, pauseOnPagerHover: true, pause: true }); }, prepareTabs: function(i, slide) { return $bljArticjteSlider.tabs.eq(i); },
activateTab: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]', $bljArticjteSlider.context);
if(activeTab.length) {
$bljArticjteSlider.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$('body').addClass('js');
$bljArticjteSlider.init();
});
</script><div onmousedown="return false" oncontextmenu="return false" onselectstart="return false" id="bljArticjteSlider" class="bljjt1arr"><div class="slides"><script language="JavaScript"> document.write("<script src=\""+blcnJURLblog+"feeds/posts/default/?max-results="+blcnJCantidad+"&orderby=published&alt=json-in-script&callback=blcnBlogEx\"><\/script>");</script></div></div><a href="http://goo.gl/favZ"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5jCL1nj74YN2XjmcRBXyaAEbG34ejWaFqJCV3EmGPYuaEnVz33L6dZ5Mk1D-SHB76DlP1H9QqkAyj1nhm299X68fb9w-WYt3vseK9eSqDpnE6S15E4TVYwILiPi1mp5X_Ctwvg0E-_ptr/s320/main-slider.png"/></a></div></div>

Introduce la dirección de tu blog en donde se indica (con color naranja) así como la cantidad de entradas recientes a mostrar (blcnJCantidad = 10; //).

Para modificar la velocidad a la que rotan las entradas debe aumentarse o disminuirse la cifra 3000 en timeout: 3000.

Recuerda que este truco utiliza jQuery por lo tanto, si usas Scriptaculous, Prototype o Mootools seguramente no podrás utilizarlo.

Guarda el gadget y listo.

Agregar Meta Tags en blogger usando un generador

Las meta-tags son etiquetas que se introducen en el código de una página web y contienen información acerca de ésta, que resulta de utilidad para los robots encargados de rastrear e indexar nuestro sitio en los motores de búsqueda.

Con anterioridad vimos cómo añadir estas meta-etiquetas para el título del blog, las palabras clave que describen nuestros artículos, el autor y una breve descripción.

Utilizando el siguiente generador podrás obtener el código necesario con sólo pulsar un botón.

Las etiquetas META deben añadirse justo después de la etiqueta <head>.

La adquisición de los peces de agua dulce

Contenido del artículo:[Ocultar]

• Introducción


• La elección según el tamaño y conducta


• La introducción de los peces


• La cuarentena

Introducción

Tanto en un centro comercial como en una tienda dedicada al comercio de mascotas podemos encontrar a vendedores especializados en acuariofilia. La función de estas personas es de ayuda y orientación para poder hacer una buena elección del acuario, los adornos que éste llevará, los diferentes tipos de alimentos y medicamentos para tratamiento de algunas enfermedades y por supuesto los peces.



Para la mayoría de principiantes, debido a su inexperiencia, juzgar la idoneidad o el estado de salud de un pez es imposible.

Cuando adquirimos los peces, deberán ser empaquetados cuidadosamente en bolsas de plástico. Estas bolsas están preparadas para mantener el oxígeno necesario en su interior, siempre y cuando el transporte dure un tiempo razonable.

Debe evitarse que la bolsa se enfríe o se caliente demasiado durante el viaje; envolviéndola en una hoja de periódico conseguiremos una temperatura estable.
El precio de cada pez variará según el lugar en donde se haya adquirido y la especie a la que pertenece.

La elección según el tamaño y conducta

Se debe considerar el tamaño que alcanzará el pez deseado cuando llegue a la edad adulta así como la velocidad de movimientos (ágiles / lentos) y el tipo de actividad (diurno/nocturno).
Sería inadecuado combinar especies de actividad lenta con especies que nadan a gran velocidad.

La introducción de los peces

Antes de introducir a los peces en el acuario es necesario realizar una rápida aclimatación para igualar las condiciones térmicas del agua. No cumplir con la correcta aclimatación podría provocar un descenso de las defensas que será aprovechado por parásitos y bacterias.

El primer paso consta de apagar la luz del acuario. Introduce la bolsa en el agua y déjala flotando de 15 a 30 minutos. La temperatura a la que se encuentra el nuevo inquilino se igualará con la del acuario.

Un cambio brusco de la temperatura provocará el shock térmico a los que los peces se exponen por ser poiquilotermos (y no poder regular por si mismos la temperatura de su cuerpo). Cualquier cambio que supere los 3ºC repercutirá gravemente en las defensas del pez.

Pasado este tiempo procederemos a abrir la bolsa para incluir un poco de agua del acuario. Tras cinco minutos de haber hecho esto, introduce un poco más y repite el proceso hasta cuatro veces más (cuando la bolsa esté prácticamente llena).
Si el acuario está vacío y los peces son nuevos, es aconsejable apagar las luces durante las primeras 24 horas una vez introducidos, para darles la oportunidad de instalarse y evitar futuros conflictos territoriales.

En caso de que ya haya habitantes en el acuario se puede facilitar la integración alimentando a los otros para que no pongan mucho interés en la llegada del nuevo habitante.

Evítese alimentarlos el primer día, ya que estarán tan interesados en descubrir su nuevo hogar que no comerán y ese alimento no ingerido pronto causará problemas en la calidad del agua (aparición de algas, por ejemplo).

Los recién llegados podrán ser atacados por los otros peces. Mantendrán las aletas pegadas al cuerpo y tenderán a esconderse.

La cuarentena

Aunque el periodo de cuarentena es algo opcional, siempre es bueno prevenir la posible introducción de enfermedades en la comunidad ya establecida dentro del tanque. El uso de un acuario adicional donde mantendríamos los peces durante dos o tres semanas para su observación nos permitirá diagnosticar cualquier enfermedad oculta o simplemente observar si el pez come correctamente.

Escrito por Jaime Trujillo Escobedo

Links Entradas antiguas, Entradas mas recientes flotantes y personalizados

Ya hemos visto cómo poner una flechita flotante para volver arriba, un botón de Twiter flotante, una imagen flotante en el blog, la navbar de blogger flotante y en el pie del blog e incluso un aviso o anuncio flotante que permanece fijo al navegar por el blog.

Ahora es el turno de los enlaces o links de navegación, situados al final del bloque en el que aparecen los posts y que dicen 'Entradas antiguas - Entradas más recientes'. Facilitan la navegación dentro del blog por lo que son de mucha utilidad para el lector.

Dado que estos enlaces no suelen destacar o llamar la atención, vamos a reemplazarlos por iconos y hacer que 'floten' en una esquina.

Aquí les dejo una imagen del resultado:

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

Localizamos esta parte de código en la plantilla:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>

Ahora, justo después de <b:includable id='nextprev'> añadimos este código:

<div id='blPagerjte'><b:if cond='data:newerPageUrl'><a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src='IMAGEN IZQUIERDA'/></a></b:if><b:if cond='data:olderPageUrl'><a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src='IMAGEN DERECHA'/></a></b:if><b:if cond='data:blog.homepageUrl != data:blog.url'><a expr:href='data:blog.homepageUrl'><img src='IMAGEN PORTADA'/></a><b:else/><b:if cond='data:newerPageUrl'><a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://cdn1.iconfinder.com/data/icons/humano2/24x24/actions/gtk-media-record.png'/></a></b:if></b:if></div>

Reemplaza en el código IMAGEN IZQUIERDA por la URL o dirección de la flechita que apunta hacia la izquierda; IMAGEN DERECHA por la URL o dirección de la flechita que apunta hacia la derecha y IMAGEN PORTADA por la URL o dirección del icono 'inicio / portada'.

Cómo obtener la dirección de una imagen ha sido explicado en esta entrada.

A continuación, unos botones que pueden utilizar:









Una vez hecho esto, buscamos la etiqueta </head> e insertamos esta línea justo antes:

Para mostrar los botones a la izquierda:

<link href='https://sites.google.com/site/editoriosus/fds/bljjTePaginacc.css' rel='stylesheet' type='text/css'/>

Para mostrarlos a la derecha:

<link href='https://sites.google.com/site/scriptsbalcon/b/bljjTePaginacc2.css' rel='stylesheet' type='text/css'/>

Guardamos la plantilla para terminar.