Panduan Tutorial Cara Mudah Memasang Iklan Sticky Media.Net

Memasang Iklan Sticky Media.Net. Pada umumnya Iklan Sticky digunakan dan hanya dikhususkan untuk menampilkan Google AdSense, saya sendiri hampir belum pernah menemui Iklan Sticky dengan Banner Iklan yang berasal dari selain Iklan Google AdSense.

Maka dari itu saya mencoba membuat dan memunculkan hal baru yaitu dengan mengubah fungsi dari Iklan Sticky yang pada umumnya hanya digunakan untuk menampilkan Iklan Google AdSense menjadi tempat untuk menampilkan Iklan dari Jaringan Penyedia Iklan Lainnya. Seperti sebelumnya saya sudah berhasil uji coba dan membuat tutorial bagaimana caranya agar dapat memasang iklan Banner Affiliate Sticky. Sebagai bahan percobaan saya menggunakan Banner Iklan Affiliate DomaiNesia, bagi Anda penasaran dan tertarik untuk mencobanya silahkan baca postingan saya sebelumnya mengenai: Cara Memasang Iklan Sticky Selain AdSense Template Non AMP

Untuk selanjutnya disini saya akan membaha Tutorial bagaimana Cara Memasang Banner Iklan Sticky Media.Net salah satu Jaringan Penyedia Iklan yang sudah populer dengan tingkat CPCnya yang Tinggi dan bisa dikatakan sejajar atau bahkan melebihi Google AdSense.

Namun sayangnya untuk dapat bergabung menjadi Publisher Iklan Media.Net tidaklah mudah. Terbukti dengan sedikitnya Blog milik Blogger Indonesia yang menjadi Publisher Iklan Media.Net. Bahkan banyak yang bertanya dan merasa penasaran ingin melihatnya ketika saya membahas tentang Media.Net di forum. Banyak yang mengatakan baru pertama kalinya seumur hidup melihat Banner Iklan Media.Net secara Real melalui Blog saya.

Untuk lebihnya, sebenarnya seperti apa ya tampilan Iklan Sticky Media.Net, berikut ini tampilan Iklan Media.Net dalam bentuk Sticky di Blog saya Blogger SEO Knowledge:



Bagaimana menurut Anda? keren sekali Bukan? belum lagi Iklan Media.Net tambah menyatu dan bersahabat dengan Google AdSense. Sayangnya Blog dengan Konten Bahasa Inggris saya ini masih sedikit visitornya. Karena mungkin terkendala kurangnya mengusai bahasa inggris, saya hanya memanfaatkan Alat Penerjemah bahasa dalam membuat konten sehingga mungkin saja kwalitas penggunaan bahasa dan susunan katanya sangat jauh dari kata SEO Friendly.

Baca Juga: Tutorial Cara Mengaktifkan Account Publisher Media.Net Aproved

Cara Memasang Banner Iklan Sticky Media.Net

Perlu diketahui bahwa Banner Iklan Sticky Media.Net secara otomatis hanya tampil di perangkat mobile seperti Android dan untuk pengguna Dekstop atau komputer agar Iklan Sticky Media.Net dapat ditampilkan harus dibuat secara manual, berikut ini caranya:

1. Buka Dashboard Blogger, pilih menu Tema kemudian Klick EDIT HTML

2. Salin Kode CSS Sticky berikut ini kemudian tempelkan di atas </style> atau diarea yang berdekatan dengan kumpulan kode CSS Template.

 

/*<![CDATA[*/
.sticky-ad {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: visible;
  position: fixed;
  text-align: center;
  bottom: -104px;
  left: 0;
  width: 100%;
  z-index: 999;
  max-height: 104px;
  background-image: none;
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
  padding-top: 4px;
  transition: all .4s ease-in-out;
}
.sticky-ad-close-button {
  position: absolute;
  width: 28px;
  height: 28px;
  top: -28px;
  right: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
  background-size: 13px 13px;
  background-position: 9px;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 12px 0 0 0;
  cursor: pointer;
}
.sticky-ad-close-button:before {
  position: absolute;
  content: "";
  top: -20px;
  right: 0;
  left: -20px;
  bottom: 0;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:active,
:focus {
  outline: 0
}
/*]]>*/

Apabila kalian tidak faham yang mana kode CSS Template, cari dan temukan susunan dan tampilan kode yang mirip dengan Code CSS Sticky seperti tampak pada screenshot di atas.

3. Salin Kode pemanggil Sticky berikut ini dan letakkan di bawah <body> atau di atas </body> 

 

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'><style>/*<![CDATA[mankoin.com*/

.sticky-ad{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:visible;position:fixed;text-align:center;bottom:0;left:50%;width:736px;z-index:995;max-height:104px;background-image:none;background-color:rgba(255,255,255,.7);box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;display:none;margin-left:-368px}

 .sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:13px 13px;background-position:9px;background-color:rgba(255,255,255,.7);background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:12px 12px 0 0;cursor:pointer}

 /*]]>*/</style><div class='sticky-ad' id='sticky-ad'> 
------------Tempelkan Script Kode Iklan Media.Net Disini-----------------
<a alt='' border='0' height='90' style=' _width:728px; _height:90px; _overflow:hidden; border:1px solid #000000;margin:-1px;' width='728'> <button aria-label='Close this ad' class='sticky-ad-close-button' onclick='this.parentElement.style.position=&apos;relative&apos;;this.style.display=&apos;none&apos;;'/></a></div> <script>//<![CDATA[
 function stickyAd(){var e=document.getElementById("sticky-ad");300<window.pageYOffset&&(e.style.display="block",window.removeEventListener("scroll",stickyAd))}window.addEventListener("scroll",stickyAd);//]]></script></b:if>

Hasilnya seperti tampak pada screenshot di bawah ini:


4. Login ke Akun Publisher Media.Net untuk membuat Iklan Sticky dengan ukuran Width 728px Heigh 90px



5. Buat Unit Iklan Media.Net melalui menu Ad Units kemudian Klick menu Add New dengan ketentuan ukuran Widht 728px Heigh 90px



6. Salin Kode Script pada jendela Head kemudian tempelkan di bahwah kode <head> melalui EDIT HTML Tema di Dashboard Blogger.



4. Salin Script Kode Iklan jendela Body dan Tempelkan Kode Banner Iklan Media.Net di are penempatan script kode iklan seperti tampak pada screenshot di bawah ini:


5. Klick Simpan Tema untuk menerapkan, dan pemasangan Iklan Sticky Media.Net selesai dan berhasil. Silah coba lihat hasilnya dengan membuka halaman home page Blog Anda.

Baca Juga: Cara Pasang Iklan Ambassador Program Media.Net

Demikianlah Panduan Tutorial Cara Mudah Memasang Banner Iklan Sticky Media.Net di Blog dengan Template Non-AMP. Dengan cara ini Iklan Sticky Media.Net akan tampil di browser pengguna Dekstop Komputer dan Laptop. Semoga mudah dimengerti dan dipraktikkan, jangan lupa untuk meninggalkan jejak dengan cara like FansPage, Subscribe Channel dan share.