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>
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
No olviden
No olviden quitar los números al css y html. Pueden descargar los archivos para que se les haga más facil
-----------------
Visita mi Bligoo www.pixelchile.com
John Zárate - Webmaster