Enlaces con favicones

Si miráis a la derecha en este blog, en la sidebar podréis ver que hay un espacio para favicones de otras webs, con fin de publicitar e intercambiar links. Es una forma práctica de conocer a gente. No tiene complejidad ninguna insertar, ya que es una tabla con imágenes con enlaces. Para insertar este gadget a nuestro blog necesitaremos utilizar CSS y HTML. Podemos agregar este código entre <style></style> en el mismo gadget o insertarlo en la plantilla antes de ]]</b:skin>:



/*--(favicones)--*/

#advertise { /*generales*/
padding-top: 10px;
padding-bottom: 7px;
padding-left: 3px;
padding-right: 3px;
width:250px; /*anchura*/
text-align:center;
margin:10px auto 10px auto;
}
#adverise:hover { /*cuando pases el puntero por encima de la tabla*/
background:url(http://4.bp.blogspot.com/_WvACVGW1iPE/SsD9dOSdtZI/AAAAAAAAAbE/bDl2CTFVBVc/s00/innerwrap.gif);
}
#advertise .favicon img {
padding:1px 1px 1px 1px;
border:1px solid #333;
filter:alpha(opacity=40);
opacity:.40;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*IE 8 transparencias*/
}
#advertise .favicon a:hover img{ /*cuando pases el puntero por encima de los favicones*/
border:1px solid #000;
filter:alpha(opacity=100);
opacity:100;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*IE 8 transparencias*/
}

Una vez insertado esto pasamos al código HTML. Vamos a editar diseño y agregamos un elemento HTML. Se compone de dos DIVs modificados con el código insertado anteriormente:

<div id="advertise">
<div class="favicon">

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

<a href="URL-ENLACE"><img src="URL-FAVICON" title="DESCRIPCION" /></a>

</div>
</div>

Podéis agregar más iconos, agregando líneas adicionales.

Categorías: ,

Deja tu comentario