MASALAH DAN SOLUSI | CARA MENAMBAHKAN POP UP DI BLOG

Onkaners ingin menambahkan POP UP di blog onkaners atau ingin ada sebuah notifikasi yang bisa buat si pembaca atau pengunjung web onkaners tertarik untuk melihat isinya. PASANG POP UP solusinya, disini onka hanya memakai beberapa code yang onka masukkan ke dalam gadget.

MASALAH DALAM HAL INI :

Bagaimana cara pemasangan POP UP

SOLUSI DALAM HAL INI :

Cara pemasangan POP UP

 

MASALAH DAN SOLUSI | CARA MENAMBAHKAN POP UP DI BLOG

 

Mungkin onkaners masih kurang mengerti, okke ikuti langkah -langkahnya ya onkaners.

 

Langkah – langkah seperti berikut :

    1 Buka ke Blogger onkabers masing- masing

 

    2 Masuk ke bagian tata letak

 

    3 Di sini onkaners terserah memilih penambahan gadget letaknya dimana. Tambahkan Gadget

 

    4 klik HTML / JavaScript

 

    5 Nanti akan diarahkan ke dialog box Mengkonfigurasi HTML / JavaScript

        Di dalam dialog box terdapat 2 inputan

        Judul dan konten

 

MASALAH DAN SOLUSI | CARA MENAMBAHKAN POP UP DI BLOG

 

        Disini onkaners masukkan kode di bawah ini

 <br />

<br />

<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><br />

<div class="popbox hide" id="popbox">   <div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'/>   <div class="pop-content"> <a href="https://onkaners.blogspot.com" target="_blank" rel="noopener noreferrer" title="box"><br />

  <div class="popcontent"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-TJemBwVNuZuYw_4OofaqvuvFVtcHccQ_2QGFGr1HjZBPa5hLHlB_4WzdPAu0h6OupCVuIwtgNrY6ca-rnSjjxyGrLX1TWYOmFeNOlqeSwCcyxAfQhcOA4qF3UZmCqKkAOrhKZ0FFRowB/s877/LOGO+-+BESAR.png" alt="banner" width="850" height="450"/><br />

  </div> </a><br />

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

  </div> </div><script>

//<![CDATA[

setTimeout(function(){

 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><br /></div>

    6 Lalu onkaners masukkan ke dalam inputan konten, untuk judul kosongi saja onkaners

 

    7 Lalu klik simpan

Untuk tampilannya nanti saat membuka blog onkaners akan muncul POP Upnya otomatis.

TAMPILAN AWAL (SEBELUM POP UP)

 

TAMPILAN SESUDAH POP UP

 

Nah keren bukan onkaners, onkaners bisa modify untuk penunjang blog onka sendiri loh. Nanti akan onka share bagaimana cara modify POP UPnya,

 

MASALAH DAN SOLUSI | CARA MENAMBAHKAN POP UP DI BLOG

 

 

NB : “JIKA ONKANERS MASIH KESULITAN, BISA LANGSUNG KOMENTAR / CHAT SAJA VIA WHATSAPP YA ONKANERS”

 

TERIMA KASIH SUDAH BERKUNJUNG

SILAHKAN BERSELANCAR RIA

QUOTE’S OF TODAY

“INGAT KEBAIKAN SESEORANG BUKAN KEBURUKANNYA”

 

 

 

 

 

 

 

KEYWORD :

Cara Menambahkan POP UP Di Blog Dengan Mudah

Cara Menambahkan Widget Di Blog

Cara Menambahkan Postingan Melayang di Blog

Cara Menambahkan Halaman Melayang di Blog

Cara Membuat Kotak Iklan di Blog

Cara Membuat POP UP Banner di Blog

Cara Membuat POP UP D Halaman Depan Blog