Mejorando la estética de Google Adsense con CSS

Xybernéticos nos muestra como podemos mejorar estéticamente los anuncios de Google Adsense. Los resultados son realmente buenos y lindos, y con un par de simples códigos podés adaptarlos al diseño de tu blog. El sitio recopila unas 29 ideas para mejorar estéticamente tus anuncios, obvio son ideas, vos pés mejorar los diseños a tu gusto o usarlos como guía. Veamos un ejemplo practico de cómo los adaptaríamos.

Como todos sabemos en Google Adsense podemos especificar el color de fondo que tendrá nuestro anuncio, el color de los enlaces, del texto, etc.

Suponiendo que nuestra paleta de colores de Adsense se compone de estos colores:

Fondo Color: #333333
Borde Color: #333333
Texto Color: #888888
Links Color: #FFFFFF
URLS Color: #888888

Entonces crearemos un div con un simple código en nuestra hoja de estilo

CSS:

1. #ad_code { background:#ffffff url(images/blackquare.png) center center no-repeat;

2. width:163px; height:166px;

   
   
   

3. padding-top:15px;

4. text-align:center; }

Ya con nuestro código en la hoja de estilo, solo resta encerrar nuestro código de Google Adsense dentro del div que acabamos de crear en la hoja de estilo.

HTML:

1. <div id="ad_code">

2. <!-- Cambiar solo esta línea por tu código de Google Adsense -->

3. </div>

Resultado final:

Descarga Imagen de fondo utilizada en este código Css. Supongo que sabrás que hacer con esta idea para implementarlos en tu blog y crear diseños nuevos para ti. Por cierto, podrás ver las otras 29 ideas para mejorar estéticamente tus anuncios y los códigos CSS utilizados en cada uno de ellos.