Botón de PageRank en tu blog

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

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)

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

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.

Menú horizontal simple para tu blog

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:

· Para cambiar el color del menú:
Quizás te hayas dado cuenta de que existe una pequeña imagen que sirve como fondo del menú: http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png
Si quieres cambiar el color deberás, por lo tanto, utilizar otro degradado o imagen que desees, o modificarla con algún programa de edición gráfica como Photoshop (Ajustes>Tono/Saturación), Gimp, alguna utilidad online, o incluso con la misma Galería Fotográfica disponible para Windows.

· 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