Parallax Publicidade em modelos de blogger

Parallax Publicidade em modelos de blogger

Demo 

Hoje vamos compartilhar um tutorial de Adhy Suryadi isso é o efeito parallax em publicidades que ao rolar a pagina podemos ver isso com se fosse uma layer sobre a publicidade pode ser utilizado para banners e aumentar também a taxa de cliques devido ao efeito parallax se você deseja adicionar no seu template siga os passos abaixo:



Adicionando efeito Parallax blogger publicidade:


Faça login no template do blogger então vá no menu tema então Editar/Html/JavaScript com as teclas combinadas CTRL+F busque por </head> então acima disso copie e cole o código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  float: left;
}

.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}

.paralax_div > div > div {
  width: 300px;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0 auto;
}

.paralax_div > div > div > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  border: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #ddd;
}

.paralax_div > div > div > div > * {
  margin: auto;
  margin-top: 0;
}

.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px!important;
  width: 300px!important;
}

.clear {
  clear: both;
  display: block
}

@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 250px;
    margin: 0 auto;
    float: none;
  }
  .paralax_div > div > div > div {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .paralax_div > div > div {
    width: 100%;
    left:0;
  }
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:auto;
  }
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%!important;
    height:600px!important;
  }
}
/*]]>*/
</style>
</b:if>

Então busque pelo código 

<div class='post-body entry-content' ........

E logo acima adicione o seguinte código:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="https://4.bp.blogspot.com/-JpV04y4MQwM/WTITSODPw-I/AAAAAAAArd4/KKuyWD3QGuADLhqSj2Oif781jK4xrnNjQCLcB/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />
      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>


Obs: Você pode modificar a foto do banner bem como o tamanho para ajustar conforme desejar no realçado em amarelo

Click to comment