Tutorial: Publicidad "InFrame"

  • Autor Autor kanikase
  • Fecha de inicio Fecha de inicio
kanikase

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
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>

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: cerrar.webp

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:
ES GENIAL, por cierto, qué template de blogger usas?
 
Muy bueno el tutorial, super útil!!

- - - Actualizado - - -

Muy bueno el tutorial, super útil!!
 
Buen tuto, una curiosidad, que imagen es la que has puesto en cod 64 y porque, se puede quitar. gracias.
 
Muy buena capo siempre cai haciendo click en esa publi xD
 
Buen tuto, una curiosidad, que imagen es la que has puesto en cod 64 y porque, se puede quitar. gracias.

Pues si lo quitas se quita la imagen xD, en base 64 la puse para evitar que estén subiendo la imagen o que se valla caer, ademas de que sirve para que cargue un poquito más rápido :encouragement:
 
Andaba buscando algo así, me servirá mucho.
 
Pos wuao! Lo que buscaba y nunca encontré pero aquí está! Lo probare y te aviso si me funciono o no okas xD
 
Excelente gracias

Enviado desde mi MB855 usando Tapatalk 2
 
no se puede poner un anuncio de adsense verdad
 
[MENTION=110985]alan501[/MENTION]

Para mi es lógico que no ya que seria tomado como clicks inválidos y instando a dar clicks y todo esto esta penado por Adsense.

Saludos!

- - - Actualizado - - -
[MENTION=81006]kanikase[/MENTION]

Oie una preguntita de que tamaño seria mejor que fuera el anuncio? seria el 300x250 verdad??
 
si 300x250, también 336x280 pero no se si haya ese tamaño con otros anunciantes
 
<bkin> a si se dice o como se escribe ? es que no me aparece en blogger D:
 
si 300x250, también 336x280 pero no se si haya ese tamaño con otros anunciantes

Yo de nuevo xDD. Bueno mi blog estan varios videos en TABS, como haria para ponerlos en todos a la vez??

Tendria que encerrar cada inframe de los videos con estas class o no?? y si lo haria no se cargaria en anuncio una una y otra vez verdad??

En esta entrada lo veras como lo puse pero no me funciono.

Porfa necesito ayuda :encouragement: 🙂
 
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:

Muy bueno amigo, aunque creo que se podia hacer con JS y CSS mucho mas simplificado y light, tomare la idea, gracias te lo pago con un Me agrada :encouragement: xDD
 
Hepl D: me sale esto en el primer paso al guardar : Error al analizar XML, línea 793, columna 1474: Attribute name "allowfullscreen" associated with an element type "iframe" must be followed by the ' = ' character.
 
<bkin> a si se dice o como se escribe ? es que no me aparece en blogger D:

]]></b:skin>

- - - Actualizado - - -

Hepl D: me sale esto en el primer paso al guardar : Error al analizar XML, línea 793, columna 1474: Attribute name "allowfullscreen" associated with an element type "iframe" must be followed by the ' = ' character.

En el javascript elimina esa parte allowfullscreen

- - - Actualizado - - -

Muy bueno amigo, aunque creo que se podia hacer con JS y CSS mucho mas simplificado y light, tomare la idea, gracias te lo pago con un Me agrada :encouragement: xDD

Si se puede, pero como lo hace en el otro tutorial qu enlace no funciona cuando el anuncio se hace con javascript, solo con iframe, este si funciona con javascript
 
Atrás
Arriba