Tutoriales Sobre Blogger: Agregarle CSS a tu publicidad (Si vendes)

En este tutorial veremos como agregarle CSS a tu publicidad en Blogger y si vendes con imagen de descuento. 

Muchos bloggers venden publicidad como sabemos, si es así, este tutorial te agradara.
O simplemente tienen socios con sus banners o logos y quieren agregarle un toque de estilo para hacerlo mas llamativo o poder vender mas publicidad este tutorial te encantara.

La demostración la encontraras en el blog

Comencemos:

• Paso 1: Vamos a Blogger>> Plantilla>> Editar HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS.

Tutoriales-Blogger.info Anuncios CSS
******************************************/
/*****************************************
125x125 CSS
******************************************/
div.TBTads_125 a{
width:125px;
display:block;
font-size:11px;
color:#888;
font-family:verdana,sans-serif;
text-align:center;
text-decoration:none;
overflow:hidden;
float:left;
line-height:125px;
margin:0 4px 10px 0;
}
div.TBTads_125 img{
border:2px solid #ddd;
clear:right;padding:5px;
}
div.TBTads_125 a.adhere{
color:#666;
font-weight:bold;
font-size:12px;
border:2px solid #ccc;
background:#e7e7e7;
text-align:center;
width:125px;
height:125px;
line-height:1000%;
}
div.TBTads_125 a.adhere:hover{
border:2px solid #999;
background:#ddd;
color:#333;
}
html>body div.TBTads_125 a.adhere{
width:125px;
height:130px;
}
/*****************************************
234x60 CSS
******************************************/
div.TBTads_234x60 a{
width:234px;
display:block;
font-size:11px;
color:#888;
font-family:verdana,sans-serif;
text-align:center;
text-decoration:none;
overflow:hidden;
float:left;
line-height:60px;
margin:0 4px 10px 0;
}
div.TBTads_234x60 img{
border:2px solid #ddd;
clear:right;
padding:5px;
}
div.TBTads_234x60 a.adhere{
color:#666;
font-weight:bold;
font-size:12px;
border:2px solid #ccc;
background:#e7e7e7;
text-align:center;
width:234px;
height:60px;
line-height:60px;
}
div.TBTads_234x60 a.adhere:hover{
border:2px solid #999;
background:#ddd;
color:#333;
}
html>body div.TBTads_234x60 a.adhere{
width:234px;
height:65px;
}
/*****************************************
300x250 CSS
******************************************/
div.TBTads_300x250 a{
width:300px;
display:block;
font-size:11px;
color:#888;
font-family:verdana,sans-serif;
text-align:center;
text-decoration:none;
overflow:hidden;
float:left;
line-height:250px;
margin:0 4px 10px 0;
border-top-left-radius:160px;
border-bottom-right-radius:160px;
}
div.TBTads_300x250 img{
border:2px solid #ddd;
clear:right;padding:5px;
}
div.TBTads_300x250 a.adhere{
color:#666;
font-weight:bold;
font-size:12px;
border:2px solid #ccc;
background:#e7e7e7;
text-align:center;
width:300px;
height:250px;
line-height:250px;
}
div.TBTads_300x250 a.adhere:hover{
border:2px solid #999;
background:#ddd;
color:#333;
}
html>body div.TBTads_300x250 a.adhere{
width:300px;
height:255px;
}
/*****************************************
468x60 CSS
******************************************/
div.TBTads_468x60 a{
width:468px;
display:block;
font-size:11px;
color:#888;
font-family:verdana,sans-serif;
text-align:center;
text-decoration:none;
overflow:hidden;
float:left;
line-height:60px;
margin:0 4px 10px 0;
}
div.TBTads_468x60 img{
border:2px solid #ddd;
clear:right;
padding:5px;
}
div.TBTads_468x60 a.adhere{
color:#666;
font-weight:bold;
font-size:12px;
border:2px solid #ccc;
background:#e7e7e7;
text-align:center;
width:468px;
height:60px;
line-height:60px;
}
div.TBTads_468x60 a.adhere:hover{
border:2px solid #999;
background:#ddd;
color:#333;
}
html>body div.TBTads_468x60 a.adhere{
width:468px;
height:65px;
}
/*****************************************
728x90 CSS
******************************************/
div.TBTads_728x90 a{
width:728px;
display:block;
font-size:11px;
color:#888;
font-family:verdana,sans-serif;
text-align:center;
text-decoration:none;
overflow:hidden;
float:left;
line-height:90px;
margin:0 4px 10px 0;
}
div.TBTads_728x90 img{
border:2px solid #ddd;
clear:right;
padding:5px;
}
div.TBTads_728x90 a.adhere{
color:#666;
font-weight:bold;
font-size:12px;
border:2px solid #ccc;
background:#e7e7e7;
text-align:center;
width:728px;
height:90px;
line-height:90px;
}
div.TBTads_728x90 a.adhere:hover{
border:2px solid #999;
background:#ddd;
color:#333;
}
html>body div.TBTads_728x90 a.adhere{
width:728px;
height:95px;
}
.TBTads a{text-shadow:1px 1px 1px #111 !important;color:#eee !important;padding:7px !important;margin:0 10px 10px 0px !important;overflow: visible !important;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;}
.TBTads a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.TBTads a img{border: 0 none !important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px !important;}
.TBTads .even{margin-right:0!important;}
.TBTads .ad1{background:#e42b2b!important;}
.TBTads .ad2{background:#ff8400!important;}
.TBTads .ad4{background:#49a7f3!important;}
.TBTads .ad5{background:#41d05f!important;}
.TBTads .ad6{background:#B24700!important;}
.TBTads .ad7{background:#FFE500!important;}
.TBTads .ad8{background:#007D47!important;}
.TBTads .ad9{background:#330000!important;}
.TBTads .ad10{background:#990000!important;}
.TBTads .ad11{background:#f70000!important;}
.BannerDiscount_125x125{
background-image:url(http://1.bp.blogspot.com/-2TLeI-mGmus/UQcHK8trkEI/AAAAAAAAAkQ/s3zMtVXpX5M/s1600/Banner+Discount.png);
no-repeat scroll center top;
height: 40px;
line-height: 0px;
margin:3px 0 0 40px;
padding: 0px;
text-align: center;
width: 95px;
display: block;!important;
position:absolute;
}
.BannerDiscount_468x60{
background-image:url(http://1.bp.blogspot.com/-2TLeI-mGmus/UQcHK8trkEI/AAAAAAAAAkQ/s3zMtVXpX5M/s1600/Banner+Discount.png);
no-repeat scroll center top;
height: 40px;
line-height: 0px;
margin:3px 0 0 60px;
padding: 0px;
text-align: center;
width: 95px;
display: block;!important;
position:absolute;
}
.BannerDiscount_300x250{
background-image:url(http://1.bp.blogspot.com/-2TLeI-mGmus/UQcHK8trkEI/AAAAAAAAAkQ/s3zMtVXpX5M/s1600/Banner+Discount.png);
no-repeat scroll center top;
height: 40px;
line-height: 0px;
margin:3px 0 0 110px;
padding: 0px;
text-align: center;
width: 95px;
display: block;!important;
position:absolute;
}
/*****************************************
Tutoriales-Blogger.info Anuncios CSS

• Paso 4: Guardamos los cambios realizados en la plantilla.

Ahora agregaremos los banners de publicidad con su estilo CSS 

• Paso 5: Vamos a Blogger>> Diseño>> Añadir un gadget nuevo>> HTML/Javascript
• Paso 6: Dentro del gadget pegamos el siguiente código HTML

<table width="249" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div style="float:left;margin-left:0px;">
<div id="TBTads_125" class="TBTads_125">
<div class="TBTads">
<a href="http://www.tutoriales-blogger.info/p/fill-out-my-online-form.html" title="Tu Publicidad Aquí" class="adhere ad1" target="_blank"><img border="0" alt="Tu Publicidad Aquí" width="125" src="http://1.bp.blogspot.com/-YAOjuNWYjDc/UQWzhADPiVI/AAAAAAAAAgo/Oi0te5-Q8M0/s1600/Banner+125x125.png" height="125" /></a>
</div>
</div>
</div>
</td>
    <td width="120"><div style="float:right;margin-right:-5px;">
<div id="TBTads_125" class="TBTads_125">
<div class="TBTads">
<div class="BannerDiscount_125x125"></div>
<div align="center"><a href="http://www.tutoriales-blogger.info/p/fill-out-my-online-form.html" title="Tu Publicidad Aquí" class="adhere ad4" target="_blank"><img border="0" alt="Tu Publicidad Aquí" width="125" src="http://1.bp.blogspot.com/-YAOjuNWYjDc/UQWzhADPiVI/AAAAAAAAAgo/Oi0te5-Q8M0/s1600/Banner+125x125.png" height="125" /></a>
</div>
</div>
</div>
</div>
</td>
  </tr>
  <tr>
    <td><div style="float:left;margin-left:0px;">
<div id="TBTads_125" class="TBTads_125">
<div class="TBTads">
<div class="BannerDiscount_125x125"></div>
<div align="center"><a href="http://www.tutoriales-blogger.info/p/fill-out-my-online-form.html" title="Tu Publicidad Aquí" class="adhere ad1" target="_blank"><img border="0" alt="Tu Publicidad Aquí" width="125" src="http://1.bp.blogspot.com/-YAOjuNWYjDc/UQWzhADPiVI/AAAAAAAAAgo/Oi0te5-Q8M0/s1600/Banner+125x125.png" height="125" /></a>
</div>
</div>
</div>
</div></td>
    <td><div style="float:right;margin-right:-5px;">
<div id="TBTads_125" class="TBTads_125">
<div class="TBTads">
<div class="BannerDiscount_125x125"></div>
<div align="center"><a href="http://www.tutoriales-blogger.info/p/fill-out-my-online-form.html" title="Tu Publicidad Aquí" class="adhere ad2" target="_blank"><img border="0" alt="Tu Publicidad Aquí" width="125" src="http://1.bp.blogspot.com/-YAOjuNWYjDc/UQWzhADPiVI/AAAAAAAAAgo/Oi0te5-Q8M0/s1600/Banner+125x125.png" height="125" /></a>
</div>
</div>
</div>
</div></td>
  </tr>
  <tr>
    <td colspan="2"><div style="float:left;margin-left:-9px;">
<div id="TBTads_300x250" class="TBTads_300x250"><div class="TBTads"><div class="BannerDiscount_300x250"></div>
<a href="http://www.tutoriales-blogger.info/p/fill-out-my-online-form.html" rel="nofollow" title="Tu Publicidad Aquí " class="adhere ad2" target="_blank"><img border="0" alt="Tu Publicidad Aqui" width="300" src="http://1.bp.blogspot.com/-RTtZb_QGtEw/UQW1IPhUplI/AAAAAAAAAg4/nwT6IarFZi0/s1600/Banner+300x250.png" height="250" /></a>
</div>
</div>
</div>
      <div align="center">
        </div>
    </td>
  </tr>
</table>

• Paso 7: Guardamos el gadget  

Este código HTML esta divido en tablas  y contiene 4 bannes  de 125px X 125px y un banner de 300px X 250px

Solo debes de cambiar la URL del Enlace en ROJO

Eh aquí los Banners Uno por uno separados y sin tablas 

Si no quieres el código HTML de arriba con sus tablas, dejare uno por uno los banners para que elijas 

Banners 125px X 125px. Rojo

<div id="TBTads_125" class="TBTads_125">
<div class="TBTads">
<a href="http://www.tutoriales-blogger.info/p/fill-out-my-online-form.html" title="Tu Publicidad Aquí" class="adhere ad1" target="_blank"><img border="0" alt="Tu Publicidad Aquí" width="125" src="http://1.bp.blogspot.com/-YAOjuNWYjDc/UQWzhADPiVI/AAAAAAAAAgo/Oi0te5-Q8M0/s1600/Banner+125x125.png" height="125" /></a>
</div>
</div>
</div>

Banners 125px X 125px. Azul

<div id="TBTads_125" class="TBTads_125">
<div class="TBTads">
<div class="BannerDiscount_125x125"></div>
<div align="center"><a href="http://www.tutoriales-blogger.info/p/fill-out-my-online-form.html" title="Tu Publicidad Aquí" class="adhere ad4" target="_blank"><img border="0" alt="Tu Publicidad Aquí" width="125" src="http://1.bp.blogspot.com/-YAOjuNWYjDc/UQWzhADPiVI/AAAAAAAAAgo/Oi0te5-Q8M0/s1600/Banner+125x125.png" height="125" /></a>
</div>
</div>
</div>
</div>

 Banners 125px X 125px. Gris

<div id="TBTads_125" class="TBTads_125">
<div class="TBTads">
<div class="BannerDiscount_125x125"></div>
<div align="center"><a href="http://www.tutoriales-blogger.info/p/fill-out-my-online-form.html" title="Tu Publicidad Aquí" class="adhere ad3" target="_blank"><img border="0" alt="Tu Publicidad Aquí" width="125" src="http://1.bp.blogspot.com/-YAOjuNWYjDc/UQWzhADPiVI/AAAAAAAAAgo/Oi0te5-Q8M0/s1600/Banner+125x125.png" height="125" /></a>
</div>
</div>
</div>
</div>

Banners 125px X 125px. Naranja

<div id="TBTads_125" class="TBTads_125">
<div class="TBTads">
<div class="BannerDiscount_125x125"></div>
<div align="center"><a href="http://www.tutoriales-blogger.info/p/fill-out-my-online-form.html" title="Tu Publicidad Aquí" class="adhere ad2" target="_blank"><img border="0" alt="Tu Publicidad Aquí" width="125" src="http://1.bp.blogspot.com/-YAOjuNWYjDc/UQWzhADPiVI/AAAAAAAAAgo/Oi0te5-Q8M0/s1600/Banner+125x125.png" height="125" /></a>
</div>
</div>
</div>
</div>

Banners 300px. X 250px. Naranja 

<div id="TBTads_300x250" class="TBTads_300x250"><div class="TBTads"><div class="BannerDiscount_300x250"></div>
<a href="http://www.tutoriales-blogger.info/p/fill-out-my-online-form.html" rel="nofollow" title="Tu Publicidad Aquí " class="adhere ad2" target="_blank"><img border="0" alt="Tu Publicidad Aqui" width="300" src="http://1.bp.blogspot.com/-RTtZb_QGtEw/UQW1IPhUplI/AAAAAAAAAg4/nwT6IarFZi0/s1600/Banner+300x250.png" height="250" /></a>
</div>
</div>
</div>

Banners 468px. X 60px. Rojo 

<div id="TBTads_468x60" class="TBTads_468x60">
<div class="TBTads">
<div class="BannerDiscount_468x60"></div>
<a href="http://www.tutoriales-blogger.info/p/fill-out-my-online-form.html" rel="nofollow" title="Gana dinero con Neobux" class="adhere ad11" target="_blank"><img border="0" alt="Gana dinero con Neobux" width="468" src="http://3.bp.blogspot.com/-KtTyngn1GG4/UQWvClZZV1I/AAAAAAAAAgQ/b9uJzAkzarQ/s1600/Banner+468x60.png" height="60" /></a>
</div>
</div>
</div>

Este tutorial fue uno de los mas largos no creen :)