Box para publicidades

 Fala aí gente, aqui é o Anon e hoje venho trazer mais um tutorial pra vocês! E no tutorial de hoje estarei ensinando a como fazer um box dedicado à publicidades.. confira na demonstração:

Demonstração
Download da PSD

 Bem, primeiramente, precisaremos instalar o script de "ocultar" o player de vídeo. Busque por:

]]></b:skin>

 E abaixo coloque o seguinte código:

<style type='text/css'>.shown{display:block}</style><script type='text/javascript'>document.write(&#39;<style>.texthidden{display:none} </style>&#39;);</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className==&quot;shown&quot;) {whichpost.className=&quot;texthidden&quot;;}else {whichpost.className=&quot;shown&quot;;}}</script>

 Pronto, agora o CSS (acima de ]]></b:skin>):

/* Box publicitário | Design On SPACE
----------------------------------------------- */
.box-pub{
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMcGGTv5bfa6eRuclzWLSlaJ2-kMImBwuGnQ389wi-ztQgkExDqnYNQd3lSpCrZr0fUvIm6NB8XEJ5OHndFvco3FD0agnwtFxoOXWotzfoNCBDyNaE0Y3DFDcCsN-0mJDknc0XTq8xlv5/s1600/BOX.png)no-repeat; /*-imagem do fundo da publicidade-*/
  width:634px; /*-largura-*/
  height:431px; /*-altura-*/
  margin:0 auto;
 }
.pub img{
  width:300px; /*-largura do banner-*/
  height:250px; /*-altura do banner-*/
  margin:14px 0 0 181px;
 }
.ivideo a{
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-ZD7gfBRVewh8LrEG3r-5ySSwoO8fTU-gRvlsVNadd4R9EviWUA09I_XEo0cAlKQQZPLmvDKhFFqOLRbQz9s5EusSoLh9IIYbYG9cngGmnmqkoAqj15GwSXc1JLGq4hI_dDeciswibfD/s1600/ONline.png)no-repeat; /*-botão "assistir online"-*/
  width:301px; /*-largura do botão-*/
  height:57px; /*-altura do botão-*/
  margin:0 0 0 185px; /*-posicionamento do botão-*/
  -webkit-transition: All 0.3s ease;
  -moz-transition: All 0.3s ease;
  -o-transition: All 0.3s ease;
  font-size:0px;
  display:block;
 }
.ivideo a:hover{
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioEnmFeC-5_dx9xUc4Gy_RtbrsV7UYwEzZhGYpKD70yWqp4sGxmlRV46pqvAePojYok8DdI7ZrvFZmj2-7-ai3wCS8XV_YWCHcdJX-PezDxtsElcwNd-ybfpcnh9s4lyxgiXyjecIfhGCJ/s1600/Hover+online.png)no-repeat; /*-botão ao passar o mouse-*/
  width:301px; /*-largura do botão-*/
  height:57px; /*-altura do botão-*/
  -webkit-transition: All 0.3s ease;
  -moz-transition: All 0.3s ease;
  -o-transition: All 0.3s ease;
 }
.videop{
  position:absolute;
  top:134px;/*-posicionamento do player-*/
  left:530px;/*-posicionamento do player-*/
 }

 Agora só resta editar seguindo as instruções à frente de cada propriedade. Agora vamos ao código pra se usar este box:

<div class='box-pub'>
<div class='pub'>
<img src='LINK DO BANNER'/></div>
<div class='ivideo'>
<a href="javascript:void(0);"onclick="expandcollapse('video01')">Assistir a porra do vídeo</a></div>
<div class='videop'><div id="video01" class="texthidden">CÓDIGO DO PLAYER</div>
</div>
</div>

Notas importantes:

Bom, como já disse numa postagem anterior, este script é necessário sempre um código diferente. Onde está "video01" é onde será alterado a cada vez que usares este box. Exemplo:

<div class='box-pub'>
<div class='pub'>
<img src='LINK DO BANNER'/></div>
<div class='ivideo'>
<a href="javascript:void(0);"onclick="expandcollapse('video01')">Assistir a porra do vídeo</a></div>
<div class='videop'><div id="video01" class="texthidden">CÓDIGO DO PLAYER</div>
</div>
</div>


<div class='box-pub'>
<div class='pub'>
<img src='LINK DO BANNER'/></div>
<div class='ivideo'>
<a href="javascript:void(0);"onclick="expandcollapse('video02')">Assistir a porra do vídeo</a></div>
<div class='videop'><div id="video02" class="texthidden">CÓDIGO DO PLAYER</div>
</div>
</div>


<div class='box-pub'>
<div class='pub'>
<img src='LINK DO BANNER'/></div>
<div class='ivideo'>
<a href="javascript:void(0);"onclick="expandcollapse('video03')">Assistir a porra do vídeo</a></div>
<div class='videop'><div id="video03" class="texthidden">CÓDIGO DO PLAYER</div>
</div>
</div>