CARA MEMBUAT IKLAN PARALLAX DIAM KETIKA POSTINGAN DI SCROLL

<b:if cond='data:blog.pageType == "item"'>

Posted by KAWULO ALIT on

Memasang iklan efek diam walaupun postingan di scroll ke Atas. Iklan ini biasanya di sebut iklan parallax. Untuk penempatan iklan parallax biasanya di bagian atas samping postingan blog. Nah kali ini blog ini akan memberikan informasi pembelajaran tentang Coding yaitu pemasangan iklan parallax di blogspot atau blogger.

Untuk ukuran iklan yang biasanya di pakai yaitu ukuran 300×600. Bagi kalian yang ingin memasang nya simak di bawah ini mengenai tutorial memasang script iklan parallax di postingan blog.

Langkah langkah:

1). Masuk ke akun blogger

2). Masuk Tema/ Template- Edit HTML

3). Ketikan CTRL+F dan cari kode <head>.

Copy dan pastekan kode di bawah ini tepat di bawah Kode <head>.



 <b:if cond='data:blog.pageType == &quot;item&quot;'>






<style type='text/css'>
/*<![CDATA[*/



  overflow: visible;




.paralax_div {

  position: relative;
  width: 300px;


  display: inline-block;




  height: 250px;

  margin-right: 20px;


.paralax_div > div {




  float: left;

  z-index: 9999;
}



  overflow: hidden;


  position: absolute;




  width: 100%;

  height: 100%;
  margin: 0;



.paralax_div > div > div {
  top: 0;


  left: 0;

  clip: rect(auto auto auto auto);
}




  top: 0;




  width: 100%;

  height: 100%;

  position: fixed;


  -webkit-transform: translateZ(0);




  margin: 0 auto;

  -moz-transform: translateZ(0);


  transform: translateZ(0);




  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);

  position: absolute;
}




.paralax_div > div > div > div {
  width: 100%;


  top: 0;
  height: 100vh;


  left: 50%;




  -ms-transform: translateX(-50%);




  border: none;

  -moz-transform: translateX(-50%);

  -webkit-transform: translateX(-50%);


  display: -ms-flexbox;




  -o-transform: translateX(-50%);
  transform: translateX(-50%);


  display: flex;
  display: -webkit-flex;





  align-items: center;




  -webkit-align-content: center;
  align-content: center;


  -ms-flex-align: center;
  -webkit-align-items: center;



  background: #ddd;

}



}




.paralax_div > div > div > div > * {
  margin: 0;

  margin-top: 0;

}



.paralax_div > div > div > div > a {
  width: 100%;

  height: 100vh;




  .paralax_div {




.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;

  width: 300px;

}

.clear {


@media screen and (max-width:640px) {
  clear: both;

  display: block

}



    width: 100%;



    -ms-transform: translateX(-50%);




    height: 250px;

    margin: 0 auto;
    float: none;


  .paralax_div > div > div > div {
  }


    left: 50%;


    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);




    width:auto;




    -o-transform: translateX(-50%);
    transform: translateX(-50%);


    width: 100%;
  }

  .paralax_div > div > div {



  }
    left:0;

    text-align: center;



    max-width:100%;
  .paralax_div img {

    margin: 0 auto;





</b:if> 




    height:auto;
  }

}


@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {


    height:600px;
    margin: 0 auto;

    width:100%;


  }

}

/*]]>*/

</style>

4). Selanjutnya tekan CTRL+F Cari kode <div class='post-body entry-content'.

Copy kode di bawah dan pastekan tepat di atas kode tersebut.

<b:if cond='data:blog.pageType == "item"'>

<div class="paralax_div">

<div>

    <div>

      <div>

        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_f8VXbTJqyRpYiMbOFvtXtVKzY61Fwb4fEWeKBYcEzdSx4MJbB9v3Ru6trHZNZFTnnoGvST4ynMcEpE4nksgFoNgpp0TVEK4c5ecS6iB2Z5Rbug0CYPYJIpj6N3r5xmSf_ig8WRLLHXb-/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />

      </div>

    </div>

</div>

<span class="clear"/>

</div>

</b:if>

5). Ganti kode

Baca Juga

CARA MEMBUAT IKLAN PARALLAX DIAM KETIKA POSTINGAN DI SCROLL

Baca Juga

0 Comment for "CARA MEMBUAT IKLAN PARALLAX DIAM KETIKA POSTINGAN DI SCROLL"

Baca Juga

CARA MEMBUAT IKLAN PARALLAX DIAM KETIKA POSTINGAN DI SCROLL

Baca Juga

Previous

Next

0 Comment for "CARA MEMBUAT IKLAN PARALLAX DIAM KETIKA POSTINGAN DI SCROLL"