.
.
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 == "item"'>
<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 == "item"'>
<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
