Como implementar publicidade em qualquer player com uma aba de fechar

xaiborweb · 28/01/2013

OLÁ COMPANHEIROS DO FÓRUM

Bom, como estive procurando por um bom tempo um código que me permitisse implementar publicidade na frente de qualquer player com uma aba de fechar que mudasse de posição ao passar o mouse

e como achei muito difícil encontrar, já que por mais que procurasse e perguntasse não conseguia, só até que tomei coragem e comecei a escrever código do que sei de programação e vi que, assim como eu, tem muita gente procurando algo parecido

pois aqui vai

1) html onde você quer que apareça o player com a publicidade

HTML:

<div>			
	<div id="publicidad-video">
	<IFRAME FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" WIDTH="300" HEIGHT="250" SRC="su publicidad"></IFRAME>
	<br>
	<div style="float: left; left: 180px; position: relative; top: -210px; z-index: 9999;">
	<span class="jbtn" onmouseover="jQuery(this).hide('fast');jQuery('#asd1').show('slow')">cerrar</span>
	</div>
	<div id="asd1" style="display: none; float: left; position: relative; top: -65px; z-index: 9999;">
	<span class="jbtn" onclick="jQuery(this).parent().parent().remove();">cerrar</span>
	</div>
	</div>	
	<iframe src="http://vk.com/video_ext.php?oid=198057043&id=164294950&hash=ca0131ef7fe7b297&hd=1" width="610" height="300" frameborder="0"></iframe>
</div>

2) css

HTML:

#publicidad-video{
	position: absolute;
	z-index: 1;
	width: 300px;
	height: 250px;
	margin: 20px 0px 0px 160px;
}

.jbtn {
background: #A90000;
color: #fff;
border: 1px solid #fff;
border-radius: 3px;
padding: 2px;
cursor: pointer;
}

.jbtn:hover {
background: #F00;
}

bom, espero que lhes sirva, qualquer dúvida comentem, abraços 🙂

jackemathe · 28/01/2013

obrigado pelo tutorial

- - - Atualizado - - -

obrigado pelo tutorial

xaiborweb · 28/01/2013

jackemathe disse:
obrigado pelo tutorial

- - - Atualizado - - -

obrigado pelo tutorial

de nada brother, é um pequeno tutorial para que aquele que tenha um problema parecido não passe pelo que eu passei para conseguir

que no final tive que programar eu mesmo hehe, embora não seja tão difícil, na verdade

peelink · 28/01/2013

a verdade muito bom, agradeço :encouragement: estive tentando fazer algo igual e não consegui

itxel · 29/01/2013

Olá Xaiborweb.

Muito obrigado pelo tuto! Me será muito útil :encouragement:

xaiborweb · 29/01/2013

itxel disse:
Olá Xaiborweb.

Muito obrigado pelo tuto! Me será muito útil :encouragement:

de nada, fico feliz que lhes sirva, companheiros
para isso estamos, para nos ajudarmos mutuamente, não é? abraços 🙂

peelink disse:
a verdade muito bom, agradeço :encouragement: estive tentando fazer algo igual e não consegui

Vika · 29/01/2013

Cai como uma luva, estive procurando isso para um novo projeto.

Muito obrigado. :love_heart:

lobogris · 29/01/2013

obrigado pela contribuição, talvez sirva :encouragement:

xaiborweb · 29/01/2013

NOTA: recomendo utilizar publicidade em iframes, já que este é o único formato que testei

almabasa · 29/01/2013

Re: [APORTE] publicidad en frente de un reproductor con movimiento de pestaña cerrar

Ejemplo de publicidad i frame?

Enviado desde mi GT-S5830M usando Tapatalk 2

xaiborweb · 29/01/2013

almabasa disse:
Exemplo de publicidade i frame?

Enviado do meu GT-S5830M usando Tapatalk 2

atualizo

já testei com publicidade da adbooth em formato ajax script e iframes e com os três funciona maravilhosamente 🙂

Wext · 29/01/2013

Parece com o meu xD mas menos pesado eu acho ou pode ser o mesmo hehe

DM200 · 29/01/2013

serve para wordpress e blogger da mesma forma?

xaiborweb · 29/01/2013

Wext disse:
Parece com o meu xD mas menos pesado eu acho ou pode ser o mesmo hehe

não amigo, se você olhar, quando você me passou o código eu já tinha postado, já que a impaciência me dominou e decidi programar eu mesmo
mas muito obrigado 🙂

DM200 disse:
serve para wordpress e blogger da mesma forma?

claro que sim, se você reparar não ocupa nenhuma função php nem nada do tipo, a única coisa estranha é uma linha de código em jquery

dannaya · 29/01/2013

onde tem que inserir a publicidade??

também serve com vídeos do Youtube??

anferro · 29/01/2013

Muito boa contribuição, obrigado!

xaiborweb · 29/01/2013

dannaya disse:
onde tem que inserir a publicidade??

também serve com vídeos do Youtube??

a publicidade, se você olhar no código, está claro, veja aqui

HTML:

<div id="publicidad-video">
	<IFRAME FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" WIDTH="300" HEIGHT="250" SRC="su publicidad"></IFRAME>

e serve para qualquer player porque é apenas css com as propriedades absolute e relative

- - - Atualizado - - -

anferro disse:
Muito boa contribuição, obrigado!

de nada brother, para isso estamos, para nos ajudarmos mutuamente

peelink · 29/01/2013

a verdade não consegui com blogger, tento colocar publicidade da adbooth iframe em cima de um vídeo vk e não consigo :ambivalence: já li tudo no google e a verdade é que não tem muita info, desisto, igual obrigado pela contribuição, com certeza sou eu que estou cometendo algum erro de novato :ambivalence:

xaiborweb · 29/01/2013

peelink disse:
a verdade é que não consigo com o blogger, tento colocar publicidade da adbooth iframe em cima de um vídeo vk e não consigo :ambivalence: já li tudo no google e a verdade é que não tem muita informação, desisto, de qualquer forma obrigado pela contribuição, com certeza sou eu que estou cometendo algum erro de novato :ambivalence:

bem brother, isso está estranho

1) imprima publicidade da adbooth em iframe de 300 x 250 e coloque em uma sidebar para ver se a publicidade aparece, porque parece que a publicidade em iframe está dando problemas

2) como você vê no meu código, utilizo duas linhas de script jquery

onmouseover="jQuery(this).hide('fast');jQuery('#asd1').show('slow')"
onclick="jQuery(this).parent().parent().remove();"

averigue se o blogger suporta essa linguagem

3) deixo aqui o meu código completo com a minha publicidade

HTML:

<div id="publicidad-video">
	<IFRAME FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" WIDTH="300" HEIGHT="250" SRC="http://yieldmanager.adbooth.net/st?ad_type=iframe&ad_size=300x250&section=4046667"></IFRAME>
	<span class="cerrar" onmouseover="jQuery(this).hide('fast');jQuery('#mover').show('slow')">cerrar</span>
	<div id="mover" style="display: none;"><span onclick="jQuery(this).parent().parent().remove();">cerrar</span></div>
	</div>	
	<iframe src="http://vk.com/video_ext.php?oid=198057043&id=164294950&hash=ca0131ef7fe7b297&hd=1" width="610" height="300" frameborder="0"></iframe>

css

HTML:

/**Publicidad sobre video**/
#publicidad-video{
	position: absolute;
	z-index: 1;
	width: 300px;
	height: 250px;
	margin: 20px 0px 0px 160px;
}
.cerrar{
	float: left; 
	left: 180px; 
	position: relative; 
	top: -210px; 
	z-index: 9999;
	background: #A90000;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	padding: 2px;
	cursor: pointer;
}
#mover{
	float: left; 
	position: relative; 
	top: -65px; 
	z-index: 9999;
	background: #A90000;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	padding: 2px;
	cursor: pointer;
}
#mover:hover {
background: #F00;
}

cabe esclarecer que eu tenho implementado no wordpress, mas me baseei neste site

4) tente ser esperto, que isso deve ser alguma besteira que você está fazendo errado

sorte e espero que consiga solucionar, qualquer coisa que não consiga, comente para ver o que pode ser feito, ok, abraços 🙂

bacanzito · 08/02/2013

boa contribuição, isso de colocar publicidade no player :encouragement:

Como implementar publicidade em qualquer player com uma aba de fechar

xaiborweb

jackemathe

xaiborweb

peelink

itxel

xaiborweb

Vika

lobogris

xaiborweb

almabasa

xaiborweb

Wext

DM200

xaiborweb

dannaya

anferro

xaiborweb

peelink

xaiborweb

bacanzito

Tópicos similares