Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog - TRIK SIMPLE
Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog

Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog - Pop Up banner iklan ini sangat cocok jika sobat ingin mempromosikan produk sobat atau untuk yang ingin mengiklan di blog sobat, pop up disini terdapat 2 gambar yaitu double pop up ini bisa ditambahin tapi menurut saya jangan sob, pasti pengunjung blog sobat akan merasa terganggu dengan iklan banner yang begitu banyak munculnya.

Pop Up ini tentunya sangat responsive dengan begitu ditambahkan dengan kode css pas saat proses muncul agar tidak terlalu kaku hehehe... oke langsung saja sob....


Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudian copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau ]]&gt;&lt;/b:skin&gt;

.hide{display:none}
.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)}
:focus,:active{outline:0}
.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;padding:0}
.popbox-close-button svg{vertical-align:middle}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:850px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}.popcontent img{height:auto}}
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}

Setelah sudah menambahkan kode css diatas selanjutnya yaitu menambahkan kode html dan js, copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<div class="popbox hide" id="popbox">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()' role='button' tabindex='0'></div>
<div class="pop-content slideInUp">
<a href="#" target="_blank" rel="noopener noreferrer" title="box" role='button' tabindex='0' aria-label='Close' onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()'>
<div class="popcontent" id='imgcontent'>
<!-- <img src="https://1.bp.blogspot.com/-lkAaAmnc26E/XR4kUIk57gI/AAAAAAAADrg/ScWYwhaEym4okbTr71_x3DpQFBantndgQCLcBGAs/s1600/loadingdns.jpg" alt="banner" width="850" height="450"/> -->
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>

<div class="popbox hide" id="popbox2">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();' role='button' tabindex='0'></div>
<div class="pop-content slideInLeft">
<a href="#" target="_blank" rel="noopener noreferrer" title="box" role='button' tabindex='0' aria-label='Close' onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();'>
<div class="popcontent" id='imgcontent2'>
<!-- <img src="https://1.bp.blogspot.com/-xDv-vkbPgiQ/XNle4qLmpAI/AAAAAAAADhw/22zrFTnbkCsW4fgvfN8auxHQDxfWWKNlwCLcBGAs/s1600/schema%2BQAPage-min.png" alt="banner" width="850" height="450"/> -->
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>

<script>
//<![CDATA[
setTimeout(function(){
 document.getElementById('popbox').classList.remove('hide');
 document.documentElement.className+=" flowbox";
 document.getElementById('imgcontent').innerHTML = document.getElementById('imgcontent').innerHTML.replace('<!--','').replace('-->','');
 }, 5000);
function showImage(){document.getElementById('imgcontent2').innerHTML = document.getElementById('imgcontent2').innerHTML.replace('<!--','').replace('-->','')};
function removeClassonBody(){var element=document.documentElement;element.className=element.className.replace(" flowbox","")}
//]]>
</script>

Jika sudah klik save sob.. dan lihat hasilnya diblog sobat....

Sekian yang bisa saya sampaikan tentang Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog

Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog - Pop Up banner iklan ini sangat cocok jika sobat ingin mempromosikan produk sobat atau untuk yang ingin mengiklan di blog sobat, pop up disini terdapat 2 gambar yaitu double pop up ini bisa ditambahin tapi menurut saya jangan sob, pasti pengunjung blog sobat akan merasa terganggu dengan iklan banner yang begitu banyak munculnya.

Pop Up ini tentunya sangat responsive dengan begitu ditambahkan dengan kode css pas saat proses muncul agar tidak terlalu kaku hehehe... oke langsung saja sob....


Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudian copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau ]]&gt;&lt;/b:skin&gt;

.hide{display:none}
.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)}
:focus,:active{outline:0}
.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;padding:0}
.popbox-close-button svg{vertical-align:middle}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:850px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}.popcontent img{height:auto}}
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}

Setelah sudah menambahkan kode css diatas selanjutnya yaitu menambahkan kode html dan js, copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<div class="popbox hide" id="popbox">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()' role='button' tabindex='0'></div>
<div class="pop-content slideInUp">
<a href="#" target="_blank" rel="noopener noreferrer" title="box" role='button' tabindex='0' aria-label='Close' onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()'>
<div class="popcontent" id='imgcontent'>
<!-- <img src="https://1.bp.blogspot.com/-lkAaAmnc26E/XR4kUIk57gI/AAAAAAAADrg/ScWYwhaEym4okbTr71_x3DpQFBantndgQCLcBGAs/s1600/loadingdns.jpg" alt="banner" width="850" height="450"/> -->
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>

<div class="popbox hide" id="popbox2">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();' role='button' tabindex='0'></div>
<div class="pop-content slideInLeft">
<a href="#" target="_blank" rel="noopener noreferrer" title="box" role='button' tabindex='0' aria-label='Close' onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();'>
<div class="popcontent" id='imgcontent2'>
<!-- <img src="https://1.bp.blogspot.com/-xDv-vkbPgiQ/XNle4qLmpAI/AAAAAAAADhw/22zrFTnbkCsW4fgvfN8auxHQDxfWWKNlwCLcBGAs/s1600/schema%2BQAPage-min.png" alt="banner" width="850" height="450"/> -->
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>

<script>
//<![CDATA[
setTimeout(function(){
 document.getElementById('popbox').classList.remove('hide');
 document.documentElement.className+=" flowbox";
 document.getElementById('imgcontent').innerHTML = document.getElementById('imgcontent').innerHTML.replace('<!--','').replace('-->','');
 }, 5000);
function showImage(){document.getElementById('imgcontent2').innerHTML = document.getElementById('imgcontent2').innerHTML.replace('<!--','').replace('-->','')};
function removeClassonBody(){var element=document.documentElement;element.className=element.className.replace(" flowbox","")}
//]]>
</script>

Jika sudah klik save sob.. dan lihat hasilnya diblog sobat....

Sekian yang bisa saya sampaikan tentang Cara Membuat Double Pop Up Banner Iklan Responsive pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Igniel
Kopi Inspirasi
Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter