Tutorial: Cómo poner publicidad en tus vídeos con opción de cerrar

  • Autor Autor RaulOrCase
  • Fecha de inicio Fecha de inicio
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:

Insertar CODE, HTML o 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:
Insertar CODE, HTML o 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:
Insertar CODE, HTML o 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:
Insertar CODE, HTML o 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!
 
Me gusta! En vez del anuncio se puede cambiar por un boton de like o share? Gracias
 
lcascisf dijo:
Me gusta! En vez del anuncio se puede cambiar por un boton de like o share? Gracias
Hacer clic 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?
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

F
Cómo poner publicidad flotante en mi sitio web
Respuestas
1
Visitas
92
Marketing Caribe
M
M
Cómo poner publicidad nativa de exoclick en mi sitio web
Respuestas
9
Visitas
418
osmary8a
O
BusinessTrisha
Cómo poner publicidad invisible y flotante en mi sitio web
Respuestas
6
Visitas
584
BusinessTrisha
BusinessTrisha
U
Cómo poner publicidad de StartApp en mi app de Unity
Respuestas
1
Visitas
413
BotBeta
BotBeta
M
CPA / Afiliados Cómo poner publicidad en las publicaciones de mi página
Respuestas
5
Visitas
3K
Miss Lane
M
Atrás
Arriba