Cara Memasang Iklan Popup Ucapan Selamat Puasa Diblog

Cara membuat pop up banner responsive di blog - Selamat pagi teman blogger, semoga anda dalam keadaan sehat semua. menghitung beberapa hari lagi, kita akan melaksakan kewajiban kita sebagai muslim yaitu mengerjakan tugas puasa dalam satu bulan penuh. bagi anda seorang blogger dan sedang mengelola blog tanpa hari libur, artikel ini cocok untuk anda untuk memperbagus tampilan blog anda dengan memasang pop up ucapan selamat ramadhan saat blog anda selesai di load.

Memasang banner sangat bermanfaat untuk menghormati sesama muslim yang sedang mengerjakan puasa, di dalam banner tersebut anda bisa meletakkan link tujuan artikel dengan menulis tentang puasa, hal itu akan meningkatkan seo artikel anda.

Memasang Popup Selamat Ramdhan

1. Menu Tata Letak > Tambah Widget > HTML/Javascript.
2. Salin script di bawah ini, lalu pastekan ke dalam widget dan save.

<!-- POPUP SELAMAT MENJALANKAN IBADAH PUASA SURYAPERO -->
<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="www.suryapero.com" target="_blank" rel="noopener noreferrer" title="box"><br />
          <div class="popcontent">            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq-T8LDTbjf0V6umZbXDvxXISlp0Eb_xePdC3TySebWBmNjPtyoXxMKCfVLJ6w5AKygEFhfWhT187OHcqCTNJfF5N4nJTKHOdoE3cfw7wjTumgUZA8iuVwU1FHTmwkkJn0ljk1hrirWQ/s1600/sambut-1-ramadhan-1440-h2019-marak-ucapan-marhaban-ya-ramadhan-apa-arti-sebenarnya-min.jpg" 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></div>

Keterangan

• Link Surya Pero, ganti dengan link tujuan ada atau gunakan link artikel.
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq-T8LDTbjf0V6umZbXDvxXISlp0Eb_xePdC3TySebWBmNjPtyoXxMKCfVLJ6w5AKygEFhfWhT187OHcqCTNJfF5N4nJTKHOdoE3cfw7wjTumgUZA8iuVwU1FHTmwkkJn0ljk1hrirWQ/s1600/sambut-1-ramadhan-1440-h2019-marak-ucapan-marhaban-ya-ramadhan-apa-arti-sebenarnya-min.jpg, ganti dengan link gambar anda sendiri.

Dengan cara mudah tersebut, anda sudah berhasil membuat dan memasang popup iklan di blog anda. semoga bermanfaat untuk semua dan bantu saya memabagikan tutorial ini kepada teman anda.

Berbagi :