Blog Bazar

Eliminar el marco de los buscadores de imágenes

noreply@blogger.com (Unknown) — Tue, 03 Apr 2012 15:41:00 +0000

Muchas veces nos llegan visitas a través de la búsqueda de imágenes de Google u otros buscadores; en esos casos, nuestro blog se ve con un marco en la parte superior. Lo que ocurre con esa visita es que no cuenta como visita al blog, ya que la URL pertenece a Google. Con este sencillo código de javascript es posible eliminar automáticamente ese marco, permitiendo al usuario ingresar directamente a nuestro blog luego de haber hecho click en una imagen de la página de resultados del buscador.

1) Código para saltear el marco de Google

Sólo debemos copiar y pegar el código siguiente en cualquier parte dentro de las etiquetas <head>, preferentemente luego de las meta-etiquetas (las que comienzan con "<meta content=..."), de manera que que el navegador llegue al script antes de cargar innecesariamente el resto de la página.

Actualizado (2012): ahora funciona también en la nueva versión de Blogger.

Ante dudas o sugerencias, por favor, dejar un comentario.

Efecto < strike > con CSS

noreply@blogger.com (Unknown) — Wed, 19 Nov 2008 23:15:00 +0000

Este truco está ahora en MiniTutoriales.

Mostrar el número total de posts

noreply@blogger.com (Unknown) — Sun, 24 Aug 2008 03:43:00 +0000

Este es un truco muy sencillo para mostrar en la cantidad real de entradas publicadas que hay en un blog de Blogger, sin importar si son 10 o 1.000. A través de JavaScript + JSON, este script cuenta los posts directamente desde el feed y devuelve el número junto con cualquier otro texto que le indiquemos.

Implementación

Simplemente hay que copiar y pegar el siguiente código en un "Elemento HTML/JavaScript", en la pestaña "Diseño" de nuestro Panel de Blogger.

<script style="text/javascript">
function showpostcount(json) {
document.write('Hay ' + parseInt(json.feed.openSearch$totalResults.$t,10) + ' posts en Blog-Bazar');
}
</script>

<script src="http://mi-blog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

Las únicas modificaciones necesarias: cambiar "mi-blog" por el nombre de tu blog (tal como figura en la URL) y personalizar el texto que va antes y después del número de posts.

Contenido diferenciado por etiquetas

noreply@blogger.com (Unknown) — Wed, 20 Aug 2008 00:17:00 +0000

Con este truco podemos personalizar cada post de acuerdo a la etiqueta que tenga asignada. Mi idea en particular era poner anuncios de AdSense solamente en algunas entradas, asignándoles a éstas la etiqueta "adsense", por ejemplo. Pero puede usarse para cualquier cosa, como para agregar una imagen relacionada con la etiqueta, poner enlaces relevantes a la categoría, agregar un indicador de carga para entradas muy largas, o inclusive para ocultar algo, como el formulario de comentarios, etc.

La idea es simple: creamos un div con el contenido que queremos que sólo se vea en determinadas entradas, le asignamos una etiqueta en común a esas entradas, y luego incluimos un código XML que mostrará el div sólo en ellas.

1) Código condicional XML

Esta es la porción de código principal, que hace tres cosas:

Observa si la página actual es una página de entrada individual (no la página principal ni de las de etiquetas).
Luego, si se cumple lo anterior, observa si se la entrada tiene la etiqueta "Especial".
Si se cumplen todas las condiciones anteriores, muestra nuestro div especial; si no se cumplen, no pasa nada.

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "Especial"'>
<div class="midiv">
CONTENIDO ESPECIAL
</div>
</b:if>
</b:loop>
</b:if>
</b:if>

Este script hay que insertarlo en la plantilla de Blogger, del siguiente modo:

Vamos a "Panel" » "Diseño" » "Edición de HTML" » "Expandir plantillas de artilugios".

Una vez allí, hay varios lugares donde podemos ubicarlo, dependiendo de lo que queramos hacer. En mi caso, como quise poner un bloque de AdSense, el mejor lugar me pareció inmediatamente luego del título y metido dentro del post (ver ejemplo). Para hacer esto, lo pegamos inmediatamente antes de:

Para ponerlo al final de la entrada, hay que pegarlo después de:

Para otras ubicaciones, es cuestión de probar, aunque no puedo asegurar que funcione en cualquier parte del blog, ya que no lo intenté.

2) Contenido del div

Dentro de este espacio que acabamos de crear, puede ir prácticamente cualquier cosa, ya sea texto, publicidad, JavaScript, Flash, HTML, etc. Simplemente reemplazaremos "CONTENIDO ESPECIAL" por lo que queramos poner, con la cantidad de líneas que sea necesario.

Es fácil, ¿no?. Pero ahora verás que el blog quedó hecho un desastre, porque el contenido del div no tiene estilos asociados. Veamos cómo arreglar eso...

3) Hoja de estilos CSS

El código que proporcioné al principio tiene asignada una clase llamada "midiv". Aprovechando esa clase, podemos cambiar completamente la forma en que nuestro div se mostrará en pantalla. Para ello, en la misma plantilla pero más arriba, buscaremos la sección de CSS y agregaremos:

.midiv {
float:left;
margin-right:10px;
height:200px;
}

Ésta es sólo una posibilidad. En este caso, lo que hice fue hacer que el div quede alineado a la izquierda mientras el resto de la entrada lo rodea (float:left), que quede un espacio entre él y el contenido a su derecha (margin-right:10px) y que tenga un ancho fijo de 200 pixeles (height:200px). De esta forma, parece que la publicidad está dentro de la entrada, aunque en realidad no lo está. Utilizando CSS puede cambiarse el color de las letras, del fondo y cualquier otra cosa, pero ése es un tema aparte.

(la parte de CSS de tu blog se reconoce fácilmente porque tiene este formato)

Finalmente, sólo hace falta agregarle la etiqueta "Especial" a todas las entradas en las que queramos que aparezca el div especial. Atención a las mayúsculas.

4) Personalización (opcional)

Uso como ejemplo la etiqueta "Especial", pero puede ser cualquier otra. Simplemente hay que reemplazar en el código "Especial" por cualquier otra palabra. Lógicamente, la misma palabra deberá ir como etiqueta en las entradas.
Lo mismo se aplica a la clase "midiv". Para cambiarla, hay que reemplazar "midiv" por cualquier otra palabra. No hay que olvidar también cambiar el nombre de la clase en la hoja de estilos CSS (dejando intacto el punto del principio).
Desde la pestaña "Editar entradas" del Panel de Blogger podemos agregar o quitar o intercambiar etiquetas todos los días sin necesidad de modificar el código de este truco. De esta manera, tendremos total control sobre cuándo y dónde se mostrará nuestro nuevo div.

Respuestas por adelantado:

No importa cuántas etiquetas tenga el post. Mientras la etiqueta "Especial" esté entre ellas, funcionará perfectamente. Si no la tiene, el blog se comportará de forma normal.
Para poner publicidad dentro del div, hay que convertir primero el código de AdSense con una herramienta como esta. Luego se puede pegar dentro del div sin problemas.
Pueden hacerse diferentes divs para diferentes etiquetas, pero no es aconsejable abusar de esto ya que el código del blog se hará cada vez más pesado y lento. Sólo hay que repetir todo el proceso, utilizando distintas palabras para las partes que están resaltados en el código.

Elemental:

Si hay dudas o comentarios, por favor, deja la URL de un post donde hayas implementado el truco.

Etiquetas expandibles en la barra lateral

noreply@blogger.com (Unknown) — Wed, 27 Feb 2008 03:18:00 +0000

¿Demasiadas etiquetas en tu sidebar? La mejor opción: ponerlas todas en un menú desplegable, como este: . Por supuesto que funciona de manera automática, todo lo que hay que hacer está en estos dos sencillos pasos:

1) Buscar el código de las etiquetas

En Diseño » Edición de HTML (sin expandir la plantilla), busca la siguiente línea:

Nota 1: La plantilla debe tener instalado un widget de etiquetas, lo cual es lo más normal. Si no lo tiene, hay que agregarlo desde Diseño » Elementos de la página » Añadir un elemento de página » Etiquetas.

Nota 2: Si la plantilla ha sido modificada con anterioridad, es posible que no encuentres esta línea tal como está arriba. Si éste es el caso, la solución es la siguiente: buscar sólo la última parte del código (type='Label') y luego seleccionar lo más parecido a la la línea original, empezando siempre desde <b:widget id= (lo que puede llegar a estar distinto es: el número después de "Label", "Locked=true" en lugar de "Locked=false" o el título "Etiquetas" cambiado por algún otro).

Luego de encontrado el código, prosigue con el siguiente paso:

2) Reemplazar las etiquetas por el menú

Esta parte es más sencilla. Sólo copia y pega en su lugar este fragmento:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Elije una categoría</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

</div>
</b:includable>
</b:widget>

3) Personalización (opcional)

En el código de arriba, el título del widget es "Etiquetas" (resaltado). Puede cambiarse reemplazándolo por cualquier palabra o frase. También puede cambiarse más tarde desde Diseño » Elementos de la página » Editar.
El texto que aparece por defecto en el menú, antes de que el usuario elija una etiqueta, es "Elije una categoría" (resaltado). Puede cambiarse por cualquier otro texto, pero hay que tener en cuenta que por defecto, el menú será tan ancho como la variable anterior o la etiqueta más larga que tengamos en el blog.
Si al ser desplegado, el menú sigue siendo demasiado alto como para caber en la página, podemos darle una vuelta de tuerca transformándolo en una lista con una barra deslizable (scroll bar), como por ejemplo:

Para ello, son necesarios dos pasos adicionales muy rápidos:

Paso 1) Agregar luego del primer "select": size="X", donde X debe ser reemplazado por el número de líneas que queremos mostrar (en este ejemplo es 3).

Paso 2) Eliminar la primer opción del código del menú (<option>Elije una categoría</option>).

Ante cualquier duda, sugerencia o mejoras para este código, por favor dejen sus comentarios.

PNG transparente en Internet Explorer

noreply@blogger.com (Unknown) — Thu, 10 Jan 2008 19:02:00 +0000

Cualquier blogger con un mínimo de experiencia sabe que Internet Explorer está plagado de errores que nos hacen darnos la cabeza contra el monitor a la hora del diseño. Con este sencillo truco (que además cumple con los estándares: no es un "hack"), podremos mostrar imágenes PNG con fondo transparente en IE5 y 6. El código también soluciona otras fallas de IE7 en lo referente a los estilos CSS...

1) El código JavaScript condicional (sólo IE)

Más sencillo, imposible: copia y pega el siguiente código justo antes de la etiqueta </head>

2) Ajustes de imágenes PNG para IE

El script funciona sólo para imágenes cuyo nombre de archivo termina en "-trans.png". Por ejemplo, el logo de Blog-Bazar que está aquí arriba a la derecha se llama "bblogo-trans.png". Con este paso adicional el problema estará solucionado.

Nota: Si utilizas servicios de hosting que cambian el nombre de archivo (como ImageShack), no funcionará. Una excelente alternativa es GooglePages, que permite subir cualquier tipo de archivo con su nombre original.

Frases aleatorias en tu blog

noreply@blogger.com (Unknown) — Wed, 09 Jan 2008 17:44:00 +0000

Pequeño código javascript para mostrar una frase distinta cada vez que se cargue la página. Puedes ponerlo en cualquier parte del blog, y con un poco de imaginación lograr un efecto interesante. Las frases son completamente personalizadas, puedes definir tantas como quieras y del largo que desees. El ejemplo que se muestra a continuación está funcionando (para ver una frase distinta presiona F5):

1) El código javascript

Copia y pega estas líneas en un elemento de página HTML/JavaScript:

<script language="JavaScript">
frases = new Array()
frases[0] = "Tendrá todo el dinero del mundo… pero hay algo que jamás podrá comprar…. un dinosaurio (H. J. Simpson)"
frases[1] = "En la vida hay 3 tipos de hombres, los que saben contar y los que no (H. J. Simpson)"
frases[2] = "¿¡Operadora!? ¿Cuál es el número del 911? (H. J. Simpson)"
frases[3] = "Intentar algo es el primer paso hacia el fracaso (H. J. Simpson)"
aleatorio = Math.random() * (frases.length)
aleatorio = Math.floor(aleatorio)
document.write(frases[aleatorio])
</script>

2) Cambiar y agregar frases

Simplemente reemplaza las frases por las que te gusten. Puedes añadir tantas como quieras agregando frases[4], frases[5], etc. en el orden correspondiente, siempre antes de aleatorio = Math.random()... y con la frase entre comillas.

3) Personalización (opcional)

Puedes alterar la apariencia del widget (color del texto, tamaño, alineación, etc.) insertando todo el código anterior dentro de un div, como por ejemplo:

<div style="text-align: center; color: #0000ff; font-weight: bold">

(código javascript)

</div>

(en este caso las frases se verán centradas, en color azul y en negrita)

Agregar una imagen flotante (fija)

noreply@blogger.com (Unknown) — Mon, 10 Dec 2007 23:46:00 +0000

Esta idea sencilla y vistosa te permite poner una imagen en una esquina del blog que quedará siempre sobre el resto de los contenidos y será visible aún cuando el usuario se desplace por la página. El procedimiento es muy simple, lo más importante es la creatividad a la hora de elegir la imagen y lo que ella transmite. Para comprender mejor la idea puedes ver en este mismo blog, donde se ha mezclado esta técnica con una que mostrábamos antes (indicador de carga del blog): la imagen flotante aparece sólo mientras dura la carga del blog (presiona F5 para verla con más atención).

1) Ubicar la imagen

La posición de la imagen no está determinada por el lugar donde escribas el código, por lo que puedes ponerla donde gustes; puedes insertarlo en un elemento de página en el lugar donde te resulte más cómodo (aunque es preferible bien arriba, así carga antes que el resto). El verdadero lugar donde aparecerá la imagen proviene de lo que escribas en el código, como verás más abajo...

Sólo ve a Plantilla » Elementos de la página » Añadir un elemento de página » HTML/Javascript » pega el siguiente fragmento:

<img style="display: scroll; position: fixed; bottom: 30px; left: 60px;" src="URL-DE-LA-IMAGEN"/>

Reemplaza URL-DE-LA-IMAGEN por la ubicación correspondiente del gráfico y cambia a tu gusto los siguientes parámetros marcados con azul:

Para poner la imagen bien cerca del ángulo superior derecho, por ejemplo, el código quedaría así:

<img style="display: scroll; position: fixed; top: 10px; right: 10px;" src="URL-DE-LA-IMAGEN"/>

2) Utilizar la imagen como indicador de carga (opcional)

Sigue los pasos indicados aquí, y agrega:

entre "img" y "src".

Botón para imprimir el blog

noreply@blogger.com (Unknown) — Mon, 12 Nov 2007 06:10:00 +0000

Este truco inserta un enlace que al presionarlo imprime la página actual del blog (funciona en cualquier sitio, no sólo en Blogger). Puede ser muy útil en aquellos posts en los que predomina el texto y se dificulta su lectura en el monitor. Ejemplo: Imprimir esta página.

1) El código HTML para ubicar el link

Elegir el lugar donde deseas que aparezca la opción (puede ser dentro de un post, en un elemento de página en tu barra lateral, etc.)

Copiar y pegar el siguiente fragmento:

<a href="javascript:window.print()">Imprimir esta página</a>

Guarda los cambios ahora o después de la:

2) Personalización (opcional)

Puedes cambiar el texto "Imprimir esta página" por cualquier otro, o puedes:

Usar una imagen de enlace, reemplazando el texto "Imprimir esta página" por:

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

No olvides reemplazar URL-DE-LA-IMAGEN por la dirección del gráfico que deseas usar como botón.

Indicador de carga del blog

noreply@blogger.com (Unknown) — Mon, 12 Nov 2007 05:36:00 +0000

Este sencillo código javascript permite mostrar una imagen animada durante los instantes que tarde en cargar la página completamente, especialmente útil para bloggers que utilicen muchas imágenes, flash y otros objetos pesados. Su implementación es muy sencilla:

1) Código javascript que detecta la carga del blog

Ubicarse en: "Plantilla" » "Edición de html".

Agregar el siguiente código en algún lugar entre las etiquetas <head> y </head>, preferentemente justo antes de ésta última.

Guardar la plantilla.

2) Ubicar la imagen dentro del blog

Ir a "Plantilla" » Elementos de la página".

Donde queramos que aparezca el indicador, elegir "Añadir un elemento de página" » "HTML/Javascript" y pegar el siguiente código:

<div id="imgLOAD" style="text-align:center;"><img src="URL-DE-LA-IMAGEN"/></div>

Guardar cambios.

3) Personalización de la imagen

Simplemente cambia "URL-DE-LA-IMAGEN" (no quites las comillas) por la dirección de cualquier archivo GIF animado que quieras utilizar; aquí hay varios ejemplos para comenzar:

(usa la imaginación, no te limites a los indicadores comunes y corrientes)

Botón para "leer más" en Blogger

noreply@blogger.com (Unknown) — Fri, 09 Nov 2007 05:58:00 +0000

Este truco exclusivo para Blogger permite mostrar una vista previa de las entradas y un botón para expandirlas (título + resumen + "leer más") en la página principal del blog y en las páginas de etiquetas, pero muestra las entradas completas en las páginas individuales (es decir, sólo funciona donde hay más de una entrada).

Al hacer click en "leer más", el resto de la entrada aparece instantáneamente sin cambiar de página. Así mismo, se hará visible otro botón para volver a ocultar el texto expandido.

Lo mejor de este hack es que es selectivo, es decir, no afecta a todas las entradas si no sólo a aquellas que elijamos (con menos de una línea de código).

DEMO

1) Javascript

Ubicarse en: "Plantilla" » "Edición de html" » "Expandir plantillas de artilugios".

Agregar el siguiente código en algún lugar entre las etiquetas <head> y </head>, preferentemente justo antes de ésta última.

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
<style type='text/css'>#fullpost {display:none;}</style>
</b:if>

2) El XML (el código largo)

Buscar el siguiente código y agregar las partes que están resaltadas:

<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/> </a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Leer más...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Resumir...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> 
</div>

Nota: el includable id="post" de la primera línea del código puede no ser exactamente igual en cada plantilla. Podría contener algún elemento como "uncustomized-post-template". Lo importante es agregar expr:id='"post-" + data:post.id'.

3) El código para expandir/ocultar las entradas

Ya puedes guardar la plantilla.

Ir a "Configuración" » "Formato" » "Plantilla de entrada" (abajo de todo). Agrega el siguiente código:

RESUMEN <span id="fullpost"> RESTO </span>

En adelante, cada vez que crees una entrada, aparecerá este último código; deberás sobreescribir "RESUMEN" con el texto que deseas que sea visible (tras él aparecerá el link "Leer más"). Luego sobreescribe "RESTO" con el texto (o código, imágenes, etc.) que quieres que aparezca al pulsar sobre "Leer más...".

También puedes agregarlos a las entradas que ya has escrito, pero implica que las edites una a una. Sólo encierra lo que quieras que esté oculto con las etiquetas que encierran la palabra "RESTO" en el ejemplo anterior; todo lo que esté entre esos dos códigos permanecerá oculto hasta que se haga click en "Leer más...".

Personalización (opcional)

Puedes sustituir las palabras RESUMEN y RESTO por las que consideres de más ayuda; nadie más las verá.

Puedes cambiar las frases "Leer más..." y "Resumir..." por lo que creas conveniente.

Puedes agregar una imagen como en este ejemplo agregando el siguiente código remarcado en amarillo:

<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'><img src='URL-DE-LA-IMAGEN' style='border:none; margin-bottom:-5px;'/> Leer más...</a></p>
</span>

Lo mismo vale para "Resumir", sólo agrega el código resaltado (reemplazando 'URL-DE-LA-IMAGEN' por la dirección del gráfico que deseas mostrar) en el lugar correspondiente (lo encontrarás fácilmente debajo del anterior).

Para hacer una entrada sin resumen (que se muestre completa) sólo borra el código anterior y escriben normalmente.

fuente: Beautiful Beta / Hackosphere.