Personalizar listas con CSS

Enviado por John Zárate el 14-04-2008 a las 2:59

Especial para personalizar las listas de nuestro Blogroll de Bligoo, con los enlaces de webs amigas, eso si te tomara unos minutos hacerlo para que quede un resultado como el que sale en la imagen de arriba. La forma en simple, les explicare para bligoo, para WordPress, Blogger, a forma es igual, para webs, ya sabrán los webmasters como hacerlo.

Primero los ejemplos y la descarga: Ver Demo - Descarga Ejemplo

Nuestro CSS:

.mac {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/macosx.gif) bottom left no-repeat;
List-style:none;
}
.clickideas {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/cli.gif) bottom left no-repeat;
List-style:none;
}
.pownce {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/pow.gif) bottom left no-repeat;
List-style:none;
}
.flickr {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/flickr.gif) bottom left no-repeat;
List-style:none;
}
.wordpress {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/wordpress.gif) bottom left no-repeat;
List-style:none;
}
.blog {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/blog.gif) bottom left no-repeat;
List-style:none;
}
.mail {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/mail.gif) bottom left no-repeat;
List-style:none;
}
.tarjeta {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/tarjeta.gif) bottom left no-repeat;
List-style:none;
}
.info {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/info.gif) bottom left no-repeat;
List-style:none;
}

En Bligoo el CSS tienen que entrar a Personalizar Sitio > Eligen su tema, lo editan> Entrarn a CSS, agregan el código CSS de arriba al final. Reemplazan los links de las imagenes por los links de los iconos que quieran y reemplazan los nombres por los que quieran ejemplo si sale .wordpress lo remplzan por .johnzarate por decirlo, sin espacios.

Ahora guardan el tema, y van a mis temas, y ponen usar el que editaron. Después de hecho esto, van a los Bligets, añaden uno de texto, y ediatn en HTML (presionan el botón que sale de HTML en el editor). Agregan:

<ul>
<li class="mac">Usando <a href="http://www.apple.com">Macintosh</a></li>
<li class="wordpress">Powered by <a href="http://www.wordpress.org">Wordpress</a></li>
<li class="clickideas">Design by <a href="http://www.clickideas.net">Clickideas</a></li>
<li class="pownce">My <a href="http://www.pownce.com/nikko">Pownce</a></li>
<li class="flickr">My Photos <a href="http://www.flickr.com/photos/14412260@N08/">Flickr</a></li>
<li class="blog">My <a href="http://www.xyberneticos.com/">blog</a></li>
<li class="mail">My <a href="http://www.xyberneticos.com/index.php/contacto/">E-mail</a></li>
<li class="tarjeta">My <a href="http://www.xyberneticos.com/index.php/acerca-de/">vcard</a></li>
<li class="info">More <a href="http://www.xyberneticos.com/index.php/acerca-de/">Info</a></li>
</ul>

reemplazan de este último e contenido del class="""""""""""" según ustedes pusieron el el CSS.

Preguntas en los comentarios. Si quieren un hosting de imagenes, aparte del que trae Bligoo, pueden usar, www.Sube.la www.imageshack.us (no megusta), www.godlike.cl

Visto en: Xyberneticos