11 comentarios

Efecto < strike > con CSS

Esto es un truco rápido y sencillo. Se me ocurrió ayer y lo publico porque nunca he visto algo similar en la web. Es extraño que nadie lo pensara.

El tag <strike> o <s> sirve para tachar un texto, cruzar una línea por el centro de la palabra. Aunque originalmente su utilidad es la de indicar que se ha corregido algo del documento, hoy en día suele usarse con fines estéticos. Así es como se ve normalmente:

Texto tachado con HTML

Mi idea es utilizar CSS para tachar el texto. Así se vería luego de aplicar este truco:

Texto tachado con CSS

Sigue estas instrucciones...

1) CSS para tachar el texto


Simplemente hay que agregar a la hoja de estilos del blog estas líneas (en cualquier parte entre <head> y </head>):

strike {text-decoration:none; background:transparent url(strike.png) repeat-x left 55%}

Y, por supuesto, reemplazar strike.png por la URL de la imagen que queremos que aparezca de fondo.


2) Implementación del truco en los posts


Simplemente encierra el texto que quieres tachar entre las etiquetas <strike> y </strike> (siempre en el modo de edición de HTML).


3) Explicación del código y Personalización


  • strike {...} define que se aplicará a todas las palabras que estén entre las etiquetas <strike> y </strike> los estilos definidos entre las llaves ( { y } ).
  • text-decoration:none; quita la línea predefinida que cruza el texto.
  • background:transparent url(strike.png) agrega una imagen de fondo. En el ejemplo de arriba usé esta: pero no hay límites en cuanto a la creatividad; cualquier imagen podría dar un buen efecto.
  • repeat-x hace que la imagen se repita horizontalmente, para que no tengamos que usar una imagen muy larga. Lógicamente, es necesario que las puntas coincidan para lograr un efecto de continuidad.
  • left 55% posiciona la imagen con respecto a la palabra: "left" la alinea a la izquierda, que es donde comienza la palabra, y "55%" la sitúa un poco por debajo de la mitad. Usé 55% en lugar de 50% porque la mitad se toma desde la altura de las mayúsculas y no quedaría en el centro de las palabras escritas en minúsculas.

4) Imágenes alternativas


Dejo algunas variantes que preparé para que uses libremente, de acuerdo al color de tu texto y el efecto que quieras lograr:

  • Negra:
  • Azul:
  • Roja:
  • Verde:
  • Grande:
  • Mediana:
(hacer click sobre la imagen, copiar la dirección de la barra superior del navegador y pegarla reemplazando strike.png en el código CSS)

Nota: aún después de aplicar el truco, es posible seguir usando la línea común mediante <s> y </s> o <span style="text-decoration:line-through"> y </span>.

Además de tus dudas y comentarios, me gustaría ver cómo lo implementaste, y si hay alguna sugerencia o imágenes que quieras regalar, también son bienvenidas.

Etiquetas:

5 comentarios

Mostrar el número total de posts

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.

Etiquetas: ,

7 comentarios

Contenido diferenciado por etiquetas

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:

  1. Observa si la página actual es una página de entrada individual (no la página principal ni de las de etiquetas).
  2. Luego, si se cumple lo anterior, observa si se la entrada tiene la etiqueta "Especial".
  3. 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:

9 comentarios

Eliminar el marco de los buscadores de imágenes

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.

Ante dudas o sugerencias, por favor dejar un comentario.

Etiquetas: ,

4 comentarios

Etiquetas expandibles en la barra lateral

¿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.

Etiquetas: ,

37 comentarios

PNG transparente en Internet Explorer

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>

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]-->

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.

Etiquetas:

23 comentarios

Frases aleatorias en tu blog

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)

Etiquetas: ,

Suscribirse a: Entradas (Atom)