kanikase
Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
- Desde
- 22 Feb 2014
- Mensajes
- 4.716
Hola, hace tiempo yo estuve buscando mucho una forma de poner publicidad en los iframes de mi web, y encontré varias soluciones, pero todas aunque funcionaban era algo difícil de usarla, porque en cada iframe se tenía que pegar otro código (http://forobeta.com/publicidad/1572...reproductor-movimiento-de-pestana-cerrar.html), por eso yo me puse a hacer mi propio código para publicidad en los iframes, y la manera en que lo logré es mas fácil que todo lo que había visto, y ahora yo les daré el código y enseñare a instalarlo por si alguien lo necesita :topsy_turvy:
Empezamos
1.- Se van a la edición HTML de su web, si es en Blogger en Plantilla > Editar HTML, en Wordpress en header.php.
Ya cuando estén ahí, agregan el siguiente código después de <body>
cerrar.png:
Este es lo importante, lo que hace todo el trabajo, aunque el código se ven grande no lo es, se ve así por una imagen que le puse en base 64, pero el código es chico.
Este código lo vamos a configurar:
1.- Si se recargarán los anuncios o no.
2.- Si se moverá el botón de "Cerrar"
3.- En caso de que se recargue la publicidad en cuanto tiempo en segundos.
Es lo configuran desde las primeras tres lineas del código anterior :welcoming:
Ahora agregamos los estilos, los pueden agregar despues del código anterior, con las etiquetas <style>, en el caso de Wordpress en styles.css, o en Blogger dentro de <b:skin> en cualquier parte es igual, yo recomiendo despues de el código anterior.
Y ya está todo :3 ahora para hacer que salga la publicidad en iframe lo único que tenemos que hacer es agregar el iframe de la siguiente manera:
Como ven solo se encierra el iframe en una etiqueta div con el id publicidad, y con eso ya sería todo, el código hará todo lo necesario para que funcione.
DEMO
Aclaraciones:
1.- Es necesario que tengas jQuery en tu web.
Y eso es todo, no agregue imagenes porque es muy simple el tutorial.
Espero que les guste.
Empezamos
1.- Se van a la edición HTML de su web, si es en Blogger en Plantilla > Editar HTML, en Wordpress en header.php.
Ya cuando estén ahí, agregan el siguiente código después de <body>
HTML:
<script type="text/javascript">
var mover = true; //Se mueve o no se mueve el boton cerrar
var mueve = 2; // Número de veces que se mueve el botón cerrar
var recargar = true; //Se recarga o no el anuncio
var segundos = 180; //Si se recargara, en cuantos segundos
function cicklow_XcVCCW(){
if(document.getElementById("XcVCCW")==null || document.getElementById("XcVCCW").offsetHeight<=0){
$('#IDDIVIFRAME').css({
width : $('#IDDIVIFRAME').find('iframe').attr('width'),
height : $('#IDDIVIFRAME').find('iframe').attr('height')
});
} else {
publicidad();
}
}
function publicidad(){
var $frm=$('#IDDIVIFRAME').find('iframe'),Mtop=$frm.attr('height')/2,x=0;
Mtop = Mtop-125;
$('#IDDIVIFRAME').css({
width : $frm.attr('width'),
height : $frm.attr('height')
});
$('#IDDIVIFRAME').html('<div class="cod" style="width:'+$frm.attr('width')+'px;height:'+$frm.attr('height')+'px"><div style="margin-top:'+Mtop+'px"><img alt="cerrar" id="cerrar" src="http://kanikase.com/demos/publicidad/cerrar.png" title="Cerrar" style="margin:'+Math.floor(Math.random()*230+5)+'px 0 0 '+Math.floor(Math.random()*280+5)+'px"/>'+$('#cod').html()+'</div></div>'+$('#IDDIVIFRAME').html());
if(mover == true){
$('#cerrar').mouseover(function() {
if (x == mueve) {
$(this).click(function() {
$('.cod').fadeOut('fast');
if(recargar){
x = 0;
setTimeout(function() {
$(".cod").css('display','block');
$(this).css({
marginTop: Math.floor(Math.random()*230+5),
marginLeft: Math.floor(Math.random()*280+5)
});
}, segundos*1000);
}
});
} else {
x++;
$(this).animate({
marginTop: Math.floor(Math.random()*230+5),
marginLeft: Math.floor(Math.random()*280+5)
});
}
});
} else {
$('#cerrar').click(function() {
$('.cod').fadeOut('fast');
if(recargar){
setTimeout(function() {
$(".cod").css('display','block');
$(this).css({
marginTop: Math.floor(Math.random()*230+5),
marginLeft: Math.floor(Math.random()*280+5)
});
}, segundos*1000);
}
});
}
}
$(document).ready(cicklow_XcVCCW);
</script>
<div id="cod">
AQUÍ TÚ CÓDIGO DE PUBLICIDAD
</div>
<img src="http://kanikase.com/demos/publicidad/banner.gif?" width="1" height="1" id="XcVCCW">cerrar.png:
Este es lo importante, lo que hace todo el trabajo, aunque el código se ven grande no lo es, se ve así por una imagen que le puse en base 64, pero el código es chico.
Este código lo vamos a configurar:
1.- Si se recargarán los anuncios o no.
2.- Si se moverá el botón de "Cerrar"
3.- En caso de que se recargue la publicidad en cuanto tiempo en segundos.
Es lo configuran desde las primeras tres lineas del código anterior :welcoming:
Ahora agregamos los estilos, los pueden agregar despues del código anterior, con las etiquetas <style>, en el caso de Wordpress en styles.css, o en Blogger dentro de <b:skin> en cualquier parte es igual, yo recomiendo despues de el código anterior.
Insertar CODE, HTML o PHP:
#cod{
display: none;
}
.cod{
position: absolute;
}
.cod div {
width: 300px;
height: 250px;
margin: auto;
background: #EEE;
}
#cerrar {
position: absolute;
width: 15px;
cursor: pointer;
}
#IDDIVIFRAME{
display: inline-block;
}Y ya está todo :3 ahora para hacer que salga la publicidad en iframe lo único que tenemos que hacer es agregar el iframe de la siguiente manera:
HTML:
<div id="publicidad">
<iframe width="800" height="500" src="https://www.youtube.com/embed/1LAC847kENY" frameborder="0" allowfullscreen></iframe>
</div>Como ven solo se encierra el iframe en una etiqueta div con el id publicidad, y con eso ya sería todo, el código hará todo lo necesario para que funcione.
DEMO
Aclaraciones:
1.- Es necesario que tengas jQuery en tu web.
Y eso es todo, no agregue imagenes porque es muy simple el tutorial.
Espero que les guste.
Última edición:
