Cara pasang iklan sticky pada halaman web atau blog
Iklan sticky adalah iklan yang menempel pada bagian bawah atau bagian atas layar pembaca, iklan jenis ini tidak akan bergerak mengikuti scroll jadi jika kamu menggunakan kode iklan sticky maka iklan akan terus-terusan dilihat oleh pembaca.
Disisi lain penggunaan iklan jenis ini akan bisa membuat pembaca salah fokus, bahkan tidak nyaman karena adanya iklan yang menempel pada layar ponsel mereka. Namun tenang saja kita akan membuat tombol agar iklan jenis ini bisa dihilangkan dengan satu kali klik.
Sehingga jika pengunjung tidak menyukai iklan yang menempel pada layar mereka maka mereka bisa menghilangkanya dengan mudah, hanya perlu menekan tombol (x) saja.
Iklan sticky pada umumnya berukuran lebar 320 pixsel dan tinggi 50 pixsel (320x50) ada juga yang berukuran lebar 320 tinggi 100 pixsel. Namun 320x50 jauh lebih baik dibandingkan ukuran 300x100 yang iklanya memiliki ukuran lebih besar sehingga bisa membuat pembaca merasa tidak nyaman.
Kode iklan sticky
Pada kode iklan diatas sudah kita sesuaikan untuk kodenya, dan bisa kamu pasang pada template blog secara labgsung dalam menu HTML atau ditambahkan dengan slot witget khusus. Jika kamu ingin mengubah posisi iklan silakan ganti teks bottom dengan teks top
Harga iklan seperti ini memang tidak tinggi tinggi cpcnya mengingat ukuran yang sangat kecil. Tapi iklan ads sticky sangat baik diterapka pada blog mu.
Kode diatas bisa kamu terapkan untuk iklan
JavaScript Jquery
JavaScript Sticky Kit
Cara menggunakanya cukup mudah, kamu tambahkan kode javascript sticky diatas tepat dibagian bawah halaman atau sebelum kode </body>, kemudian tambahkan id baru pada elemen yang melapisi sidebar id="sidebar-sticky". Tapi kalau sudah ada id nya kamu gak perlu tambahin id lagi, tambahin aja div baru. Contoh sebagai berikut.
Demikianlah kode iklan sticky dan cara membuat sticky sidebar kali ini semoga bisa bermanfaat teman-teman yang lagi mengedit template dan butuh source code.
Disisi lain penggunaan iklan jenis ini akan bisa membuat pembaca salah fokus, bahkan tidak nyaman karena adanya iklan yang menempel pada layar ponsel mereka. Namun tenang saja kita akan membuat tombol agar iklan jenis ini bisa dihilangkan dengan satu kali klik.
Sehingga jika pengunjung tidak menyukai iklan yang menempel pada layar mereka maka mereka bisa menghilangkanya dengan mudah, hanya perlu menekan tombol (x) saja.
Iklan sticky pada umumnya berukuran lebar 320 pixsel dan tinggi 50 pixsel (320x50) ada juga yang berukuran lebar 320 tinggi 100 pixsel. Namun 320x50 jauh lebih baik dibandingkan ukuran 300x100 yang iklanya memiliki ukuran lebih besar sehingga bisa membuat pembaca merasa tidak nyaman.
Kode iklan sticky
<div style="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:0px; left: 0; width: 100%; z-index: 99999; 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: 2px; padding-bottom: 2px; transition: all .4s ease-in-out;" id="sticky-ad">
<button aria-label="Close this ad" class="sticky-ad-close-button" onclick="document.getElementById('sticky-ad').style.display='none'" style="position: absolute; width: 28px; height: 28px; top: -28px; right: 0; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2); border: none; border-radius: 12px 0 0 0; cursor: pointer;"></button>
<!-- KAMU BISA MELETAKAN IKLAN DISINI -->
</div>Pada kode iklan diatas sudah kita sesuaikan untuk kodenya, dan bisa kamu pasang pada template blog secara labgsung dalam menu HTML atau ditambahkan dengan slot witget khusus. Jika kamu ingin mengubah posisi iklan silakan ganti teks bottom dengan teks top
Harga iklan seperti ini memang tidak tinggi tinggi cpcnya mengingat ukuran yang sangat kecil. Tapi iklan ads sticky sangat baik diterapka pada blog mu.
Kode diatas bisa kamu terapkan untuk iklan
- Adsense
- Banner Admob
- Ylix
- Penjualan Slot Banner
- MGid (harus diformat)
Kode Iklan Sticky Sidebar
Dan kalau yang ini adalah kode iklan sticky sidebar, dengan menggunakan javascript sticky ini kamu tidak perlu menambahkan css apapun ke dalam kode dokumen HTML kamu. Tetapi sebelumnya perlu diketahui terlebih dahulu, dalam hal ini kita menggunakan javacsript sticky kit dan harus dikombinasikan dengan JQuery pastikan template blog kamu sudah menggunakan jquery. Kalau belum kamu bisa menggunakan script jquery versi berapa saja atau versi jquery 3.7.7 min dibawah ini:JavaScript Jquery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>JavaScript Sticky Kit
<script type='text/javascript'>
//<![CDATA[
/*
Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
*/
(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));
if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("<div />"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q,
u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),
h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky_kit:unstick")),B&&(b=f.height(),u+q>b&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),
a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",
y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n<K;n++)d=this[n],J(b(d));return this}}).call(this);
//]]>
</script>
<script>
//<![CDATA[
jQuery(document).ready(function(){var i=jQuery(window).width();function e(){jQuery("#sidebar-sticky").stick_in_parent({parent:"#wrapper",offset_top:4})}i<768?jQuery("#sidebar-sticky").trigger("sticky_kit:detach"):e(),jQuery(window).resize(function(){(i=jQuery(window).width())<768?jQuery("#sidebar-sticky").trigger("sticky_kit:detach"):e()})});
//
//]]>
</script> Cara menggunakanya cukup mudah, kamu tambahkan kode javascript sticky diatas tepat dibagian bawah halaman atau sebelum kode </body>, kemudian tambahkan id baru pada elemen yang melapisi sidebar id="sidebar-sticky". Tapi kalau sudah ada id nya kamu gak perlu tambahin id lagi, tambahin aja div baru. Contoh sebagai berikut.
<div id="sidebar-sticky">
<!--Sidebar Disini -->
</div>Demikianlah kode iklan sticky dan cara membuat sticky sidebar kali ini semoga bisa bermanfaat teman-teman yang lagi mengedit template dan butuh source code.