La Trucoteca de Blogs - Ayuda para Blogger

Permitir mostrar todas las entradas

2010-03-06T19:29:00.007+01:00

Con una sencilla dirección podremos ofrecer a los visitantes la opción de ver todas las entradas de nuestro blog.

Lo único que debemos hacer es añadir el siguiente código en un Elemento HTML de tu blog:

<a href="http://AQUÍ-LA-DIRECCIÓN-DE-TU-BLOG.blogspot.com/search/label/?max-results=999">AQUÍ-EL-TÍTULO-DESEADO</a>

Si queremos complicarlo un poco, y agregar una imagen en lugar de una palabra, colocaremos lo siguiente:

<a href="http://AQUÍ-LA-DIRECCIÓN-DE-TU-BLOG.blogspot.com/search/label/?max-results=999"><img title="TÍTULO-DE-LA-IMAGEN" src="http://lh4.ggpht.com/_ZLu0qni2Ay8/S5KdjhCLCNI/AAAAAAAAAN4/c68ym88urkE/Todaslasentradas.png"/></a>

Esperamos que os sirva :)

Poner una Lista de enlaces - Blogroll en tu blog

2010-03-05T17:24:00.002+01:00

A través del gadget que nos ofrece Blogger podemos colocar fácilmente una lista de enlaces donde agregar los blogs que nos gusten o interesen de una manera muy sencilla y rápida.

Nos dirigimos a Diseño>Elementos de la página y añadimos un nuevo gadget:

Elegimos Lista de enlaces y nos saldrá lo siguiente:

Por último, rellenamos lo espacios con la Url de la página, el Nombre de la Página o Título y agregamos un título al gadget, como "Lista de enlaces". Esta operación se puede realizar tantas veces como se quiera pinchando en "Añadir enlace".
Además, puedes elegir un número determinado de sitios web a mostrar si lo deseas.

Transformar imagenes PNG a ICO y viceversa

2010-02-26T17:55:00.003+01:00

Con esta página podrás convertir una imagen cualquiera en formato .PNG a una .ICO o viceversa.
Puede ser de gran utilidad cuando encuentres una imagen .ico y la quieras mover a un propio alojamiento. Como este formato no es aceptado en la mayoría de servidores, solo tienes que cambiarla a una imagen .PNG y ya podrás subirla perfectamente.

Se trata de Convertico.com

Los pasos a seguir son los siguientes:

1. Introducimos la Url de la imagen o examinamos directamente desde nuestro equipo. Si se trata de una imagen en formato .ICO, la página nos la convertirá automáticamente en .PNG; por el contrario, si es .PNG, se transformará en .ICO
Es recomendable que pinches en Examinar, ya que no se puede agregando la Url.

2. Una vez en el cuadro de examinar, colocas la Url de tu imagen, o bien la coges de una carpeta de tu Equipo.

3. Después pinchamos en Abrir y a continuación en "Convert".

Luego debemos mover la imagen hasta la barra de direcciones, obtener la nueva Url, y, si lo deseas (recomendable), subirla a un alojamiento propio.

Y ya dispondrás del archivo en el formato que quieres, de una manera fácil y eficaz.

Novedades/noticias en el blog - Febrero

2010-02-17T17:06:00.002+01:00

1. Navegador web vencedor de la encuesta.
Hace unos días terminó la encuesta en la que os preguntabamos que navegador web utilizabais, con la opción de escoger más de una alternativa. Hemos de decir que la encuesta ha tenido una notable acogida (80 votos) :)
El resultado final ha sido el siguiente:

1. Mozilla Firefox, 51 votos (63%)
2. Google Chrome, 19 votos (23%)
3. Internet Explorer, 17 votos (21%)
4. Safari, Opera y, sorprendentemente, Konqueror, 2 votos cada uno, (6% en total)
Además, la opción "Otro..." concluyó con 3 votos.

2. La Trucoteca de Blogs alcanza los 100 seguidores.
Este hecho se produjo ayer, es decir, el día 16 de Febrero de 2010.
Queríamos daros una vez más las gracias a todos vosotros, y más en especial, a los visitantes que se han unido a la lista de seguidores de este humilde blog, pues, en realidad, sois los que haceis posible su desarrollo.

¡Muchísimas gracias!

3. Magníficos Iconos Grunge de Redes Sociales, realizados por Nikola Lazarevic, de WebExpedition18.

Los iconos, según nuestra opinión, son de una calidad excelente.
Se trata de un pack con los logotipos de las redes sociales más famosas de Internet, como Facebook, Twitter, etc.
Esta colección, que ya fue realizada con otras páginas hace un tiempo, ha sido completada estos días con iconos de FeedBurner, Rss, etc, debido a la petición de algunas personas (incluidas nosotros).
Encuentra más información, así como su descarga en la entrada del autor, Nikola Lazarevic.
También puedes descargarte el pack pinchando aquí.

¡Un saludo!

Botón de visitantes en línea

2010-02-15T20:40:00.000+01:00

Gracias a esta sencilla web podrás colocar en tu página o blog un sencillo botón para informar de los visitantes "online" presentes en ella.
Nos dirigimos a la página web Opromo.com, y allí, al apartado "Visitas Online".
Los pasos a seguir son muy sencillos:
1. Introducimos nuestra URL, (Ej.: www.latrucotecadeblogs.com)

2. Realizamos unos pequeños ajustes (Fuente, Color, Tamaño):

3. Escogemos el logotipo o símbolo (puede ser un ordenador, un corazón o nada)

4. Y por último, seleccionamos la frase que deseemos que salga junto al símbolo (están en portugués, pero son perfectamente entendibles):

Tras esto, le damos a "Visualizar Abaixo", donde nos saldrá una vista previa del contador de usuarios, y después, copiamos y pegamos el código que nos dan más abajo:

También hay otras páginas como Whos.amung.us , StatCounter, etc.
Nota: Estas indicaciones/contadores de usuarios online son casi siempre bastante imprecisas, por lo que recomendamos tomárselo únicamente como una orientación.

Descripción de tu blog en Google

2010-02-13T21:19:00.004+01:00

Este recurso es muy simple y funciona instantáneamente en las búsquedas de Google, Yahoo, etc.
Consiste en hacer aparecer una descripción, así como unas palabras clave en los buscadores, para mejorar nuestro posicionamiento e indexación, e informar al posible visitante sobre el contenido y la orientación de nuestro blog.

Para ello entramos en Plantilla>Edición de HTML y buscamos el siguiente código:

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

Y añadimos debajo el siguiente bloque:

<!-- Metatags -->
<b:if cond='data:blog.pageType == "index"'>
<meta content='PALABRAS-CLAVE-SEPARADAS-ENTRE-COMAS' name='keywords'/>
<meta content='DESCRIPCIÓN-DEL-CONTENIDO-DEL-BLOG' name='description'/>
</b:if>

Ahora debes cambiar los códigos en color por lo correspondiente, y ya dispondrás de una mejor cataloguización en los buscadores más importantes.
¡Un saludo!

Visto en Blog and Web

Cambio de cursor sobre una imagen o cualquier otro elemento

2010-02-06T18:12:00.011+01:00

Con este sencillo truco conseguirás que al poner sobre una imagen el cursor, éste cambie su aspecto.
Ejemplo:

Si bien el códido básico para conseguir la aparición de una imagen es éste:

<img src="AQUÍ-LA-URL-DE-LA-IMAGEN">

El código que tendrías que añadir para lograr el cambio del puntero sería el siguiente:

style="cursor:AQUÍ-LA-PROPIEDAD;"

1. Que añadido al código de la imagen quedaría así:

<img style="cursor:AQUÍ-LA-PROPIEDAD;" src="AQUÍ-LA-URL-DE-LA-IMAGEN">

AQUÍ-LA-PROPIEDAD debe ser cambiada por: url(url-del-cursor) en caso de que quieras que el cursor sea uno alojado en internet como por ejemplo: http://cuw.iespana.es/archivos/bob08.cur, que tendría que sustituir a url-del-cursor, o bien por uno de los siguientes términos, que pertenecen a punteros predeterminados del sistema:

default
pointer
move
crosshair
nw-resize
ne-resize
n-resize
e-resize
help
wait
text

2. También puedes hacerlo sobre una imagen con enlace:

<a href="URL-DEL-ENLACE"><img style="cursor:AQUÍ-LA-PROPIEDAD;" src="AQUÍ-LA-URL-DE-LA-IMAGEN"></a>

3. O sobre un simple enlace de texto:

<a style="cursor:AQUÍ-LA-PROPIEDAD;" href="URL-DEL-ENLACE">TEXTO-DEL-ENLACE</a>

En resumen, cambiar el cursor es muy fácil, y se puede hacer en cualquier elemento (imágenes, textos, pero también tablas, divs, etc.), y basta con agregarle a él el atributo style con el "parámetro" cursor y a continuación su propiedad.

Continuando con los cursores, dentro de poco explicaremos como cambiarlo en todo el blog, siguiendo un procedimiento similar...

¡Un saludo!

Visto en Hacktime

Botón de PageRank en tu blog

2010-01-30T22:18:00.003+01:00

Poner un botón de PageRank en tu blog es muy fácil, y, de hecho, hay innumerables webs que ofrecen este servicio.
Nosotros, en esta ocasión, hemos escogido una página llamada Build Reciprocal Links.
1. Dentro de esta web, nos dirigimos al apartado "Pagerank Button":

2. Una vez allí introducimos la URL de nuestra página y ponemos el código Captcha que nos presentan un poco más abajo:

3. Ahora, tras pinchar en "Get PageRank", además de haber calculado tu PageRank, te ofrecerán una larga lista con botones (más de diez) para añadir en tu sitio:

4. Simplemente copias el código generado del botón que más te guste y lo pegas en un Elemento de HTML/Javascript, o donde mejor te convenga.

Y ya podrás tener un bonito botón para conocer el Pagerank de tu blog o web.

Las propiedades "marquee" - Personalizando con CSS

2010-01-19T22:25:00.003+01:00

Este código, llamado marquee o marquesina permite crear numerosos efectos dinámicos en textos, palabras, imágenes, etc., dándoles un toque más elegante y llamativo. Hay diversidad de combinaciones y variaciones con ésta propiedad, aquí os mostramos algunas de las más importantes:

1. Texto simple en movimiento:
Para ello utilizaremos el siguiente código:

<marquee>Texto en movimiento aquí</marquee>

Ejemplo:
Texto de ejemplo

Variaciones y opciones:
A partir del código anterior, la propiedad "marquee" puede ser personalizada más a fondo:
-Se puede añadir lo siguiente (personalizaremos la dirección del movimiento del texto: "up">arriba, "down">abajo, "right">derecha, "left">izquierda):

<marquee direction="up">Texto en movimiento aquí</marquee>

Ejemplo:

Texto de ejemplo

-También podemos agregar el siguiente código (ahora, además de un movimiento de abajo a arriba, el texto "rebotará" con los límites que hayan a su alrededor):

<marquee direction="up" behavior="alternate">Texto en movimiento aquí</marquee>

Simplemente hemos personalizado un poco más el código, añadiendo "alternate" después de "behavior". Además de ésa palabra (alternate) existen otras que podemos colocar en el sitio explicado anteriormente:

Ejemplo:

Texto de ejemplo

2. Creando y diseñando una marquesina para el blog:
Tras conocer unos aspectos básicos de la propiedad marquee, podemos empezar a diseñar una marquesina más compleja, poniendo, en este caso, un color de fondo:

<marquee bgcolor=#58FA58>Texto en movimiento aquí</marquee>

Ejemplo:
Texto de ejemplo

-Podemos poner un borde:

<marquee style="border:#04B404 3px SOLID">Texto en movimiento aquí</marquee>

Ejemplo:

Texto de ejemplo

-Podemos poner un borde y un fondo:

<marquee style="border:#04B404 3px SOLID; background-color:#0080FF;">Texto en movimiento aquí</marquee>

Ejemplo:

Texto de ejemplo

-Y podemos hacer que esa marquesina, además de fondo y borde, posea la propiedad de rebotar (alternate):

<marquee behavior="alternate" style="border:#04B404 3px SOLID; background-color:#0080FF;">Texto en movimiento aquí</marquee>

Ejemplo:

Texto de ejemplo

-Por último, podemos "unir" varios códigos: la dirección de desplazamiento del texto, el color del texto, el "rebote" (alternate), un borde y un color de fondo:

<font-color="#FFFFFF"><marquee direction="up" behavior="alternate" style="border:#04B404 3px SOLID; background-color:#0080FF;">Texto en movimiento aquí</marquee>

Ejemplo:

Texto de ejemplo

La verdad es que se pueden hacer infinidad de cosas con este simple código, que siempre puede ser de mucha utilidad.

¡¡Saludos!!

Novedades/noticias en el blog - (Enero)

2010-01-06T19:09:00.004+01:00

1. Red Social vencedora de la encuesta.
Ayer terminó la encuesta en la que os preguntábamos cuál era vuestra red social preferida. El resultado final ha sido el siguiente:

1. Twitter, 16 votos (40%).
2. Facebook, 13 votos (32%).
3. Hi5, 4 votos (10%)
Además, cuatro votos fueron para la opción "Otros".
Avance: en pocos días dará comienzo una nueva encuesta.

2. Cambio en la forma de comentar.
Tras los numerosos problemas que habían surgido con el formulario de comentarios de Blogger incrustado después de las entradas, decidimos cambiar la forma de comentar en el blog, configurando una efectiva ventana emergente.
Ahora, para dejar un comentario, sólo debes pinchar en "Publicar un comentario en la entrada". Tras esto se abrirá una pequeña ventana, donde tendrás acceso a la caja que permite escribir el mensaje.

3. Diseño gratuito de menús.
Si estás buscando un menú de navegación para tu blog, y no sabes cómo hacerlo, ahora puedes solicitarnoslo, y nosotros te lo diseñaremos a tu medida.
No te cortes y anímate, es ¡totalmente gratis!
Desde el día 6 hasta el 12 de Enero puedes pedir el tuyo, y, encantados, nos encargaremos de personalizartelo a tu gusto.
Solo tienes que dejar un comentario con algunos datos sobre el menú que querrías, como el color del fondo, el tipo de borde, los efectos que te gustarían, etc.
Tras esto, nosotros nos pondremos en contacto contigo para charlar más tranquilamente del tema, y aclarar todas las posibles dudas.
Puedes ver algunos de los menús diseñados por La Trucoteca de Blogs en nuestro blog de menús.

4. Descubre el nuevo PhotoShop CS5.
En este vídeo podrás observar algunas de las novedosas características y opciones de personalización de imágenes del nuevo Adobe Photoshop CS5, como, por ejemplo, la que permite una restauración prácticamente perfecta de la imagen (reemplazando los objetos no deseados de la imagen por un relleno practicamente exacto al del entorno). Este efecto se logra utilizando la herramienta Content-Aware Fill, y es sólo una de las novedades que han implementado en el programa.

Más información en Genbeta y en Blog and Web.

5. Inserta un gadget de últimas entradas fácilmente con Splush.

Esta página te permite crear de manera sencilla una lista muy elegante de últimas entradas, últimos comentarios o incluso de las entradas más populares de tu blog, (para esto último deberías configurar una url feed con PostRank, por ejemplo).
El servicio es muy interesante, ya que únicamente debemos registrarnos y configurar, a continuación, el gadget que deseamos. ¡Incluso podemos ganar un dinerillo extra con la inclusión de anuncios en el widget!

Aquí puedes ver el widget más detalladamente:

Enlace: BlogSplush
Puedes ver más información en esta entrada de Oloblogger :)

¡Saludos!

Menú vertical simple para tu blog

2010-01-04T16:50:00.009+01:00

Hoy os mostramos un menú vertical que puedes emplear y aplicar en tu blog muy fácilmente.

Para verlo en funcionamiento puedes visitar esta página.
Recuerda que también puedes ver otro menú, en este caso horizontal, aquí.

Para agregarlo sólo tienes que dirigirte a Diseño>Elementos de la página.

Añade un nuevo Elemento HTML, preferiblemente en la sidebar, y pega el siguiente código:

<div id="menuvertical-trucoteca">
<ul id="menuv">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Enlazar</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
</div>
<style type="text/css">
#menuv {
        float:left;
}
#menuv li {
        background: url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini2.png);
    margin:6px;
    padding:3px;
    border:1px solid #08088A;
        width: 150px;
        text-align:center;
        font-family: Segoe UI, Arial;
        font-size: 14px;
}
#menuv li:hover {
        background: url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini2.png);
        border:1px solid #08088A;
        filter:alpha(opacity=80);
        -moz-opacity: 0.8;
        opacity: 0.8;
        -khtml-opacity: 0.8;
}
#menuv a:hover {
        color: #ffffff;
        text-decoration: none;
        font-weight: bold;
}
#menuv a {
       color: #ffffff;
</style>

Si quieres añadir un nuevo enlace en el menú, solo tienes que copiar y pegar (tantas veces como necesites) la línea que esta en negrita. Quedaría algo asi:

.................

<li><a href="#">Enlazar</a></li>
<li><a href="#">Contacto</a></li>

<li><a href="#">El título que quieras</a></li>

.................

Ahora solo tienes que personalizar los enlaces y los títulos; para ello cambia el # por la dirección a la que enlace, y los títulos, Inicio - Acerca de - Enlazar - Contacto - etc., por las palabras que prefieras. Guarda cambios, y ya lo tendrás todo listo.

Y por cierto, si quieres un menú realizado a tu medida, puedes pedirnoslo en los próximos días (hasta el 8 de Enero) y te lo diseñaremos... ¡totalmente gratis!
No dejes escapar esta oportunidad, ¡anímate!

Menú horizontal simple para tu blog

2010-01-02T21:14:00.008+01:00

Aquí os presentamos un menú muy sencillo y útil que puedes poner en tu blog fácilmente.

Puedes ver un ejemplo del menú en funcionamiento aquí.

Sólamente añadimos un nuevo Elemento HTML ↑ encima de la zona de entradas (preferiblemente) y en él ponemos el siguiente código:

<div id="menuarriba">
    <ul id="navi1">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Enlazar</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
</div>

<style type="text/css">
#navi1 {
    margin:0px;
    padding:0px;

}
#navi1 li {
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
        color:#000000;
        margin:5px;
      padding:3px;
        width: 100px;
        border:1px solid black;
        text-align:center;
        list-style:none;
        font-family: Segoe UI, Arial;
        font-size: 14px;
       float:left;
    }
#navi1 li:hover {
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
        color:#000000;
        border:1px solid black;
}
#navi1 li a:hover {
        color: #ffffff;
        font-style: Italic;
        text-decoration: none;
}
#navi1 a {
        color: #ffffff;
        font-weight: bold;
}
</style>

Tras Guardar, debes modificar la siguiente parte:

    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Enlazar</a></li>
    <li><a href="#">Contacto</a></li>

Las palabras en rojo, por el título que desees que salga, y el asterisco, por la URL de la página o sección a la que quieres enlazar.
También puedes agregar una línea más después de los que ya hay presentes, es decir, un botón más en el menú:

<li><a href="#">Otro título más</a></li>

Y así ya podrás disponer de un sencillo pero atractivo menú para organizar más a fondo tu blog.

Notas:

· En Mozilla Firefox, Safari y Google Chrome, el menú tiene la propiedad de estar redondeado, pero en Internet Explorer, desafortunadamente no, aunque no queda menos elegante.
· Si algún título demasiado largo no encaja bien, prueba a eliminar width: 100px; , o a poner un numero mayor.
· En caso de problemas, puedes dejarnos un comentario y te responderemos lo antes posible :)

Menú creado por La Trucoteca de Blogs

Anuncia tu página en La Trucoteca de Blogs

2009-12-31T19:58:00.004+01:00

A partir de ahora puedes promocionar tu página en La Trucoteca de Blogs a cambio de un módico y económico precio.

Las tarifas son las siguientes:

Zonas:

Leer atentamente:

Más información:
- Los banners deben de ser del tamaño indicado, y en el caso del banner gigante, la imagen no puede sobrepasar los 560*80 px.
- Los banners no pueden contener elementos animados o en movimiento (como en el caso de GIFS o Imágenes en Flash),
- Los banners deben estar en Formato PNG, JPG, JPEG o GIF Estático
- No se aceptarán banners que enlacen a sitios con contenido pornográfico, violento, ilegal, racista, relacionado con los casinos/ zonas de apuestas, o en mala calidad o abandono.
- El equipo de La Trucoteca de Blogs se reserva el derecho de eliminar/ocultar el banner anunciante, avisándolo previamente, si alguna de estas normas es incumplida o modificada.
- Los precios están sujetos a posibles modificaciones y usted puede ofrecer una cantidad/oferta negociable en el caso del Banner Gigante Superior.

Pagos:
- Los pagos deben realizarse única y exclusivamente por Paypal (una manera muy fácil y rápida).
- Si ud. está interesado, se le proporcionará más información (cuenta Paypal de ingreso monetario, especificaciones, etc...) al contactar con el equipo de La Trucoteca de Blogs, enviando un e-mail a nuestro correo, manualmente o mediante el formulario de contacto, con el Asunto (título del mensaje) de "Publicidad en La Trucoteca de Blogs".

Correo electrónico: latrucoteca(arroba)gmail.com
Ir al formulario de contacto.

- Una vez efectuado el pago, se procederá, en un máximo de 24/48h., a la incrustacción del banner deseado.
- Pasado este tiempo (24/48h.), no se podrá solicitar la devolución del dinero.

Contacto.

Política de privacidad.

Gadget visible unicamente en la página principal

2009-12-31T13:42:00.000+01:00

Añadiendo unos códigos en la Edición de HTML de nuestra plantilla lograremos hacer que un gadget sea visible unicamente en la página principal de nuestro blog.
Este truco es muy útil, ya que cuando se entra en algun post, el gadget elegido no se mostrará, dando una mayor sensación de limpieza y frescura del blog al visitante.

Para aplicarlo en tu blog, solamente debes dirigirte a Diseño>Edición de HTML>Expandir plantilla de artilugios , localizas el gadget (buscando la "Id") y añades los códigos en azul:

<b:widget id='Aquí te aparecerá la id del gadget' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

Tras guardar cambios ya podrás mantener la interfaz del blog en un estado mucho más ligero.

¡Saludos!

- Visto en Ciudad Blogger

Crea y personaliza un Tooltip (Title) para los enlaces [1]

2009-12-27T22:09:00.007+01:00

Si quieres que al poner el cursor sobre un enlace, aparezca un pequeño Título o Title encima de este (que no es más que un cuadrito pequeño con una pequeña descripción) , este truco te permitirá crear y decorar los mismos fácilmente.
Si aún no sabes lo que es un Tooltip, coloca el cursor encima del siguiente texto:

Para agregarlo sólo debes seguir los siguientes pasos:

1. Nos dirigimos a Diseño>Edición de HTML y Expandimos Artilugios

2. Añadimos antes de ]]></b:skin> el siguiente código:

a.tooltip{
position: relative;
z-index: 24;
color: #0080FF;
text-decoration: none;
}

a.tooltip:hover{
z-index: 24;
color: #002AFE;
text-decoration: none;
}

a.tooltip:visited{
text-decoration: none;
color:#08088A;
}

a.tooltip:active{
z-index: 24;
color: #0000FF;
text-decoration: none;
}

a.tooltip span{ display: none;
}

a.tooltip:hover span{
border: 2px solid #088A08;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: block;
position: absolute;
top: 2.5em;
left: 3em;
width: 10em;
background-color: #74DF00;
color: #0B0B0B;
font-size: 8pt;
font-family: Comic Sans MS;
text-align: left;
padding-left: 2px ;
padding-right: 2px;
}

Por cierto, este código es también el empleado en la plantilla de La Trucoteca de Blogs para los Tooltips, y puedes decorarlo a tu gusto. Para ello te indicaremos algunas partes del Css que puedes modificar:

color: #0080FF; -> Color del enlace.

color: #002AFE; ->Color del enlace al pasar el cursor por encima.

color: #08088A; ->Color del enlace mientras se hace clic en él.

border: 2px solid #088A08; ->2px (grosor del borde del tooltip), #088A08 (color del borde del tooltip), solid (estilo del borde del tootltip), que también puede ser (y si tu quieres):

none - Objeto sin borde
hidden - Borde del objeto oculto
dotted - Borde punteado · · ·
dashed - Borde discontinuo - - -
solid - Borde continuo (este es el borde que utilizaremos)
double - Borde doble
groove - Borde con sombra oscura
ridge - Borde con sombra clara
inset - Borde 3D hacia afuera
outset - Borde 3D hacia adentro

background-color: #74DF00; ->color de relleno/fondo del tooltip.
color: #0B0B0B; ->color de la letra del tooltip.
font-size: 8pt; ->tamaño de la letra del tooltip.
font-family: Comic Sans MS; ->Fuente (puede ser Segoe UI, Trebuchet MS, etc).
text-align: left; -> Alineación del texto del tooltip.

3. Tras personalizarlo a tu medida, GUARDAMOS CAMBIOS.

4. Ahora, cada vez que queramos usar los tooltips en un enlace deberemos emplear este código:

<a href="URL-DE-LA-PAGINA" class="tooltip">TITULO-DEL-ENLACE<span>CONTENIDO_TEXTO-DEL-TOOLTIP</span></a>

Y sustituye, URL-DE-LA-PAGINA, por la dirección de la página a la que quieres enlazar, como, por ejemplo," http://blogger.com".
TITULODEL-ENLACE, por el texto que aparecerá antes de poner el cursor, como, por ejemplo, "Blogger".
CONTENIDO_TEXTO-DEL-TOOLTIP, por el texto que saldrá al poner el cursor sobre el enlace, es decir, lo que saldrá dentro del Tooltip, como, por ejemplo, "en esta página creé mi blog".

¡Y ya podrás disfrutar de un bonito y decorado título para tus enlaces!

¡Feliz Navidad a todos!

2009-12-26T14:11:00.001+01:00

Desde el equipo de La Trucoteca de Blogs (Javier y Germán), os deseamos una muy feliz Navidad y que el año nuevo os traiga mucha suerte, salud, amor, alegría y... regalos =)

¡Feliz Navidad y próspero Año Nuevo!

Evita que te copien el contenido de tu blog

2009-12-25T12:19:00.019+01:00

Uno de los grandes problemas existentes en la actualidad del mundo de los blogs es el "Copypast". Al igual que su traducción al español (copiar y pegar), esta "odiosa técnica" realizada por los bloggeros más deshonestos ha fastidiado seguramente más de una vez a alguien (experiencia propia...).
Pues bien, hoy vamos a exponer un sencillo truco que vimos hace un tiempo en Ciudad Blogger, que, deshabilitando la selección de texto, puede impedir en cierto modo este tipo de aprovechamiento.

Nos dirigimos a Diseño> Edición de HTML

Ahora, antes de </head> pegamos el siguiente código:

<script language="JavaScript1.2">

function disabletext(e){
return false
}

function reEnable(){
return true
}
//if the browser is IE4+
document.onselectstart=new Function ("return false")

//if the browser is NS6
if (window.sidebar){
document.onmousedown=disabletext
document.onclick=reEnable
}
</script>

Tras esto solo tenemos que pinchar en GUARDAR CAMBIOS y ya tendremos una pequeña protección en el blog.

Problemilla: En Mozilla Firefox, este script impide que el cursor pueda pinchar y seleccionar en el buscador de Google.

ATENCIÓN: Este truco no impide totalmente que se pueda copiar y usar el texto. Es solo una utilidad más que puedes poner en tu blog si quieres una "pequeña" protección.

¡¡Saludos!!

● También puedes ver... Evitar que te copien una imagen

● Visto en Ciudad Blogger

Iconos RSS y efecto de nieve para decorar tu blog esta navidad

2009-12-22T13:48:00.015+01:00

Bueno, como ya estamos en plena Navidad, que mejor que decorar nuestro blog de esta festividad con unos interesantes iconos RSS navideños, al igual que hicimos con Halloween :)

● Este pack de Christmas RSS contiene 12 iconos muy bonitos, fantásticos para el blog.

La entrada original es ésta, donde podréis acceder a descargarlos :)

● Otros atractivos y brillantes iconos RSS en forma de bolas de navidad: Christmas Feed Icons

Entrada original en Webfruits.it y descarga.

También pueden descargarse mediante IconsPedia en esta página

■ Nieve flotante en el blog

Cómo habrás visto, desde hace muy poco hemos implementado un script en la plantilla de La Trucoteca de Blogs para que el blog esté decorado (¡qué mejor fecha para hacerlo!) con una bonita cortina de copos de nieve.

El Script, que hemos descubierto en El Escaparate de Rosa y original a su vez de Schillmania es muy fácil de colocar.

♦ Nos dirigimos a Diseño>Edición de HTML.

Ahora, antes de </head>, tan solo hay que insertar el siguiente código:

<script type="text/javascript">
//<![CDATA[
/*
DHTML Snowstorm! OO-style Jascript-based Snow effect
----------------------------------------------------
Version 1.4.20091115 (Previous rev: v1.3.20081215)
Code by Scott Schiller - http://schillmania.com
----------------------------------------------------
Initializes after body onload() by default (via addEventHandler() call at bottom.
To customize properties, edit below or override configuration after this script
has run (but before body.onload), eg. snowStorm.snowStick = false;
*/
var snowStorm = null;
function SnowStorm() {

// --- PROPERTIES ---

this.flakesMax = 150; // Limit total amount of snow made (falling + sticking)

this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use)

this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
this.targetElement = null; // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
this.followMouse = true; // Snow will change movement with the user's mouse
this.snowColor = '#fff'; // Don't eat (or use?) yellow snow.
this.snowCharacter = '•'; // • = bullet, · is square on some systems etc.
this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect.
this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling
this.usePositionFixed = false; // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported

// --- less-used bits ---
this.flakeLeftOffset = 0; // amount to subtract from edges of container
this.flakeRightOffset = 0; // amount to subtract from edges of container
this.flakeWidth = 8; // max pixel width for snow element
this.flakeHeight = 8; // max pixel height for snow element
this.vMaxX = 5; // Maximum X velocity range for snow

this.vMaxY = 4; // Maximum Y velocity range

this.zIndex = 0; // CSS stacking order applied to each snowflake

// --- End of user section ---

// jslint global declarations

/*global window, document, navigator, clearInterval, setInterval */

var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {

return o.addEventListener(evtName,evtHandler,false);

}:function(o,evtName,evtHandler) {

return o.attachEvent('on'+evtName,evtHandler);

});

var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {

return o.removeEventListener(evtName,evtHandler,false);

}:function(o,evtName,evtHandler) {

return o.detachEvent('on'+evtName,evtHandler);

});

function rnd(n,min) {

if (isNaN(min)) {

min = 0;

}

return (Math.random()*n)+min;

}

function plusMinus(n) {

return (parseInt(rnd(2),10)==1?n*-1:n);

}

var s = this;

var storm = this;

this.timers = [];

this.flakes = [];

this.disabled = false;

this.active = false;

var isIE = navigator.userAgent.match(/msie/i);

var isIE6 = navigator.userAgent.match(/msie 6/i);

var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));

var isWin9X = navigator.appVersion.match(/windows 98/i);

var isiPhone = navigator.userAgent.match(/iphone/i);

var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');

var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);

var screenX = null;

var screenX2 = null;

var screenY = null;

var scrollY = null;

var vRndX = null;

var vRndY = null;

var windOffset = 1;

var windMultiplier = 2;

var flakeTypes = 6;

var fixedForEverything = false;

var opacitySupported = (function(){

try {

document.createElement('div').style.opacity = '0.5';

} catch (e) {

return false;

}

return true;

})();

var docFrag = document.createDocumentFragment();

if (s.flakeLeftOffset === null) {

s.flakeLeftOffset = 0;

}

if (s.flakeRightOffset === null) {

s.flakeRightOffset = 0;

}

this.meltFrameCount = 20;

this.meltFrames = [];

for (var i=0; i<this.meltFrameCount; i++) {

this.meltFrames.push(1-(i/this.meltFrameCount));

}

this.randomizeWind = function() {

vRndX = plusMinus(rnd(s.vMaxX,0.2));

vRndY = rnd(s.vMaxY,0.2);

if (this.flakes) {

for (var i=0; i<this.flakes.length; i++) {

if (this.flakes[i].active) {

this.flakes[i].setVelocities();

}

}

}

};

this.scrollHandler = function() {

// "attach" snowflakes to bottom of window if no absolute bottom value was given

scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));

if (isNaN(scrollY)) {

scrollY = 0; // Netscape 6 scroll fix

}

if (!fixedForEverything && !s.flakeBottom && s.flakes) {

for (var i=s.flakes.length; i--;) {

if (s.flakes[i].active === 0) {

s.flakes[i].stick();

}

}

}

};

this.resizeHandler = function() {

if (window.innerWidth || window.innerHeight) {

screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;

screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);

} else {

screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;

screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);

}

screenX2 = parseInt(screenX/2,10);

};

this.resizeHandlerAlt = function() {

screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;

screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;

screenX2 = parseInt(screenX/2,10);

};

this.freeze = function() {

// pause animation

if (!s.disabled) {

s.disabled = 1;

} else {

return false;

}

for (var i=s.timers.length; i--;) {

clearInterval(s.timers[i]);

}

};

this.resume = function() {

if (s.disabled) {

s.disabled = 0;

} else {

return false;

}

s.timerInit();

};

this.toggleSnow = function() {

if (!s.flakes.length) {

// first run

s.start();

} else {

s.active = !s.active;

if (s.active) {

s.show();

s.resume();

} else {

s.stop();

s.freeze();

}

}

};

this.stop = function() {

this.freeze();

for (var i=this.flakes.length; i--;) {

this.flakes[i].o.style.display = 'none';

}

removeEvent(window,'scroll',s.scrollHandler);

removeEvent(window,'resize',s.resizeHandler);

if (!isOldIE) {

removeEvent(window,'blur',s.freeze);

removeEvent(window,'focus',s.resume);

}

};

this.show = function() {

for (var i=this.flakes.length; i--;) {

this.flakes[i].o.style.display = 'block';

}

};

this.SnowFlake = function(parent,type,x,y) {

var s = this;

var storm = parent;

this.type = type;

this.x = x||parseInt(rnd(screenX-20),10);

this.y = (!isNaN(y)?y:-rnd(screenY)-12);

this.vX = null;

this.vY = null;

this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)

this.vAmp = this.vAmpTypes[this.type];

this.melting = false;

this.meltFrameCount = storm.meltFrameCount;

this.meltFrames = storm.meltFrames;

this.meltFrame = 0;

this.twinkleFrame = 0;

this.active = 1;

this.fontSize = (10+(this.type/5)*10);

this.o = document.createElement('div');

this.o.innerHTML = storm.snowCharacter;

this.o.style.color = storm.snowColor;

this.o.style.position = (fixedForEverything?'fixed':'absolute');

this.o.style.width = storm.flakeWidth+'px';

this.o.style.height = storm.flakeHeight+'px';

this.o.style.fontFamily = 'arial,verdana';

this.o.style.overflow = 'hidden';

this.o.style.fontWeight = 'normal';

this.o.style.zIndex = storm.zIndex;

docFrag.appendChild(this.o);

this.refresh = function() {

if (isNaN(s.x) || isNaN(s.y)) {

// safety check

return false;

}

s.o.style.left = s.x+'px';

s.o.style.top = s.y+'px';

};

this.stick = function() {

if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {

s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';

} else if (storm.flakeBottom) {

s.o.style.top = storm.flakeBottom+'px';

} else {

s.o.style.display = 'none';

s.o.style.top = 'auto';

s.o.style.bottom = '0px';

s.o.style.position = 'fixed';

s.o.style.display = 'block';

}

};

this.vCheck = function() {

if (s.vX>=0 && s.vX<0.2) {

s.vX = 0.2;

} else if (s.vX<0 && s.vX>-0.2) {

s.vX = -0.2;

}

if (s.vY>=0 && s.vY<0.2) {

s.vY = 0.2;

}

};

this.move = function() {

var vX = s.vX*windOffset;

s.x += vX;

s.y += (s.vY*s.vAmp);

if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check

s.x = 0;

} else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {

s.x = screenX-storm.flakeWidth-1; // flakeWidth;

}

s.refresh();

var yDiff = screenY+scrollY-s.y;

if (yDiff<storm.flakeHeight) {

s.active = 0;

if (storm.snowStick) {

s.stick();

} else {

s.recycle();

}

} else {

if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {

// ~1/1000 chance of melting mid-air, with each frame

s.melting = true;

s.melt();

// only incrementally melt one frame

// s.melting = false;

}

if (storm.useTwinkleEffect) {

if (!s.twinkleFrame) {

if (Math.random()>0.9) {

s.twinkleFrame = parseInt(Math.random()*20,10);

}

} else {

s.twinkleFrame--;

s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
}
}
}
};

this.animate = function() {

// main animation loop

// move, check status, die etc.

s.move();

};

this.setVelocities = function() {

s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);

s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);

};

this.setOpacity = function(o,opacity) {

if (!opacitySupported) {

return false;

}

o.style.opacity = opacity;

};

this.melt = function() {

if (!storm.useMeltEffect || !s.melting) {

s.recycle();

} else {

if (s.meltFrame < s.meltFrameCount) {

s.meltFrame++;

s.setOpacity(s.o,s.meltFrames[s.meltFrame]);

s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';

s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';

} else {

s.recycle();

}

}

};

this.recycle = function() {

s.o.style.display = 'none';

s.o.style.position = (fixedForEverything?'fixed':'absolute');

s.o.style.bottom = 'auto';

s.setVelocities();

s.vCheck();

s.meltFrame = 0;

s.melting = false;

s.setOpacity(s.o,1);

s.o.style.padding = '0px';

s.o.style.margin = '0px';

s.o.style.fontSize = s.fontSize+'px';

s.o.style.lineHeight = (storm.flakeHeight+2)+'px';

s.o.style.textAlign = 'center';

s.o.style.verticalAlign = 'baseline';

s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);

s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;

s.refresh();

s.o.style.display = 'block';

s.active = 1;

};

this.recycle(); // set up x/y coords etc.

this.refresh();

};

this.snow = function() {

var active = 0;

var used = 0;

var waiting = 0;

var flake = null;

for (var i=s.flakes.length; i--;) {

if (s.flakes[i].active == 1) {

s.flakes[i].move();

active++;

} else if (s.flakes[i].active === 0) {

used++;

} else {

waiting++;

}

if (s.flakes[i].melting) {

s.flakes[i].melt();

}

}

if (active<s.flakesMaxActive) {

flake = s.flakes[parseInt(rnd(s.flakes.length),10)];

if (flake.active === 0) {

flake.melting = true;

}

}

};

this.mouseMove = function(e) {

if (!s.followMouse) {

return true;

}

var x = parseInt(e.clientX,10);

if (x<screenX2) {

windOffset = -windMultiplier+(x/screenX2*windMultiplier);

} else {

x -= screenX2;

windOffset = (x/screenX2)*windMultiplier;

}

};

this.createSnow = function(limit,allowInactive) {

for (var i=0; i<limit; i++) {

s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));

if (allowInactive || i>s.flakesMaxActive) {

s.flakes[s.flakes.length-1].active = -1;

}

}

storm.targetElement.appendChild(docFrag);

};

this.timerInit = function() {

s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);

};

this.init = function() {

s.randomizeWind();

s.createSnow(s.flakesMax); // create initial batch

addEvent(window,'resize',s.resizeHandler);

addEvent(window,'scroll',s.scrollHandler);

if (!isOldIE) {

addEvent(window,'blur',s.freeze);

addEvent(window,'focus',s.resume);

}

s.resizeHandler();

s.scrollHandler();

if (s.followMouse) {

addEvent(document,'mousemove',s.mouseMove);

}

s.animationInterval = Math.max(20,s.animationInterval);

s.timerInit();

};

var didInit = false;

this.start = function(bFromOnLoad) {

if (!didInit) {

didInit = true;

} else if (bFromOnLoad) {

// already loaded and running

return true;

}

if (typeof s.targetElement == 'string') {

var targetID = s.targetElement;

s.targetElement = document.getElementById(targetID);

if (!s.targetElement) {

throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');

}

}

if (!s.targetElement) {

s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);

}

if (s.targetElement != document.documentElement && s.targetElement != document.body) {

s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions

}

s.resizeHandler(); // get bounding box elements

s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported

fixedForEverything = s.usePositionFixed;

if (screenX && screenY && !s.disabled) {

s.init();

s.active = true;

}

};

function doStart() {

s.start(true);

}
if (document.addEventListener) {
// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
document.addEventListener('DOMContentLoaded',doStart,false);

window.addEventListener('load',doStart,false);
} else {
addEvent(window,'load',doStart);
}
}
snowStorm = new SnowStorm();
//]]>
</script>

Y si todo ha salido bien, GUARDAMOS CAMBIOS, y tras esto, ya podemos disfrutar de una magnífica decoración navideña ;)

Muchos saludos a todos y ¡Feliz Navidad!

Novedades/Noticias en el blog

2009-12-21T15:23:00.001+01:00

Hoy os presentamos esta entrada para informaros sobre algunas novedades y acontecimientos que han ocurrido y sucederán en este blog.

1. Alojamiento de imágenes vencedor de la encuesta.
Tras dos semanas de votaciones, la encuesta en la que os preguntábamos qué servidor de imágenes utilizabais ha concluido con Picasa como opción más elegida, con un total de 11 votos, (36%).
En segunda posición, con 8 votos, ha quedado ImageShack, (26%), y con tres votos cada uno, Flickr y TinyPic.
Avance: En pocos días dará comienzo una nueva encuesta.

2. La Trucoteca de Blogs elimina dentro de sus contenidos el Diseño Web/Gráfico.
El motivo consiste en que esta temática se desarrollará en un nuevo blog que está en estos momentos en construcción.
Pueden ver los contenidos más detalladamente en la siguiente entrada.

3. Sorteo de 5 invitaciones para Google Wave.
Si aún no dispones de una cuenta valida para entrar en Google Wave (una herramienta que se basa en la colaboración/participación de los usuarios de forma online, donde puedes acceder a diversas redes sociales, correo electrónico y aplicaciones conocidas en Internet), solo necesitas dejar un comentario con tu dirección de correo electrónico y nosotros te responderemos rápidamente.

4. Mensajes de crítica en el Chat/CBOX de La Trucoteca de Blogs.
Desafortunadamente, el Domingo 13 de Diciembre de este año, una persona anónima, cuyo seudónimo era "Yo", mandó alguna crítica hacia La Trucoteca de Blogs que no merece mayor mención....
A este mensaje le prosiguieron otros dos más de diferente IP al anterior, donde insultaban (quizás se desahogaban) sin ningún respeto.
Este simple hecho lo marcamos para preguntar, con qué fundamento comentaban, y, si es posible, den la cara al menos, en lugar de hablar sin ningún reparo.

8 generadores y herramientas web de gran utilidad

2009-12-12T00:05:00.004+01:00

Hoy os presentamos una recopilación de generadores que pueden ser de gran utilidad si tienes un blog/web.
Se trata de unas páginas en las que puedes crear fácilmente imágenes, menús, botones, etc.
RECUERDA: Es recomendable que alojes en un servidor propio las imágenes (solo las imágenes).

1. FlashVortex

Página gratuita especializada en la generación de banners, menús, botones, textos, relojes, etc.
Ventajas: Muy buenos efectos, la interfaz de la página es simple y cómoda, en general muy útil, gran variedad de gadgets y de opciones de configuración de los mismos.
Configuración del elemento a generar: Fácil y amplia configuración, instrucciones en inglés, se debe copiar el código para más tarde añadirlo en un Elemento HTML o en una entrada.
Desventajas: Es necesario registrarse/hacerse miembro (mediante pago) para realizar una imagen sin la molesta publicidad (hacia la página misma) que incorporan en el gadget generado. Página en inglés.

Ejemplo:

Un menú que podría quedar muy bien en las fechas en que estamos:

2. Wigflip

Pueden conocer algunos detalles de esta página en esta entrada creada anteriormente en La Trucoteca de Blogs, así como ver algunos ejemplos generados.

3. Email-Icon Generator

En esta página puedes crear tu propio logo para tu correo electrónico. Pueden encontrar más información en la siguiente entrada.

4. Image Chef

Compleja web con muchas opciones, así como herramientas para crear tu propia imagen, gadgets, botones, animaciones, etc.

Ventajas: Creación fácil y sencilla, interfaz bien organizada, accesible y cómoda, en español.

Configuración del elemento a generar: Generalemente son pocos los pasos que hay que realizar, además de estar las instrucciones en español.

Desventajas: Presencia de publicidad hacia la página ImageChef en el gadget generado.

Ejemplo:

5. Widgetbox

Otra web con un amplio contenido relacionado con los widgets: relojes, botones para compartir el blog, etc.
Contituye, para entendernos, un almacén de gadgets que puedes poner facilmente en tu bitácora, al estilo de los que Blogger pone a la disposición, pero con publicidad hacia su sitio web, además de continuos anuncios desplegables.
Configuración del elemento a generar: Al ser simplemente widgets, no pueden ser personalizados y el único paso que se tiene que seguir es el de seleccionar el deseado y copiar/pegar el código que te ofrecen pinchando sobre Get Widget. Interfaz de la página en inglés.
Desventajas: Publicidad en los widgets "un poco" abusiva, página en inglés.

6. Buttonator

Crea botones de alta calidad gratuitamente con esta sencilla página, cuyas instrucciones están en Inglés.
Ventajas: No tiene ni publicidad ni enlace hacia la web creadora. Variedad de opciones en la personalización del botón, con algunos iconos incluidos.

7. PicJoke
Una de las webs más sencillas para realizar retoques fotográficos, sin complicaciones, cuyo único "pero" sería la incrustación del nombre de la pagina (Picjoke.com) en la fotografia retocada.
Aquí os dejamos un ejemplo de los muchos tipos de fotografias que se pueden generar:

8. Pixel Button
Ya no tienes excusas para no disponer de un banner, por pequeño que sea, en tu blog, y es que con esta página podrás crear facilmente botones anti-pixel muy atractivos, que constituyen una buena opción a la hora de enlazar.
Puedes cambiar el color del fondo del botón, el color de la letra, y se puede descargar en dos formatos: .gif y .png

Ejemplo:

Esperamos que os sirvan estas 8 webs.
Y tú, ¿conoces alguna página más relacionada con el tema? Si es interesante, la añadiremos en esta entrada. Nos interesa tu opinion, ¡anímate y comenta!

Cómo era Blogger en 1999

2009-12-05T20:13:00.002+01:00

Aquí os mostramos una imagen de como era Blogger en el año 1999, así como un Iframe.
Llama mucho la atención el tremendo cambio que la página ha dado en 10 añitos (no se podía esperar menos), pero sin duda, creemos que aún les falta mucho por mejorar.
¡Esperamos que lo disfruten!

Y la captura en vivo...

Saludos!!

Pon un índice de entradas en tu blog

2009-11-29T00:52:00.004+01:00

Gracias a este sencillo truco, realizado inicialmente por El Potro, de Ciudad Blogger, podemos añadir un Índice o Sitemap en el blog. Puedes ver el resultado en La Trucoteca de Blogs, pinchando aquí.
Para ello, solo vamos a necesitar crear una nueva entrada, y añadir los códigos correspondientes:

1. Añadimos éste código (lo copiamos y lo pegamos en la entrada, en la Edición de HTML):

<script style="text/javascript" src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/tableindex.js"></script>
<script src="http://aqui-la-direccion-de-tu-blog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

1.2 Cambiamos aqui-la-direccion-de-tu-blog por la correspondiente.
1.3. No es necesario, pero si queremos, podemos guardar el Script en nuestro ordenador y más tarde alojarlo en un servidor propio.
1.4. Antes de publicar la entrada, es recomendable que en Opciones de entrada, en Establecer fecha y hora, pongamos una fecha anterior a la de la primera entrada que tenemos, para que no se mezcle entre las demás.

2. Tras pegar el código y cambiar la fecha, Publicamos la entrada, y ya podemos disfrutar de un índice/sitemap de gran calidad, que nos permite mantener ordenadas todas las entradas organizadas por etiquetas.
Además, el script lleva incrustado un sistema que marca, dentro de dicho índice, las últimas entradas con la palabra Nuevo!
Un truco muy útil y fácil para nuestro blog :)

¡Suerte!

Añadir marcadores sociales en tu blog

2009-11-21T17:20:00.005+01:00

Hace un tiempo vimos en El Balcon de Jaime una entrada sobre como aplicar unos marcadores sociales en tu blog, para permitir a los usuarios compartir las entradas en diferentes páginas como Facebook, Technorati, Delicious, Twitter, Digg, etc.
Pues bien, nos pareció muy interesante, así que vamos a explicarlo para aquel que quiera conseguirlo.

Vamos a Diseño> Edición de HTML de la plantilla y expandimos artilugios:

Ahora buscamos esta linea (Ctrl+F):

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

Debajo de esa línea, añade lo siguiente:

<b>Compartir:</b>

<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Technorati'><img alt='Agregar a Technorati' src='http://4.bp.blogspot.com/_blABMJBbYJs/SuywKmtDD9I/AAAAAAAAHPs/c6x8g9-09js/S1600-R/technorati.gif'/></a>

<a expr:href='"http://twitter.com/home?status=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Twittealo'><img src='http://3.bp.blogspot.com/_blABMJBbYJs/Suyyn9NhHJI/AAAAAAAAHQs/IsusX-i2JzE/S1600-R/twitter.png'/></a>

<a expr:href='"http://bitacoras.com/votar/anotacion/externo/mini/" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Bitácoras.com'><img src='http://2.bp.blogspot.com/_blABMJBbYJs/SuywdrkJxUI/AAAAAAAAHP0/3t8uibwZxKY/S1600-R/bitacoras.png'/></a>

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Reddit'><img alt='Agregar a Reddit' src='http://2.bp.blogspot.com/_blABMJBbYJs/SuyyGLMf8MI/AAAAAAAAHQU/jcE6dpH_15Q/S1600-R/reddit.png'/></a>

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Del.icio.us'><img alt='Agregar a Del.icio.us' src='http://4.bp.blogspot.com/_blABMJBbYJs/SuyxIr8fjfI/AAAAAAAAHP8/YSyfSAb9X0w/S1600-R/delicious.gif'/></a>

<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a DiggIt!'><img alt='Agregar a DiggIt!' src='http://img171.imageshack.us/img171/8971/digg.png'/></a>

<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Blinklist'><img alt='Agregar a Blinklist' src='http://2.bp.blogspot.com/_blABMJBbYJs/SuyySWLyJnI/AAAAAAAAHQc/S2MWWS5snCA/S1600-R/blinklist.png'/></a>

<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Google'><img alt='Agregar a Google' src='http://3.bp.blogspot.com/_blABMJBbYJs/Suyxuv0Gs3I/AAAAAAAAHQM/3VD-Qh71Fy4/S1600-R/Google.png'/></a>

<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Facebook'><img src='http://1.bp.blogspot.com/_blABMJBbYJs/SuyyfaGt7gI/AAAAAAAAHQk/606MoRAD2m4/S1600-R/facebook.png'/></a>

<a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Meneame'><img alt='Agregar a Meneame' src='http://3.bp.blogspot.com/_blABMJBbYJs/Suyv_tYOZiI/AAAAAAAAHPk/42ZZzaBnnI8/S1600-R/meneame.gif'/></a>

Y si todo ha salido bien, Guardamos Cambios, y el resultado debería ser este:

Saludos!!!

¡¡La Trucoteca de Blogs alcanza los 50 seguidores!!

2009-11-19T15:51:00.001+01:00

El día 16 de Noviembre de 2009, La Trucoteca de Blogs alcanzó la cifra de 50 seguidores.

Así pues, desde su nacimiento el 3 de Junio, entonces con el nombre de "Todo para Bloggers", hasta ahora, con el nombre de "La Trucoteca de Blogs", y para agradecerles ese valiosísimo gesto, estas han sido las personas que han confiado en el blog, así como hecho el mejor desarrollo del mismo:

1. El Toco - Cagua
2. Orlando Colina - EducarWeb
3. Misaani - Mi Rincón
4. Yaritza Fontanez - Historia General del Hombre
5. Ismael
6. Gabriela Maiorano - Gabriela Maiorano
7. Helen Maran - Meditaciones en el Mar Rojo
8. Fabian - Soft Desatendido
9. Ichigo Rafael - Animaco Fansub
10. Raymond - Perreo Criminal
11. Yabe - Arcoiris de Belleza
12. Orietta - Hilos y Matices
13. BlogsConEñe - Blogs Con Eñe
14. BanakaBanaka - BanakaBanaka!!Blog
15. Alexis - Grand Slam
16. Reina - Reina
17. Carlos R. - Un motero solitario
18. Archeneros - Archeneros.com
19. Juanma™ - Juanma™
20. Un Perro - Jauria de Perros
21. Veto Kusak - ¿Cómo se hace...?
22. Sieento - Sieento
23. Luis Jesús - Astaroth
24. Viajera - Un viaje a todas partes......
25. Titaniii - Arca Mineral
26. Vaka - Series Vakunas
27. Sara - Elixir para Olvidar
28. Angeles Diaz
29. Maria Rosa - Blog del Dr. Miguel Angel Golia
30. Yoly y Cari - El Ángel de Cari
31. Sergi - Mis recursos en Blogger
32. Piedra1959
33. Ascesino96 - Directorio Tucan
34. Guillermo Vanegas
35. El Duende Urbano - El Duende Urbano
36. María - ¡Mari Viva!
37. Rafo - Barrio Sarita
38. Ordago13 - 10 historias 10 canciones
39. Xtremex
40. вℓєѕтαиgєℓℓα - Mi blog
41. вℓєѕтαиgєℓℓα - ¢υяισѕι∂α∂єѕ
42. Julieta Gallardo - [E-> mi droga preferida ante tanta cocaina universal
43. Felix Casanova
44. Christian García
45. Reyes
46. Eddie Piche
47. Rodrigo Rodriguez
48. 555aron - Tecompu

Saludos!

8 texturas de papel de alta calidad de "Theshoreways" para tu blog:

2009-11-10T15:34:00.006+01:00

Aquí os presentamos unas texturas realizadas con papel, hojas arrugadas,... todo ello por el administrador de la web de diseño visual Theshoreways
(Las imágenes que vamos a mostrar a continuación son de propiedad del autor, con licencia C.C., aunque nos permite usarlas gratuitamente)
En fin, unos fondos que pueden quedar muy bien en tu blog si eres partidario del estilo "Grunge".

1. Para poner alguno de estos fondos en tu página solo tienes que añadir lo siguiente despues de body { , en Edicion de HTML de tu plantilla :

background-image: url(Url-de-la-imagen) repeat-LETRA;

2. En LETRA podemos poner: x (repeat-x)si queremos que la imagen se repita horizontalmente, o y (repeat-y)si queremos que la imagen se repita verticalmente.
También puedes NO PONER NADA, y la imagen cubrirá todo el blog
Quedaría asi: background-image: url(Url-de-la-imagen); simplemente.

Recuerda: debes copiar exactamente la sección de letras que te hemos indicado, sin que quede ningún espacio más.
Después, Guardamos Cambios :)

Aquí las imágenes en acción:

Papel 1

Enlace

Papel 2

Enlace

Papel 3

Enlace

Papel 4

Enlace

Papel 5

Enlace

Papel 6

Enlace

Papel 7

Enlace

Papel 8

Enlace

Esperamos que os sirvan y gusten!

Saludos!!