Cara Membuat Popup Banner Dengan CSS Dan Timeout Javascript

Kangentot - Cara Membuat Popup Banner Dengan CSS Dan Timeout Javascript. Kebetulan besok umat muslim akan menjalani puasa selama 1 bulan penuh, maka hari ini kita akan membuat popup banner untuk ucapan Marhaban ya Ramadhan dengan CSS dan Javascript untuk timeout atau jeda kemunculannya. Trik ini juga bisa digunakan untuk slot iklan popup banner bila ada advertiser yang menginginkan slot iklan jenis popup banner.

Popup banner ini akan muncul setelah pengunjung beberapa detik membuka halaman, jadi ada waktu jeda kemunculannya setiap membuka atau merefresh halaman. Tentu saja popup banner ini mudah ditutup untuk melanjutkan membaca konten dengan klik di luar banner atau pada tombol close.

Dan dengan ini kita dapat menambah penghasilan dari blog dengan menyediakan slot iklan popup banner. Banyak advertiser yang mencari pemasangan iklan dengan jenis popup banner seperti ini, jadi kenapa kita tidak menyediakannya?

Agar lebih jelas mengenai popup banner ini, silahkan coba demo berikut, tunggu beberapa saat setelah halaman terbuka.

DEMO

Jika Anda ingin mencobanya, silahkan copy kode berikut ini dan simpan di atas kode </body>

<style>

.hide{display:none;visibility:hidden;}

.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}

.pop-content{width:850px;height:450px;display:block;position:absolute;top:50%;left:50%;margin:-225px 0 0 -425px;z-index:2;box-shadow:0 3px 20px 0 rgba(0,0,0,.5);}

.popcontent{width:100%;height:100%;display:block;background:#fff;border-radius:5px;overflow:hidden}


.pop-overlay{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:1;background:rgba(0,0,0,.7)}

.popbox-close-button{position:absolute;width:28px;height:28px;line-height:28px;text-align:center;top:-14px;right:-14px;background-color:#fff;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:50%;cursor:pointer;font-size:34px;font-weight:lighter;padding:0}
.popcontent img{width:100%;height:100%;display:block}

.flowbox{position:relative;overflow:hidden}

@media screen and (max-width:840px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}

.popcontent img{height:auto}

}

</style>

<div class="popbox hide" id="popbox">


<a href="#" target="_blank" rel="noopener noreferrer" title="box">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";removeClassonBody();' role="button" tabindex="0"/>

<div class="pop-content">




<div class="popcontent">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZl9-pUa1A0-BnFVWAWsxeiw-T_4ko6E6fBOrth1k65tBRz3VunM6m9nRy9zvtjbVDuLJWq7HrGYYpuujAQBSJX8_GaldhRNbu2YDPhCzgvhsygJObfO22utp0Sh-tbYduV-6untgwLC8/s850/ramadan.jpg" alt="banner" width="850" height="450"/>
</div>


</a>

<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'>&times;</button>
</div>


<script>
</div>



setTimeout(function(){
//<![CDATA[



 document.getElementById('popbox').classList.remove('hide');
 document.body.className+=" flowbox"


 }, 5000);

function removeClassonBody(){var element=document.body;element.className=element.className.replace(/\bflowbox\b/g,"")}
//]]>


 </script>

Kode width:850px;height:450px; disesuaikan dengan lebar dan tinggi banner yang akan dipasang. Kode margin:-225px 0 0 -425px; silahkan sesuaikan, -225px silahkan sesuaikan dengan nilai negative dari tinggi banner dibagi 2, sama juga dengan -425px adalah nilai negative dari lebar banner dibagi 2.

Kode <a href="#" target="_blank" rel="noopener noreferrer" title="box"> dan </a> silahkan hapus jika Anda hanya memasang banner saja tanpa link tujuan.

Kode × silahkan rubah jadi × jika Anda memasangnya di Blogger.

Angka 5000 silahkan atur tambah atau kurangi untuk menambah atau mengurangi waktu jeda kemunculan bannernya.

Selamat mencoba dan semoga bermanfaat.

Cara Otomatis Menambahkan Link Sumber

KANGENTOT - Cara Otomatis Menambahkan Link Sumber.  Di Internet sangat mudah untuk menyalin teks dari satu situs dan menempelkannya ke situs lain. Secara teknis, jika pengunjung blog menyalin teks dari situs tertentu seharusnya dia harus memberikan link ke sumber dari situs yang ia salin teksnya. Namun ada juga orang yang mengabaikan hal penting ini.

Untuk menghindari hal itu, di sini saya akan memberikan sebuah kode yang secara otomatis jika seseorang menyalin bagian teks dari artikel kita maka akan otomatis memunculkan link sumber dari teks yang ia salin.

Walaupun cara ini menurut saya masih kurang efektif karena link sumber dapat dihapus dengan mudah dan tips ini merupakan cara lama yang masih bisa dimanfaatkan 😊, namun setidaknya akan memberikan sedikit peringatan bagi yang menyalin teks artikel blog kita. Berikut Cara Otomatis Menambahkan Link Sumber.

Cara Otomatis Menambahkan Link Sumber

Kode ini bekerja di beberapa browser favorit (termasuk Microsoft Edge). Buka halaman Blogger > Klik Tema > Klik tombol Edit HTML dan tambahkan kode di bawah ini > Setelah itu klik Simpan tema.

Versi 1

<script type='text/javascript'>
//<![CDATA[
// Copy Text

function nocopas(){var e=window.getSelection();pagelink=" Read more : "+document.location.href,copytext=e+pagelink,newdiv=document.createElement("div"),newdiv.style.position="absolute",newdiv.style.left="-99999px",document.body.appendChild(newdiv),newdiv.innerHTML=copytext,e.selectAllChildren(newdiv),window.setTimeout(function(){document.body.removeChild(newdiv)},100)}document.addEventListener("copy",nocopas);
//]]>

</script>

Sobat dapat mengedit bagian dari kode yang saya tandai.

Versi 2

<script type='text/javascript'>
//<![CDATA[

!function(e,t){var n="getSelection",o="removeAllRanges",i="addRange",l="parentNode",a="firstChild",d="appendChild",r="removeChild",s="test",c="innerHTML";if(e[n]){var p,g,f,h,u,y;t.addEventListener("copy",function(C){for(g=C.target;3===g.nodeType;)g=g[l];if(h=t.createElement("div"),(p=e[n]())&&p.rangeCount&&(p=p.getRangeAt(0))&&(f=p.cloneRange(),p=p.cloneContents())){for(;u=p[a];)h[d](u);if(!/^(pre|code)$/i[s](g.nodeName||"")&&!/(^|\s)no-attribution(\s|$)/i[s](g.className||"")){var v=e.location.href;h[c]+="<br><br>&copy; "+t.title+'<br>Source: <a href="'+v+'">'+v+"</a>"}y=t.createRange(),t.body[d](h),y.selectNodeContents(h),p=e[n](),p[o](),p[i](y),setTimeout(function(){h[l][r](h),p[o](),p[i](f)})}},!1)}}(window,document);
//]]>

</script>

Untuk tips kali ini saya cukupkan sekian, terima kasih sudah berkunjung.