Tutorial: Como colocar publicidade nos seus vídeos com opção de fechar

  • Autor Autor RaulOrCase
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
R

RaulOrCase

Préstamo impago
Gamma
Que tal compañeros, hoy les mostrare como poder poner un Anuncio/Publicidad encima de los vídeos en su web en especial si es una web de películas.

Primero el RESULTADO!

yyfxy.jpg

Como pueden ver este tiene un botón de cerrar, este es totalmente modificable al igual que el resto del código :encouragement:

Primero vamos al editor de nuestra plantilla y despues de </b:skin> agregamos lo siguiente:

Inserir CODE, HTML ou PHP: 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>

  #bttcerrar{
  background: #0F0F0F;
  margin-top: 10px;
  height: 20px;
  border-radius: 5px;
  width: 25px;
  margin-left: 10px;
  padding-top: 3px;
  position: absolute;
}

  #pubvids{
position: absolute;
  padding: 10px;
  left: 188px;
  top: 35px;
  width: 300px;
  height: 250px;
  background: #000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #131313;
  border-bottom: solid 2px #808080;
}

  #pubvids2{
position: absolute;
  padding: 10px;
  left: 188px;
  top: 35px;
  width: 300px;
  height: 250px;
  background: #000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #131313;
  border-bottom: solid 2px #808080;
}

  #pubvids3{
position: absolute;
  padding: 10px;
  left: 188px;
  top: 35px;
  width: 300px;
  height: 250px;
  background: #000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #131313;
  border-bottom: solid 2px #808080;
}

  #pubvids4{
position: absolute;
  padding: 10px;
  left: 188px;
  top: 35px;
  width: 300px;
  height: 250px;
  background: #000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #131313;
  border-bottom: solid 2px #808080;
}

  #pubvids5{
position: absolute;
  padding: 10px;
  left: 188px;
  top: 35px;
  width: 300px;
  height: 250px;
  background: #000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #131313;
  border-bottom: solid 2px #808080;
}

  #pubvids6{
position: absolute;
  padding: 10px;
  left: 188px;
  top: 35px;
  width: 300px;
  height: 250px;
  background: #000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #131313;
  border-bottom: solid 2px #808080;
}

  #pubvids6{
position: absolute;
  padding: 10px;
  left: 188px;
  top: 35px;
  width: 300px;
  height: 250px;
  background: #000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #131313;
  border-bottom: solid 2px #808080;
}

.oculto {display:none}
  </style>
</b:if>

Ahora para agregarlo a nustros videos les dejo una plantilla que deben usar para ligar esto:
Inserir CODE, HTML ou PHP: 
<br />
<br />
<div style="text-align: center;">
<b><span style="font-size: large;">OPCION #
</span></b></div>
<div style="position: relative;">
<div id="pubvids">
<div id="bttcerrar">
<a class="cerrar" href="javascript:void(0);" onclick="document.getElementById('pubvids').className = 'oculto'"><img src="http://i.imgur.com/V5bbSCu.png" /></a></div>
<div id="contenedor">
<div class="contenido">
[COLOR="#FF0000"]//**ANUNCIO DISEÑADO PARA 300X250**//[/COLOR]
       </div>
</div>
</div>
<div>
<center>
[COLOR="#FF0000"]//** CODIGO DE REPRODUCTOR DISEÑADO PARA 626x367**//[/COLOR]
</center>
</div>
</div>

Con esto ya tendriamos un reproductor con un anuncio agregado, ahora si lo que desean es agregar mas de 1 reproductor en la misma entrada solo deben agregar la plantilla anterior justo abajo y cambiar el pubvids que se encuentra dentro del codigo para cerrar el anuncio.

Ejemplo de como quedarian varios reproductores:
Inserir CODE, HTML ou PHP: 
<br />
<br />
<div style="text-align: center;">
<b><span style="font-size: large;">OPCION #
</span></b></div>
<div style="position: relative;">
<div id="[COLOR="#FF0000"]pubvids[/COLOR]">
<div id="bttcerrar">
<a class="cerrar" href="javascript:void(0);" onclick="document.getElementById('[COLOR="#FF0000"]pubvids[/COLOR]').className = 'oculto'"><img src="http://i.imgur.com/V5bbSCu.png" /></a></div>
<div id="contenedor">
<div class="contenido">
//**ANUNCIO DISEÑADO PARA 300X250**//
       </div>
</div>
</div>
<div>
<center>
//** CODIGO DE REPRODUCTOR DISEÑADO PARA 626x367**//
</center>
</div>
</div>
<br />
<br />
<div style="text-align: center;">
<b><span style="font-size: large;">OPCION #
</span></b></div>
<div style="position: relative;">
<div id="[COLOR="#FF0000"]pubvids2[/COLOR]">
<div id="bttcerrar">
<a class="cerrar" href="javascript:void(0);" onclick="document.getElementById('[COLOR="#FF0000"]pubvids2[/COLOR]').className = 'oculto'"><img src="http://i.imgur.com/V5bbSCu.png" /></a></div>
<div id="contenedor">
<div class="contenido">
//**ANUNCIO DISEÑADO PARA 300X250**//
       </div>
</div>
</div>
<div>
<center>
//** CODIGO DE REPRODUCTOR DISEÑADO PARA 626x367**//
</center>
</div>
</div>
<br />
<br />
<div style="text-align: center;">
<b><span style="font-size: large;">OPCION #
</span></b></div>
<div style="position: relative;">
<div id="[COLOR="#FF0000"]pubvids3[/COLOR]">
<div id="bttcerrar">
<a class="cerrar" href="javascript:void(0);" onclick="document.getElementById('[COLOR="#FF0000"]pubvids3[/COLOR]').className = 'oculto'"><img src="http://i.imgur.com/V5bbSCu.png" /></a></div>
<div id="contenedor">
<div class="contenido">
//**ANUNCIO DISEÑADO PARA 300X250**//
       </div>
</div>
</div>
<div>
<center>
//** CODIGO DE REPRODUCTOR DISEÑADO PARA 626x367**//
</center>
</div>
</div>

Y asi podran agregar hasta 6 reproductores con su anucio por entrada y lo que desean es agregar mas primero debes regresar al CSS en su editor de plantilla y agregar justo abajo del grupo #pubvids6 lo siguiente:
Inserir CODE, HTML ou PHP: 
  #pubvids7{
position: absolute;
  padding: 10px;
  left: 188px;
  top: 35px;
  width: 300px;
  height: 250px;
  background: #000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #131313;
  border-bottom: solid 2px #808080;
}
  #pubvids8{
position: absolute;
  padding: 10px;
  left: 188px;
  top: 35px;
  width: 300px;
  height: 250px;
  background: #000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #131313;
  border-bottom: solid 2px #808080;
}
  #pubvids9{
position: absolute;
  padding: 10px;
  left: 188px;
  top: 35px;
  width: 300px;
  height: 250px;
  background: #000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #131313;
  border-bottom: solid 2px #808080;
}

Y seguir asi hasta la cantidad que quieran.

Bueno compañeros, espero esto les sea util en especial para las personas que tiene su web de Peliculas en Blogger... SALUDOS!
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
Me gusta! En vez del anuncio se puede cambiar por un boton de like o share? Gracias
 
lcascisf disse:
Me gusta! En vez del anuncio se puede cambiar por un boton de like o share? Gracias
Clique para expandir...

Claro, donde dice //** CODIGO DE REPRODUCTOR DISEÑADO PARA 626x367**// aqui es donde puede agregar lo que deseas... :encouragement:
 
Muy buen tutorial compañero.

Adsense no permite esto cierto?

saludos!
 
Funciona en blogger?
 
Mira que bien probare haber si me sale igual aun que no creo lo veo algo complicado para mi :encouragement:😎
 
Buen tutorial amigo, saludos 🙂
 
A probar, muchas gracias :encouragement:
 
[MENTION=121546]RaulOrCase[/MENTION] A favoritos, muchas gracias por el tutorial 🙂
 
funciona para wordpreees?? y como lo pongo?
 
gracias:sorrow:
 
Es legal para adsense???
 
gracias por el tutorial me ha funcionado muy bien
 
Hola gracias por el tutorial :encouragement:. Este tipo de cosas es legal para adsense?
 
Você precisa estar logado ou cadastrado para responder aqui.

Tópicos similares

F
Como colocar publicidade flutuante em meu site
Respostas
1
Visitas
92
Marketing Caribe
M
M
Como colocar publicidade nativa da Exoclick no meu site
Respostas
9
Visitas
418
osmary8a
O
BusinessTrisha
Como colocar publicidade invisível e flutuante no meu site
Respostas
6
Visitas
584
BusinessTrisha
BusinessTrisha
U
Como colocar publicidade da StartApp no meu app de Unity
Respostas
1
Visitas
413
BotBeta
BotBeta
M
CPA / Afiliados Como colocar publicidade nas publicações da minha página
Respostas
5
Visitas
3K
Miss Lane
M
Voltar
Topo