Acabo de publicar Regala Google Chrome por navidad |

Crear un Ribbon

By Miguel Ángel Jiménez Achinte On 7:33

Una de las mejores formas de promocionar un enlace y hacerlo vistoso es por medio de objetos evidentes al ojo del visitante. Lo especial de los Ribbons es que, por lo menos en mi caso, es lo primero que veo cuando entro a cierta pagina. Puedes ver el ejemplo en la parte superior.

Hay dos formas para hacerlo: la primera es de manera Online,



QuickRibbon te permite escoger entre cuatro tipos de borde, modificar colores, cambiar de fuente y tamaño...El script que generas al terminar de personalizar el enlace debes pegarlo antes de la etiqueta </body> en edicion de HTML.

Y mediante css (este codigo debe pegarse antes de </head>):

#ribbon {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 125px;
    width: 125px;
    background: url(url-imagen de fondo.png) no-repeat;
    text-indent: -999em;
    text-decoration: none;
}

En este caso la imagen flotará al lado derecho por la propiedad right, si queremos que flote al lado contrario será left. tambien podemos cambiar top por bottom y asi quedara al final de todo el contenido.

Como he dicho en casos anteriores, la palabra ribbon al incio del codigo solo hará referencia al enlace con ese nombre unico; La estructura deberia quedar parecida a esta (este codigo debe pegarse antes de </body>):

<a id="ribbon" href="AQUI_TU_ENLACE" title="TITULO">TEXTO DEL RIBBON</a>





2 comentarios

  1. Muy bueno el ribbon, espero que a mi me salga para mi blog. Gracias miguel, y... "enorme" tu blog.

    http://especialantivirus.blogspot.com

    Posted on 9/03/2009 7:07 a. m.

     
  2. Es una buena forma de publicitar enlaces, gracias por tu visita :)

    Posted on 9/03/2009 7:16 a. m.

     

Publicar un comentario en la entrada al viejo estilo