Mejorando la estética de Google Adsense con CSS



ad4.JPG

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:

ad1.JPG

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.

No te pierdas:  Solución a DNS_PROBE_FINISHED_NXDOMAIN en Chrome

Federico NZ

Escribo junto a mi hermano en este blog desde el 2007. Soy un apasionado de internet, el estudio del SEO y el conocimiento en general.

  1. Pingback: Extremisimo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir