Cara Pasang Iklan Sticky Pada Halaman Web Atau Blog

Iklan sticky yakni iklan yang melekat pada bab bawah atau bab atas layar pembaca, iklan jenis ini tidak akan bergerak mengikuti scroll jadi bila kau memakai instruksi iklan sticky maka iklan akan terus-terusan dilihat oleh pembaca.

 Iklan sticky yakni iklan yang melekat pada bab bawah atau bab atas layar pembaca Cara pasang iklan sticky pada halaman web atau blog

Disisi lain penggunaan iklan jenis ini akan dapat menciptakan pembaca salah fokus, bahkan tidak nyaman alasannya adanya iklan yang melekat pada layar ponsel mereka. Namun damai saja kita akan menciptakan tombol biar iklan jenis ini dapat dihilangkan dengan satu kali klik.

Sehingga bila pengunjung tidak menyukai iklan yang melekat pada layar mereka maka mereka dapat menghilangkanya dengan mudah, hanya perlu menekan tombol (x) saja.

Iklan sticky pada umumnya berukuran lebar 320 pixsel dan tinggi 50 pixsel (320×50) ada juga yang berukuran lebar 320 tinggi 100 pixsel. Namun 320×50 jauh lebih baik dibandingkan ukuran 300×100 yang iklanya mempunyai ukuran lebih besar sehingga dapat menciptakan 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 instruksi iklan diatas sudah kita sesuaikan untuk kodenya, dan dapat kau pasang pada template blog secara labgsung dalam sajian HTML atau ditambahkan dengan slot witget khusus. Jika kau ingin mengubah posisi iklan silakan ganti teks bottom dengan teks top

Read:  Mengatasi Persoalan Breadcrumbs Deprecated

Harga iklan menyerupai ini memang tidak tinggi tinggi cpcnya mengingat ukuran yang sangat kecil. Tapi iklan ads sticky sangat baik diterapka pada blog mu.
Kode diatas dapat kau terapkan untuk iklan

Baca juga cara membagi artikel ke beberapa halaman untuk menurunkan boubce rate

Kode Iklan Sticky Sidebar

Dan kalau yang ini yakni instruksi iklan sticky sidebar, dengan memakai javascript sticky ini kau tidak perlu menambahkan css apapun ke dalam instruksi dokumen HTML kamu. Tetapi sebelumnya perlu diketahui terlebih dahulu, dalam hal ini kita memakai javacsript sticky kit dan harus dikombinasikan dengan JQuery pastikan template blog kau sudah memakai jquery. Kalau belum kau dapat memakai 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, kau tambahkan instruksi javascript sticky diatas sempurna dibagian bawah halaman atau sebelum instruksi &lt/body>, lalu tambahkan id gres pada elemen yang melapisi sidebar id=”sidebar-sticky”. Tapi kalau sudah ada id nya kau gak perlu tambahin id lagi, tambahin aja div baru. Contoh sebagai berikut.

<div id="sidebar-sticky"> <!--Sidebar Disini --> </div>

Demikianlah instruksi iklan sticky dan cara menciptakan sticky sidebar kali ini semoga dapat bermanfaat teman-teman yang lagi mengedit template dan butuh source code.

Read:  Tips Menciptakan Halaman Post Safelink Sederhana

You May Also Like