Cara Membuat Pop Up Ucapan Selamat Berpuasa - TRIK SIMPLE
Cara Membuat Pop Up Ucapan Selamat Berpuasa

Cara Membuat Pop Up Ucapan Selamat Berpuasa - Halo sobat TrikS semoga diawal bulan puasa ini diberikan banyak pahala di bulan romadhan ini, sekali lagi saya ucapkan selamat menunaikan ibadah puasa Ramadhan 1440 H Mohon Maaf Lahir dan Batin 🙏🙏🙏.

Pada bulan yang mulia ini saya akan share ke pada pengunjung setia blog triksimple.com bagai mana cara membuat pop up ucapan selamat berpuasa yang tentunya responsive di mobile friendly.



Cara Membuat Pop Up Ucapan Selamat Berpuasa


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudian tambahkan kode dibawah ini tepat diatas kode </head>

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan */
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#trksmplpuasa2019ku{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:99;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 2s}#trksmplpuasa2019ku .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#trksmplpuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#trksmplpuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#trksmplpuasa2019ku a.close-popup{background:#428bca;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;border:1px solid #3885c7;transition:all 0.3s}#trksmplpuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#trksmplpuasa2019ku a.close-popup:active{opacity:.9}
.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}
@media screen and (max-width:768px){#trksmplpuasa2019ku .puasa19{font-size:1rem}#trksmplpuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#trksmplpuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>
</b:if>

Jika sudah tambahkan kode dibawah ini tepat diatas kode </body>

<b:if cond='data:view.isHomepage'>
<div id='trksmplpuasa2019ku'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>Close</a>
<div class='puasa19'>
   <p>Selamat Menunaikan Ibadah Puasa</p>
   <p><span class='ramadhan2019'>Ramadhan 1440 H</span></p>
   <p>Mohon Maaf Lahir Batin</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#trksmplpuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>

Kalau sudah memasang semua kode diatas klik Simpan.

Baca Juga : Cara Memasang PopUp Selamat Tahun baru di Blogger

Oke sekian yang bisa saya sampaikan tentang Cara Membuat Pop Up Ucapan Selamat Berpuasa Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Membuat Pop Up Ucapan Selamat Berpuasa

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Cara Membuat Pop Up Ucapan Selamat Berpuasa

Cara Membuat Pop Up Ucapan Selamat Berpuasa - Halo sobat TrikS semoga diawal bulan puasa ini diberikan banyak pahala di bulan romadhan ini, sekali lagi saya ucapkan selamat menunaikan ibadah puasa Ramadhan 1440 H Mohon Maaf Lahir dan Batin 🙏🙏🙏.

Pada bulan yang mulia ini saya akan share ke pada pengunjung setia blog triksimple.com bagai mana cara membuat pop up ucapan selamat berpuasa yang tentunya responsive di mobile friendly.



Cara Membuat Pop Up Ucapan Selamat Berpuasa


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudian tambahkan kode dibawah ini tepat diatas kode </head>

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan */
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#trksmplpuasa2019ku{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:99;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 2s}#trksmplpuasa2019ku .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#trksmplpuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#trksmplpuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#trksmplpuasa2019ku a.close-popup{background:#428bca;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;border:1px solid #3885c7;transition:all 0.3s}#trksmplpuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#trksmplpuasa2019ku a.close-popup:active{opacity:.9}
.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}
@media screen and (max-width:768px){#trksmplpuasa2019ku .puasa19{font-size:1rem}#trksmplpuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#trksmplpuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>
</b:if>

Jika sudah tambahkan kode dibawah ini tepat diatas kode </body>

<b:if cond='data:view.isHomepage'>
<div id='trksmplpuasa2019ku'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>Close</a>
<div class='puasa19'>
   <p>Selamat Menunaikan Ibadah Puasa</p>
   <p><span class='ramadhan2019'>Ramadhan 1440 H</span></p>
   <p>Mohon Maaf Lahir Batin</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#trksmplpuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>

Kalau sudah memasang semua kode diatas klik Simpan.

Baca Juga : Cara Memasang PopUp Selamat Tahun baru di Blogger

Oke sekian yang bisa saya sampaikan tentang Cara Membuat Pop Up Ucapan Selamat Berpuasa Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
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

Jangan Lupa Subscribe Cuk