Hoy en día todos los que llevamos un blog adelante, o estamos constantemente ligados a Internet por nuestro trabajo, es prácticamente común que no solo dediquemos tiempo a escribir en nuestros blog, sino que también a veces solemos buscar una forma de salir un poco de la rutina diaria participando en diferentes redes sociales, donde solemos compartir imágenes, contar lo que estamos haciendo en un determinado momento, divertirnos con amigos, en fin. Aunque también es común, que no siempre solemos brindar desde nuestro blog los enlaces a ese tipo de redes, sean: twitter, pownce, flickr etc en las cuales participamos. Pero si deseáramos hacerlo, como una forma de que nuestros usuarios nos comiencen a conocer un poco mas, no necesariamente deberemos crear enormes banner que llamen la atención de nuestros usuarios, ya que siempre existen otras alternativas, mas simples, limpias, ordenadas y agradables, que llamara de la misma forma la atención de nuestros usuarios, pero evitando arruinar el diseño de nuestro blog que tanto trabajo no haz costado. La forma más simple, es crear listas con iconos personalizados.
Ver Demo - Descarga Ejemplo
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;
}
Estructura
HTML:
<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>
