Buscar:

12 Estilos para anuncios Adsense

Autor: Hvason
October 23, 2007

En este artículo se redondearán 29 estilos diferentes para los anuncios de Adsense Google, elegir entre ellos el estilo del anuncio que se ajustan a sus páginas. Cada Adstyle incluye el enlace con el código (de adcluster) y previsualizar.

Nota: Este es sólo un ejemplo de cómo combinar sus anuncios. Google permite el uso de fondos sólo en la medida en que no traigan la excesiva atención a los anuncios o alentar clics. Su mejor apuesta sería sólo la utilizan como una plantilla para crear sus propios antecedentes que coinciden con el estilo creativo de su sitio.

1.- Estilo con sombra. (468×60)

Estilo # 1

Codigo:

Style.css

#ad_code { background:#FFFFFF url(images/css-glow.png) center center no-repeat; text-align:center; padding:11px 10px 10px 9px; width:487px; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #666666
  Border Color: #666666
  Text Color: #26AEED
  Link Color: #FFFFFF
  URL Color: #26AEED

Descargar Imagen

2.- Estilo con degradado. (468×60)

Estilo # 2

Codigo:

Style.css

#ad_code { background:#FFFFFF url(images/horizon.png) center center no-repeat; padding:25px 0; width:468px; text-align:left; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #FFFFFF
  Border Color: #FFFFFF
  Text Color: #777777
  Link Color: #282828
  URL Color: #777777

Descargar Imagen

3.- Estilo con degradado naranja. (234×60)

Estilo # 3

Codigo:

Style.css

#ad_code { background:transparent url(images/orangeoval.jpg) center center no-repeat; text-align:center; width:312px; padding:65px 0; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #FF9933
  Border Color: #FF9933
  Text Color: #111111
  Link Color: #FFFFFF
  URL Color: #111111

Descargar Imagen

4.- Estilo banner azul con sombra. (234×60)

Estilo # 4

Codigo:

Style.css

#ad_code { width:260px; text-align:center; padding:10px 20px 20px 10px; background:transparent url(images/subtleblue.jpg) center center no-repeat; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #5D8AC9
  Border Color: #5D8AC9
  Text Color: #CBE6A6
  Link Color: #FFFFFF
  URL Color: #CBE6A6

Descargar Imagen

5.- Estilo banner negro con sombra. (234×60)

Estilo # 5

Codigo:

Style.css

#ad_code { width:253px; text-align:left; padding:16px 0 23px 5px; background:transparent url(images/blackslanted.jpg) center center no-repeat; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #333333
  Border Color: #333333
  Text Color: #CCCCCC
  Link Color: #FFFFFF
  URL Color: #CCCCCC

Descargar Imagen

6.- Estilo boton blanco con sombra. (125×125)

Estilo # 6

Codigo:

Style.css

#ad_code { background: #ffffff url(images/shadowbox.png) center center no-repeat; text-align:center; padding:3px 13px 13px 3px; width:138px; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #FFFFFF
  Border Color: #FFFFFF
  Text Color: #038C03
  Link Color: #038C03
  URL Color: #038C03

Descargar Imagen

7.- Estilo boton negro con sombra. (125×125)

Estilo # 7

Codigo:

Style.css

#ad_code { background:#ffffff url(images/blackquare.png) center center no-repeat; width:163px; height:166px; padding-top:15px; text-align:center; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #333333
  Border Color: #333333
  Text Color: #888888
  Link Color: #FFFFFF
  URL Color: #888888

Descargar Imagen

8.- Estilo boton blanco punta redondeada y sombra. (125×125)

Estilo # 8

Codigo:

Style.css

#ad_code { text-align:center; padding:10px 0; background:transparent url(images/roundshadow.png) center no-repeat; width:182px; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #FFFFFF
  Border Color: #FFFFFF
  Text Color: #666666
  Link Color: #336699
  URL Color: #666666

Descargar Imagen

9.- Estilo cuadrado gris. (300×250)

Estilo # 9

Codigo:

Style.css

#ad_code { background:#FFFFFF url(images/greyrounded.png) center center no-repeat; text-align:center; padding:7px 15px 15px 7px; width:363px; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #EEEEEE
  Border Color: #EEEEEE
  Text Color: #444444
  Link Color: #000000
  URL Color: #444444

Descargar Imagen

10.- Estilo cuadrado azul. (300×250)

Estilo # 10

Codigo:

Style.css

#ad_code { background:#FFFFFF url(images/336blue20.png) center center no-repeat; text-align:center; padding:9px 15px 18px 7px; width:363px; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #28527B
  Border Color: #28527B
  Text Color: #EEEEEE
  Link Color: #FFFFFF
  URL Color: #EEEEEE

Descargar Imagen

11.- Estilo horizontal blanco. (728×90)

Estilo # 11

Codigo:

Style.css

#ad_code { width:765px; text-align:center; padding:30px 25px 30px 15px; background:transparent url(images/shuffledpapers-white.jpg) center center no-repeat; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #FFFFFF
  Border Color: #FFFFFF
  Text Color: #555555
  Link Color: #006699
  URL Color: #444444

Descargar Imagen

12.- Estilo horizontal verde. (728×90)

Estilo # 12

Codigo:

Style.css

#ad_code { width:750px; padding:10px; background:transparent url(images/diggdugg.gif) center center no-repeat; text-align:center; }

Index.html

<head><link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css”></head>

<body>
<div id=”ad_code”>
<!– REEMPLAZAR POR TU CODIGO ADSENSE –>
</div>
</body>

Colores Adsense

  Background Color: #CCDEAF
  Border Color: #CCDEAF
  Text Color: #000000
  Link Color: #1B5790
  URL Color: #444444

Descargar Imagen

Posts Relacionados


Leer Comentarios ( 0 )

Enviar Comentario