Owner: Oloblogger URL:http://oloblogger.blogspot.com Join Date: Fri, 05 Oct 2007 18:58:27 -0500 Rating:0 Site Description: Blogger para torpes... y para no tanto. Site statistics:Click here
Imágenes aleatorias 2008-02-12 16:43:00 En una anterior ocasión explicamos como generar y mostrar frases aleatorias para, por ejemplo, lucir nuestras citas favoritas cada vez que se cargue nuestra página. Algun@s pidieron el mismo truco pero para mostrar imágenes distintas al azar en cada ocasión que se nos visita. Pues helo aquí...Facilito, facilito. Sólo hay que copiar este código dónde queramos mostrarlas.<script language="JavaScript">function ver_imagen(){n=0;this[n++]="DIRECCION IMAGEN 1";this[n++]="DIRECCION IMAGEN 2";this[n++]="DIRECCION IMAGEN 3";this[n++]="DIRECCION IMAGEN 4";this.N=n;}var imagen=new ver_imagen();src= imagen[ Math.floor(Math.random() * imagen.N) ] ;document.write("<img src="+src+">");</script>Hay que sustituir cada DIRECCION IMAGEN, por la dirección URL de nuestras propias im
Mapeado de imágenes 2008-02-09 12:03:00 El mapeado viene a ser algo parecido a delimitar zonas en una imagen. Cada zona reaccionará de una manera distinta que podremos "programar" mediante HTML.Un ejemplo sería la siguiente imagen, que tiene definidas cuatro zonas. Se trata de una única imagen y los colores son para hacer más "visibles" dichas zonas. Cada una de ellas está delimitada por un rectángulo que empieza en las coordenadas (x,y) y termina en la (x1,y1). La zona azul, abarca desde el pixel 0,0 hasta el 199,99, siendo el primer número el desplazamiento horizontal y el segundo el vertical. La primera coordenada es la de arriba a la izquierda del rectángulo y la segunda la de abajo a la derecha, definiendo la diagonal del rectángulo.Ver código del ejemplo <div align="center"><map name="mapa1"><area
Crear formularios. Mejor en línea. 2008-02-09 11:54:00 Crear un formulario puede ser muy interesante, para facilitar el contacto de los lectores con los administradores de un espacio web.Hay diversos sitios dónde encontrar una información muy completa con todas las etiquetas, atributos y opciones para crearlos. Algunos de los mejores son WebTaller, HtmlQuick y WebExperto.El problema es que, generalmente, los datos que el usuario facilite los querremos enviar a nuestro correo electrónico. Para ello, habrá que introducir como parte del código, nuestra dirección. Este es un camino abonado para que nos inunden de spam: los bots roba-direcciones nos lo grabarán al vuelo. Por eso comienzo esta entrada que mejor usar formularios on-line.Estos servicios gestionan tanto el diseño del formulario, como la captación de datos y el envío a nuestro
BPT. Cuadro con texto desplazandose 2008-02-08 12:24:00 Con un sencillo código, puedes crear un pequeño cuadro con un texto
que se desplaza hacia arriba.Prueba a modificar el color, la dirección, etc.Experimenta...<div align="center"><table bgcolor="#990000" border="1" width="200"><tbody><tr><td align="center"><marquee scrollamount="1" direction="up" height="50"><span style="color:#ffffff;">Con un sencillo código, puedes crear un pequeño cuadro con un texto que se desplaza hacia arriba.Prueba a modificar el color, la dirección, etc.Experimenta...</span></marquee></td></tr></tbody></table></div>
Botón para "Ir arriba" 2008-02-06 17:30:00 Habreis visto en muchas páginas un botón, normalmente con aspecto de flecha, que sirve para ir rápidamente al principio de la página correspondiente.Para añadir esto a vuestro espacio, en primer lugar teneis que elegir/construir la imagen que os guste. Por convención, bueno más por costumbre que por convención, se suele usar una flecha apuntando hacia arriba.La situaremos en un punto fijo, no de la página, sino de la parte de la misma que se ve en nuestra pantalla. Para ello usaremos en el estilo de la imagen, la expresión position:fixed. Con ella, la imagen no se moverá cuando nos desplacemos (scroll). Por último la pondremos en el punto concreto añadiendo la distancia al borde que deseemos.El código hay que colocarlo detras de <head> y quedará similar a éste:<a h
Technorati 2008-02-04 18:00:00 A estas alturas, hablar de Technorati
parece que es hablar de la prehistoria de los blogs, pero creo que a muchos que empiezan ahora con su propio espacio, les puede ser útil esta información.Básicamente, se trata de un buscador de entradas de blogs. No se pretende tanto encontrar sitios relacionados, sino más bien entradas que hablen del tema. Quizás lo más interesante es que en los resultados, prima más la actualidad de la noticia que el pagerank de la página, tal y como ocurre en Google.De esta manera, si buscamos una noticia de actualidad en un sistema tradicional, nos aparecerán resultados que están en las páginas con más "relevancia", sin tener en cuenta su fecha de publicación. Con Technorati nos aseguramos que lo que aparece es de la máxima actualidad, posiblemente ca
Efecto foto en tus imágenes 2008-02-03 04:55:00 Este es un script que sirve para darle aspecto de fotografía a las imágenes que coloques en tu web. Estas aparecerán un poco inclinadas, con un marco y un poco difuminadas en un extremo. Todo tipo Polaroid. Se graba el script en la plantilla y una vez allí, funcionamos como con cualquier otra clase.<script src='' type='text/javascript'/>Editais la plantilla (HTML) y el código de arriba lo teneis que copiar encima de la etiqueta </head>. Con esto generamos la clase instant.Luego, cada vez que creeis una entrada en la que querais poner una imagen con este efecto, teneis que subir la imagen y posteriormente añadir la clase instant con sus atributos dentro del tag <img src...>, más o menos así.<img class="instant ishadow33 itiltright icolor000000" src="URLIMAGEN"/&
BPT. Realzar los comentarios que escribes 2008-01-31 16:55:00 Para el que no sabe HTML, hasta lo más básico parece un gran misterio. Este es el caso del mensaje que sale en el formulario de comentarios de la mayoría de blogs, sean de la plataforma que sean.En el caso de Blogger, el mensaje que aparece marcado en la imagen, te avisa de que puedes usar <b> <i> y <a>. Veamos para qué sirven y cómo se utilizan.<b> es la etiqueta para que un texto salga en negrita. Sólo hay que colocar el texto a resaltar entre esta etiqueta y la de cierre </b>.<b>Todo esto saldrá en negrita.</b> Todo esto no porque no tiene la etiqueta.dará como resultado...Todo esto saldrá en negrita. Todo esto no porque no tiene la etiqueta.<i> funciona exactamente igual que la anterior, pero en este caso muestra un texto en curs
Varias calificaciones de una tacada 2008-01-29 16:37:00 Este es un servicio mediante el cual, desde una sola web, podeis conseguir artilugios para mostrar vuestro Pagerank, la calificación de Technorati, la de Alexa y la de Yahoo.El funcionamiento es sencillo: introducís vuestra dirección, seleccionais el ranking del que quereis obtener la información y por último escogeis entre una gama de botones con distintos diseños. Se llama RankWidget.
Efecto gráfico para texto 2008-01-27 10:39:00 Esta es una pequeña tontería para resaltar un texto
. Simula un papel rasgado y el texto quedaría como escrito en otro papel que hubiera debajo.Primero hay que buscar o diseñar una imagen que parezca un papel rasgado. Si no la encontramos, en estos enlaces teneis ambas formas de conseguirla:Galería de imágenes. Es de pago, pero para sacar sólo el trozo que nos hace falta, nos vale.Hazlo con PhotoshopOtro con PhotoshopY otro más con Photoshop (en inglés)Hacer con PhotofiltreDicen que la realidad suele superar a la ficción, así que si tienes escaner, también puedes rasgar un papel y luego escanearlo. Ponle algún fondo oscuro para poder recortarlo después fácilmente con cualquier programa de dibujo.Para perezosos, ofrecemos esta imagen, válida para fondos negrosVale. Tenemos la
Blogroll fácil 2008-01-24 16:01:00 O como poner una marquesina con nuestros enlaces favoritos, imágenes, texto, etc.Se trata de usar la etiqueta marquee para incluir dentro los elementos html que queramos. Esta instrucción muestra un recuadro y lo que se coloca dentro de él, se muestra haciendo un scroll (desplazamiento). En este caso se ha configurado hacia arriba.Además hemos añadido un onmouseover para detener el scroll cuando se pase el puntero por encima del contenido y un onmouseout para restaurarlo. Este sería el resultado:Dentro puedes escribir un simple texto que irá desplazándose como éste,una colección de imágenes como éstas:o incluso enlaces:CosicasOlografiasOlojuegosVer código <table align="center" width="200" height="200" border=2><tr><td><marquee Read more:Blogroll
Crear una ventana para ver otra página web 2008-01-22 17:04:00 Un IFRAME es un recuadro dentro de una página web, en la cual se puede mostrar el contenioo de cualquier dirección web con cualquier contenido. De manera más exacta, se trata de incrustar un documento HTML dentro de otro documento HTML.De esta manera y por ejemplo, podreis poner en vuestro blog el contenido de otra web, como si de una ventana abierta se tratara. Incluso se puede navegar por ella pinchando en los distintos enlaces. La utilidad ya se la dareis vosotros.El código del iframe es el siguiente:<div align="center"><iframe src="" width=450 height=250 frameborder=1 scrolling=auto></iframe></div>Además de que la dirección que se pone de ejemplo, hay que sustituirla por aquella que queramos incrustar, el comando tiene todos estos atrib Read more:Crear una
Comentarios comprimidos 2008-01-20 07:25:00 Lo que vamos a hacer hoy es que los comentarios no aparezcan a continuación del contenido de la entrada.Esta es la manera en que normalmente "aparecen" en la página principal de nuestro blog: un simple enlace que hace referencia al número de comentarios existentes y que al pincharlo nos remite a los comentarios, bien en una página aparte o bien en una ventana emergente, según lo tengamos configurado.Sin embargo, cuando accedemos al enlace directo de una entrada en concreto, tras la entrada, figuran todos los comentarios que se han hecho sobre la misma. Cuando tiene muchos comentarios, ésto puede suponer una interminable carga de la página y otras veces, como en el caso de R.E. que es quién en esta ocasión nos pregunta este tema, se prefiere que sea el lector el que decida si expan
Entradas relacionadas 2008-01-18 16:50:00 Hace tiempo que quería colocar en cada entrada, una relación de otras que fueran similares o con temas parecidos. Wordpress tiene "de serie" una utilidad para ello, pero Blogger no, lo que obliga a hacerlo a mano. Una tarea difícil de resolver con éxito y ardua de realizar.La idea es ofrecer un camino a los lectores, para que puedan seguir una línea temática, mientras navegan por el blog. Al autor también le sirve para sacar a primera línea, entradas antiguas pero que pueden ser de interés para el lector, al estar de alguna manera relacionadas.Bueno, pues de la mano de Vagabundia, grande donde los haya en esto del HTML y otras hierbas, hemos aprendido a instalar un sistema de búsqueda de entradas con temática parecida a la que se esté leyendo. La similitud está basada en las e
Gráfico de enlaces Technorati 2008-01-15 17:35:00 Una sencilla tarea, para conseguir un gráfico de cuántos enlaces van apuntando a tu espacio, día a día. Esta basado en Technorati
, por lo cual sólo muestra los que este servicio controla.En tu barra lateral, creas un nuevo elemento HTML con el siguiente código: <div align="center"><img src=" /></div>Donde DIRECCIONDELBLOG, tiene que ser sustituido por la URL de tu blog, pero sin el El resultado será más o menos éste:Configurable:El número 40, que indica los días a visualizar.El número 420, que indica el ancho en pixels del gráfico.El número 200, que indica el alto en pixels del gráfico.Hay otra utilidad para mostrar el número de entradas diarias que muestran determinada palabra. Para ver una con sustancia, mi imaginación no dió más de s
Ofrecer tu web como página inicio 2008-01-14 18:10:00 Este código genera un enlace que al pincharlo, abre una ventana emergente preguntando al usuario si quiere convertir tu página, en la página de inicio
de su navegador.Sólo funciona para Internet Explorer. No tengo noticias de que exista algo similar para Firefox... de momento.<a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('');" style="cursor: hand">Haznos tu página de inicio</a>En lugar de la frase, podeis colocar una imagen. Para eso, se cambia el texto "Haznos tu página de inicio" por <img src="URL imagen"/>.Como siempre, sustituye la dirección de Oloblogger por la tuya propia para que funcione correctamente.
Galeria de imagenes y casi de todo 2008-01-12 14:10:00 Elisabeth García me dijo el otro día, que quería aplicar un sistema con el que poder mostrar sus fotografías con una mayor calidad. Como luego me citaba la aplicación Litebox, he supuesto que se refería a la calidad de presentación y no a la calidad de las imágenes, ya que ésta última, depende sólo de la calidad con la que nosotros mismos subamos a nuestro servicio de alojamiento dichas imágenes. Atento FranArcilla, que creo que esto también te va a gustar a tí.Pues bien, lo del Litebox no se me ha dado nada bien, porque por algún motivo que no he llegado a descubrir, no he logrado que funcionara. Pero ahora viene la buena noticia: hace muy poquitos días, Vagabundia informó sobre un script que no sólo sirve para presentar imágenes de forma similar a la que Elisabeth nos Read more:imagenes
Feedjit . El tráfico de tu blog en tiempo real 2008-01-09 14:05:00 Como se adivina del título, esta página ofrece servicios que pueden ayudar a promocionar tu blog y, como mínimo, ayudarte a conocer ciertos datos interesantes sobre él. Es Feedjit.Actualmente ofrece cuatro servicios a través de otros tantos artilugios (widgets):Live traffic feed. Información sobre el origen de tus últimos visitantes: pais y URL de origenLive traffic map. Una forma gráfica de ver la zona de origen de los que llegan.Live recommended reading. Recomienda otras entradas a tu web, que otras personas vieron tras ver la actual. Tienes que tener más de 20 entradas creadas.Popular pages today. Un ranking de las entradas más vistas hoy. Se expresa en % y no en números absolutos. Una pena que sólo lleve la cuenta de un día.Primero configuras (customize) el widget con tus Read more:tiempo real
Todas tus entradas. Archivo del blog 2008-03-14 12:15:00 Blogger lleva "de serie" un artilugio llamado Archivo del Blog, que puedes añadir fácilmente desde Diseño-->Elementos de Página-->Añadir Elemento-->Archivo del Blog.Primero explicamos las opciones que existen y al final de la entrada, un truquillo.La utilidad nos da la opción de elegir entre estos tres estilos:** Jerarquía. Se muestran las entradas clasificadas por fechas, pudiendo escoger entre agruparlas por meses, semanas o días. Recomendable la primera opción en la mayoria de los casos. Dentro de cada apartado, las flechitas sirven para ir desplegando los elementos que contienen. Se puede seleccionar si mostrar los títulos de las entradas o no y si las fechas se verán en orden ascendente o descendente. Tiene este aspecto:▼ 2006▼ mayo+ Título de entrada 1+ Título de ent
Musica en tu blog. Una solución flexible 2008-04-01 17:18:00 Lizi me preguntaba el otro día como poner música y que ésta no se cortara cuando ibamos navegando de una página a otra.BGSOUND y EMBED permiten insertar música en tu espacio de una manera sencilla, pero tienen el inconveniente comentado. Están incrustados en la página que se visita y, al cambiar de página, se corta el sonido.Como además de ésto, lo de poner música en tu espacio puede ser divertido para algunos, pero también puede ser molesto para otros, se me ha ocurrido esta nueva chapuza para tener música de fondo, todo el rato, aún cambiando de página, pero que no suene si el usuario no lo elige así.En primer lugar, creamos una página nueva o un post con fecha atrasada y sin etiqueta si lo que tienes es un blog (ver tema). En esa página, insertamos nuestra música. Pue Read more:soluci
Iconos en GoSquared 2008-04-10 06:25:00 Si ya eres lo suficientemente mañoso/a, quizás te vengan bien estas colecciones de iconos con las que podrás dar a tu web un aspecto "pofesional".Hay varias colecciones con aspecto líquido:la del dibujo que aquí se muestra con 85 iconos, otra similar con 77 iconos y una tercera con 165 iconos en cinco versiones de color distinto. Todas con versiones jpg y para Adobe Illustrator
BPT. Crear imágenes animadas 2008-04-16 14:32:00 Quizás querais diseñar vuestros propios botones o banners con una animación y no sepais cómo. Alguien me preguntó hace unos días cómo se hacía ésto y como seguro que habrá alguno más por ahí deseoso de aprender, lo explicamos y ya está.Pues bien, para conseguir una animación, aprovecharemos la capacidad del formato GIF, para poder contener diversas imágenes a la vez.Por hablar con un poco más de propiedad, las distintas imágenes que puede contener un fichero con este formato, son realmente capas (como las que explica Shrek). Estas capas servirán para conseguir el mismo efecto que con las distintas imagénes de un dibujo animado o los distintos fotogramas de una película.Cada capa tendrá que contener una imagen distinta, pero que suponga sólo una pequeña variación sob
Artilugios en Fancy Gens 2008-04-19 02:00:00 Particularmente no me hacen mucha gracia este tipo de artilugios, pero de todo hay en la viña del Señor.No obstante, siempre se puede encontrar alguna tontería que pueda servir para algo en concreto y que se pueda acoplar de manera que quede bien.En esencia se trata de un generador de cartelitos, banners, tarjetas, relojes, etc. en los que se pueden personalizar tanto el texto como los efectos.Fancy
Gens: Para pasar un ratito jugando. Sin más pretensiones.
Archivo del blog. Más opciones 2008-04-22 12:37:00 En una entrada anterior, explicamos como mostrar todas las entradas usando el elemento "Archivo del Blog" y la opción "Jerarquía".Como hay tantas necesidades como bloggers, NeNe_Weno quería mostrar desplegados sólo el año y el mes, pero no el nombre de las entradas. Esta opción se puede conseguir de una manera incluso más fácil que la anteriormente explicada.Una vez más, este es el código completo del artilugio y en él vienen marcadas las expresiones o líneas que hay que borrar para conseguir el efecto. Son sólo dos cosas y están marcadas en negrita: una expresión (con el signo + incluido) y una línea completa.Ver código<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'><b:includable id='main'><b:if cond='data:title'>&l Read more:opciones
Menú flotante desplegable 2008-05-02 15:43:00 El diseño de los "botones" es configurable si se te da medianamente bien el diseño (al final se explica), pero con la imagen que aquí se facilita, la cosa queda desplegada como en la imagen de arriba. Si quieres verlo en funcionamiento, aquí o en la imagen de arriba, tienes el enlace... y si te gusta, ésto es lo que tienes que hacer:En primer lugar, hay que crear unas nuevas clases que llamaremos MENU y que recogen las distintas posibilidades de expansión del idem. Para ello, hay que copiar todo este código que sigue, justo antes de ]]></b:skin>VER CODIGO.menu{font-size:12px; text-decoration:none; color:#000000; font-family:verdana; width:150px; text-align:center; position:relative; margin:0px 0; padding:0px 0px;}.menu ul {padding:0; margin:0; list-style-type: none; text-a
Crear fácilmente un menú 2008-05-06 11:23:00 List-O-Matic es una web donde puedes obtener un menú con el estilo que mejor se adapte a tu espacio. Introduces los datos de los enlaces, seleccionas entre distintas opciones y te facilitan el código HTML y CSS para que puedas utilizarlo sin mayor trabajo.Esta en inglés pero es muy fácil de utilizar: 1. Introduce la cantidad de etiquetas o enlaces que necesitas y selecciona la casilla de verificación si quieres que aparezca un texto explicativo cuando pasas el puntero por encima de la etigueta. NEXT2. Introduce el texto que quieres que aparezca como enlace para el usuario, el texto explicativo (en su caso) y la dirección URL del enlace. NEXT3. Selecciona entre los diferentes estilos (horizontales y verticales). También hay que elegir si el código CSS lo quieres basado en IDentifica
Programar entradas en Blogger (2) 2008-05-07 12:10:00 Hace un tiempo explicábamos cómo redactar entradas y programarlas usando Blogger
in Draft, para que se publicaran en el día y hora que nosotros decidiéramos.Adelantando la publicación de una entrada que tenía preparada con este sistema, he descubierto casualmente que ya está operativo en Blogger "vulgaris".No hay que hacer nada especial con respecto a lo que ya haciais normalmente:redactar la entradaponer la fecha y la hora en la que quereis que se publique (1)pinchar "publicar"El post se guardará como "borrador" y aparecerá en el momento programado.(1) Pinchando en "Opciones de entrada" en la ventana "Crear", aparece "Fecha y hora de la entrada".
Adsense en una sola entrada... o donde quieras 2008-05-12 13:06:00 BPTBlogger ya nos proporciona una utilidad en Elementos de Página --> Añadir un Elemento de Página --> Adsense
, para poder meter publi en la barra lateral. También se puede colocar en otros sitios como la cabecera (arriba o abajo de ella), encima de las entradas, debajo o en el pie de la página. Esto se consigue simplemente arrastrando con el puntero del ratón, ese mismo elemento creado ante Read more:quieras
, una sola
Blogger para torpes. HTML y CSS 2008-05-14 02:00:00 Me hablan en muchos sitios de HTML, de CSS... y no tengo ni pajolera de a que se refieren. Como mucho llego a copiar y pegar y... ¡a veces me funciona!"Si estás en esa situación, bienvenido a esta clase nivel BPT para intentar aclararte que es cada cosa, para qué sirve y como distinguirlas.En Blogger
, básicamente encontrarás dos tipos de código: HTML y CSS. Ambos son "lenguajes" que vuestro
BPT. Cómo modificar mi código. 2008-05-16 12:00:00 Muchos trucos por allí, plantillas nuevas por allá, un widget que me viene bien pero... ¿cómo narices coloco en mi blog todo ese código que encuentro y que me gustaría instalar?Normalmente, las páginas de ayuda para Blogger como ésta y otras que podeis encontrar en la barra lateral, indican exactamente qué es lo que hay que hacer:"Localiza la parte del código donde está la expresión X.
Recommend Site To A Friend
