Cara Membuat Pop Up Ucapan Selamat Bepuasa Part 2

Halo Blogger Sukses... setiap kali berkunjung blog orang pasti kalian pernah melihat pop up ucapan selamat berpuasa, nah mungkin teman teman blogger sukses ada yang bertanya bagaimana cara membuat pop up ucapan selamat berpuasa itu?

Mimin akan bagikan script pop up beserta cara membuat pop up keren nya, padahal pada postinagn sebelumnya mimin juga buat cara membuat jendela pop up di blog seperti ini namun tampilanya berbeda sama yang mau dibahas disini.

Cara Membuat Pop Up Ucapan Selamat Bepuasa Part 2

Tutorial ini adalah part2nya, seperti yang saya katakan diatas caara membuat pop up ucapan selamat berpuasa sudah ada tutorialnya dengan versi yang berbeda.

Ini bukan cara membuat pop up selamat datang di blog tapi bisa anda ubah tulisanya sesuka hati tulisanya. Ini seperti banner pop up blogger namun bukan iklan atau promosi apa lah, tapi ini pop up ucapan selamat kepada pengunjung yang sedang menunaikan ibada puasa.

Tentunya mau dong anda sebagai pemilik blog mengucapkan selamat berpuasa ke pengunjung dibulan suci ramadhan ini.

Tapi membuat pop up ini punya kelemahan, yaitu: pengunjung tidak semua muslim dan tipe pengunjung blog berpeda beda jadi takutnya gangu, tapi menurut saya tidak terlalu” mengganggu ya.
Cara ini hampirsama percis dengan cara membuat iklan pop up sendiri atau cara membuat iklan melayang di tengah blog namun iklan pop up atau iklan melayang sudah tidak banyak digunakan karena melanggar aturan google adsense dan menggangu pengunjung blog.

Tapi tidak salahnya kita membuat pop up otomatis ucapan selamat berpuasa karena ini bentuk hormat kita terhadap pengunjung blog kita.

Berikut cara membuat auto pop up di html ucapan selamat selamat menunaikan ibada puasa di bulan ramadhan 1440 H.

Cara membuat pop up ucapan selamat berpuasa

Berikut adalah tutorial cara membuat pop up di blog:


Seperti biasa masuk dulu dashbord blogger, kemudian pilih menu Tema, Klik Tombol Edit HTML dan cari kode </head> dan letakan kode di bawah sebelum 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%)}}
#arlinapuasa2019ku{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}#arlinapuasa2019ku .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)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#arlinapuasa2019ku 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}#arlinapuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#arlinapuasa2019ku 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){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>
</b:if>


Kemudian cari lagi kode </body> letakan kode di bawa sebelum kode </body>

<b:if cond='data:view.isHomepage'>
<div id='arlinapuasa2019ku'>
<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(){$("#arlinapuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>


Jika sudah, klik tombol Simpan Tema dan lihat hasilnya di blog anda.

Secara default, saya tambahkan tag kondisional khusus halaman utama. Jadi jika ingin pop up ini muncul di semua halaman, silakan hapus tag kondisional tersebut. Selengkapnya di
×

Demo

Penutup...

Itulah tutorial cara membuat pop up ucapan selamat berpuasa di blogger, jika kalian suka dengan tutorial seperti ini terus ikuti blogger sukses.


Terimaksih sudah berkunjung semoga bermanfaat bagi banyak orang, salam blogger sukses....
Sumber referensi https://www.arlinadzgn.com/2019/05/cara-memasang-pop-up-ucapan-selamat-berpuasa.html
×


Close
Selamat Menunaikan Ibadah Puasa
Ramadhan 1440 H
Mohon Maaf Lahir Batin
Buka Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel