Ads Kiri Khusus Desktop

Cara memasang iklan parallax pada blog AMP Dan Non AMP

Generating Link...
Cara buat iklan parallax background - Sebenarnya iklan parallax ini banyak diterapkan ditemplate AMP atau khusus pengguna Template blog AMP, namun dikarnakan masih banyak blog yang belum menggunakan ataupun menerapkan AMP pada blognya dan ingin mencoba menerapkanya juga pada blog non amp jadi Pada kesempatan kali ini saya akan mencoba untuk membahas tentang cara membuat iklan parallax di blogger baik pada template AMP Maupun Template Non AMP. 

Cara memasang iklan parallax pada blog 

Iklan parallax ini bentuknya seperti background, jadi tidak sedikit juga yang menyebutnya sebagai iklan background, iklan menempel di background, ataupun iklan background yang muncul saat di scroll. Menurut saya Dengan memasang iklan parallax di blog dan tentunya di tambah dengan penempatan yang tepat itu selain dapat menambah CTR, blog juga akan terlihat semakin keren, dan profesional. Biasanya iklan jenis ini akan menggunakan iklan tinggi, sementara area untuk melihat iklannya berupa kotak dengan ukuran 300x250. Dengan begitu, iklan tinggi (160x600, 180x600, 300x600) dapat ditampilkan tanpa menghabiskan area di mana iklan diletakan dengan ukuran 300x250. Cara ini saya dapatkan di berbagai sumber seperti mahesa, kompi ajaib dn sayapun menerapkan pada blog ini, untuk contohnya sobat bisa lihat di awal postingan ini ataupun gambar dibawah ini


Lalu bagai mana cara membuat iklan parallax? 

Nah, untuk sobat yang penasaran tentang cara membuat dan menerapkan iklan parallax di blog AMP Ataupun Non AMP, simak aja ulasanya di bawah ini.

# 1. Memasang iklan Parallax pada Blog AMP

  • Buka Dasboard Blogger dan pilih Edit HTML
  • Letakkan js amp-fx-flying-carpet di atas kode </head>
 <script async="async" custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script> 
  • Copy dan letakkan kode HTML berikut di atas <div class='post-body entry-content' 
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='above_post'>
<amp-fx-flying-carpet height='250px'>
<amp-ad data-ad-client='xxxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' height='600' layout='fixed' type='adsense' width='300'>
</amp-ad>
</amp-fx-flying-carpet>
</div>
</b:if>
  • Tambahkan CSS di bawah ini pada style amp-custom untuk halaman postingan
 .above_post {
padding-top: 8px;
width: 300px;
margin: 0 20px 5px 0;
display: inline;
float: left
}

@media screen and (max-width:414px) {
.above_post {
padding-top: 10px;
width: 100%;
height: auto;
margin: 0 0 10px;
display: block;
float: none
}
}
  • Simpan Themplat dan silahkan lihat hasilnya

# 2. Memasang iklan Parallax pada Blog Non AMP

  • Seperti biasa masuk ke Dasboard Blogger dan pilih Edit HTML
  • Letakkan kode di bawah ini di atas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
position: relative;
overflow: visible;
width: 300px;
height: 250px;
margin-right: 20px;
display: inline-block;
float: left;
z-index: 9999;
}
.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: 100%;
height: 100%;
position: fixed;
top: 0;
margin: 0 auto;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.paralax_div > div > div > div {
width: 100%;
height: 100vh;
position: absolute;
left: 50%;
top: 0;
border: none;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
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: 0;
margin-top: 0;
}
.paralax_div > div > div > div > a {
width: 100%;
height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
height: 600px;
width: 300px;
}
.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;
text-align: center;
}
.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%;
height:600px;
}
}
/*]]>*/
</style>
</b:if>
  • Simpan kode di bawah ini tepat di atas kode <div class='post-body entry-content' ........
<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>
Untuk iklan banner (dengan tinggi 600px dan lebar 300px), silahkan ganti url gambar pada kode di atas.

Untuk iklan dengan iframe atau adsense (iklan 300x600), silahkan ganti tag <img> di atas dengan kode iklan sobat
  • What is Linku?

    safelinku is the security website link or shortener url, you can make your own short link on Linku.ml for free

  • What is Shortener url?

    As the name implies, shortlink or is a short link. Usually these shortlinks are provided by most advertising-based companies, such as Linku.ml and much more. Shortlink own point to shorten a link or url, be it a download link or url to a particular website. For what? of course for easy to remember. For example, I have a link "http: //site*.com/profile.php? HGgyawewihjassd", now I ask, are you easy to memorize the url? there is a once read already memorized and also there are many times read not memorized. Now I try to shorten the url into Linku.ml/iuYS which is shorter and easier to know even though it is a bit complicated, you can customize the shortened url Shortlink or url shortener is very easy to use by its users, because you do not spend a bit, even you who get money.

Ads Kanan Khusus Desktop