Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock


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 :)

- - 3 Comentarios
Tag

Comentarios (3)

  1. Hola amigo Intente ponerlo pero no me quedo igual queda mal con los banner de 125x125 me ayudarias! mi web es http://www.pelismkv.net/ saludos y gracias

    ResponderEliminar
  2. @Spartacus® Quieres los cuadros publicitarios estén uno al lado del otro:

    Pega este código
    <table width="250" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>Código Aquí</td>
    <td>Código Aquí</td>
    </tr>
    </table>


    Solo tienes que pegar los códigos de los banners 125x125 donde dice Codigo Aqui

    Espero que me hallas entendido

    ResponderEliminar
  3. Que tal amigo yo no vendo solo quiero poner este efecto a la publicidad de mi blog que codigo debo utilizar para que se cree el efecto saludos

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar