domingo, 6 de diciembre de 2015

Anuncio/Publicidad encima de tus vídeos | Con opción de cerrar

Banner de Publicidad encima de los videos


Buenas tardes, hoy os vamos a enseñar a como colocar un "Banner" o "Publicidad" en medio de un reproductor de video... es decir (Encima de los videos)




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



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



<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:

<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">
//**ANUNCIO DISEÑADO PARA 300X250**//
       </div>
</div>
</div>
<div>
<center>
//** CODIGO DE REPRODUCTOR DISEÑADO PARA 626x367**//
</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:

 #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 útil en especial para las personas que tiene su web de Películas en Blogger... SALUDOS!

1 comentarios: