Cara Membuat Pesan Popup Selamat Ramadhan Melayang di Blog

Imamkunblog | Hallo sobat imamkunblog, gak terasa ya bulan ramadhan sudah tidak lama lagi, semoga kita bisa bertemu kembali dengan bulan suci penuh rahmat tersebut, Amin. Pada saat memasuki Bulan Ramadhan tidak afdol rasanya kalau memiliki blog tidak mengucapkan selamat Bulan Ramadhan kepada para pengunjung.

Dengan memasang Ucapan Selamat Bulan Ramadhan di Blog itu menandakan blog terkesan mengikuti juga suasana selama bulan ramadhan. Masa website-website besar mengucapkan selamat ramadhan di website mereka, kita enggak?

Kita tidak mau kalah juga dong, dengan memasang widget selamat ramadhan maka website anda jauh kelihat lebih professional dengan menampilkan widget tersebut.

Widget Pesan Ucapan Selamat Menuaikan Ibadah Puasa kali ini tidak kalah kerennya dengan blog atau website professional. Gak percaya? Hehehe silahkan deh anda lihat penampakannya dibawah ini, dijamin bakalan suka.

Bagaimana menurut anda, keren dan tidak kalah dengan website professional, bukan? Nah, Untuk memasang Widget Ucapan Selamat Bulan Puasa, sobat tidak perlu mengedit di HTML Theme sobat hanya cukup menambahkan kodenya di Widget Tata Letak.

Baiklah tidak perlu berlama lama-lama lagi langsung saja kita mulai ke TKPnya, cekidot.

Cara Membuat Pesan Popup Selamat Bulan Puasa di Blog

1. Login ke Blogger.com
2. Pada Dashboard pilih Tata Letak > Tambahkan Gadget
3. Kemudian pilih HTML/JavaScript
4. Kemudian Copy dan Pastekan kodenya dibawah ini.

<div id='kunblogpuasa'>
<a class='kunblogpenutup' href='#' title='close'><i class='fa fa-times'></i></a>
<div class='kunblogpesanz'>
<p>Imamkunblog.com Mengucapkan</p>
<p>Selamat Menunaikan Ibadah Puasa</p>
<p><span class='kunblogromadhon'>Ramadhan 1441 H</span></p>
</div>
<div class='kunblogpegunungan'></div>
<div class='kunblogpegunungan behind'></div>
<div class='kunblogdayz'>
<div class='kunblogmendung'></div>
<div class='kunblogmendung invert'></div>
<div class='kunblogsun'></div>
</div>
<div class='kunblogmalamhari'>
<div class='kunblogstars'>
<div class='kunblogrbintangs'></div>
<div class='kunblogrbintangs'></div>
<div class='kunblogrbintangs'></div>
<div class='kunblogrbintangs'></div>
<div class='kunblogrbintangs'></div>
<div class='kunblogrbintangs'></div>
<div class='kunblogrbintangs'></div>
<div class='kunblogrbintangs'></div>
</div>
<div class='kunblogrembulan'></div>
</div>
</div>

<script type="text/javascript">
$(window).bind("load",function(){$("#kunblogpuasa").animate({top:"25%"},1e3),$("a.kunblogpenutup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
</script>

<style type="text/css">
/* imamkunblog Keyframe Ramadhan */
@keyframes matahari{0%{top:50px}20%{top:-30px}25%{top:-30px}40%{top:50px}}
@keyframes kunblogslide{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
@keyframes kunblogdays{0%{transform:translate(0%,0)}50%{transform:translate(100%,0)}50.01%{transform:translate(-100%,0)}}
@keyframes kunbloggantiwarna{0%{background:#5ac7da}33.33%{background:#3173bd}66.66%{background:#0d4a8d}100%{background:#5ac7da}}
@keyframes kunblogbulan{0%{transform:translate(-200%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(200%,0);opacity:0}100%{transform:translate(-200%,0);opacity:1}}
@keyframes kunblognight{0%{transform:translate(-20%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(20%,0);opacity:0}100%{transform:translate(-20%,0);opacity:1}}

/* imamkunblog Pop Up Ramadhan */
#kunblogpuasa{display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:660px;box-shadow:0 19px 38px rgba(0,0,0,0.1),0 15px 12px rgba(0,0,0,0.12);z-index:999;min-height:350px;padding:20px;overflow:hidden;border-radius:10px;animation:kunbloggantiwarna 5s infinite linear,kunblogslide 2s}
#kunblogpuasa .kunblogpesanz{position:absolute;color:#fff;font-size:2rem;font-weight:400;padding:30px;z-index:99999;text-align:center;margin:auto;left:0;right:0;top:20%}
#kunblogpuasa .kunblogpesanz p{margin:20px auto;text-shadow:2px 2px 5px rgba(0,0,0,0.2)}
#kunblogpuasa .kunblogpesanz .kunblogromadhon{font-size:3rem;font-weight:700}
#kunblogpuasa a.kunblogpenutup{position:absolute;bottom:15px;right:20px;color:#fff;text-align:center;border-radius:100%;cursor:pointer;z-index:99;transition:all .3s}
#kunblogpuasa a.kunblogpenutup:hover{color:#fff}
#kunblogpuasa a.kunblogpenutup:active{opacity:0}
#kunblogpuasa a.kunblogpenutup i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}
#kunblogpuasa a.kunblogpenutup:hover i{transform:rotate(360deg)}
.kunblogpegunungan{width:400px;height:300px;display:block;background:#4aad52;position:absolute;bottom:-150px;transform:rotate(45deg);border-radius:50px}
.kunblogpegunungan.behind{background:#42a54a;right:-120px;bottom:-180px;z-index:-1}
.kunblogdayz{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:kunblogdays 5s infinite linear}
.kunblogdayz .kunblogmendung{margin:30px auto;width:150px;height:70px;display:block;background:#e7e7e7;border-radius:35px;border:10px solid #ffffff;box-shadow:inset 0 -7px 0 0 #d7d7d7;position:absolute;top:90px;left:50px}
.kunblogdayz .kunblogmendung:before{content:'';width:65px;height:35px;display:block;background:#e7e7e7;border-radius:35px 35px 0 0;border:10px solid #ffffff;border-bottom:0;position:absolute;top:-35px;left:20px}
.kunblogdayz .kunblogmendung.invert{top:60px;left:250px}
.kunblogdayz .kunblogmendung.invert:before{left:50px}
.kunblogdayz .kunblogsun{width:75px;height:75px;display:block;background:#fff297;border-radius:50%;box-shadow:inset -5px -5px 0 0 #ddc991;position:absolute;top:50px;left:0;animation:matahari 5s infinite linear}
.kunblogmalamhari{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:kunblognight 5s infinite linear}
.kunblogmalamhari .kunblogstars .kunblogrbintangs{width:5px;height:5px;display:block;background:#f7f7f7;border-radius:50%;position:absolute}
.kunblogmalamhari .kunblogstars .kunblogrbintangs:nth-child(1){top:50px;left:50px}
.kunblogmalamhari .kunblogstars .kunblogrbintangs:nth-child(2){top:200px;left:70px}
.kunblogmalamhari .kunblogstars .kunblogrbintangs:nth-child(3){top:100px;left:300px}
.kunblogmalamhari .kunblogstars .kunblogrbintangs:nth-child(4){top:50px;left:220px}
.kunblogmalamhari .kunblogstars .kunblogrbintangs:nth-child(5){top:160px;left:320px}
.kunblogmalamhari .kunblogstars .kunblogrbintangs:nth-child(6){top:150px;left:230px}
.kunblogmalamhari .kunblogstars .kunblogrbintangs:nth-child(7){top:180px;left:400px}
.kunblogmalamhari .kunblogstars .kunblogrbintangs:nth-child(8){top:50px;left:360px}
.kunblogmalamhari .kunblogrembulan{width:75px;height:75px;display:block;background:#d7d7d7;border-radius:50%;box-shadow:inset -5px -5px 0 0 #c7c7c7;position:absolute;top:50px;left:100px;animation:kunblogbulan 5s infinite linear}
@media (max-width:800px){#kunblogpuasa{top:100px!important;left:10px;right:10px;min-height:250px}#kunblogpuasa .kunblogpesanz{font-size:1.1rem;top:0}#kunblogpuasa .kunblogpesanz .kunblogromadhon{font-size:2.5rem}.kunblogpegunungan{display:none}.kunblogdayz,.kunblogstars,.kunblogmalamhari .kunblogrembulan{display:inline}#kunblogpuasa a.kunblogpenutup {z-index:999999}}
</style>

5. Kemudian untuk judul Gadget kosongkan saja
6. Simpan dan Selesai!

Untuk hasil demonya anda bisa melihat pada saat membuka artikel ini akan langsung muncul Widget Ucapan Selamat Puasanya. Jika ingin melihatnya lagi Refresh saja halaman post ini.

Baca Juga: Cara Membuat Popup Fan Page Facebook

Nah, Widget ini hanya cocok digunakan untuk Mengucapkan Selamat Bulan Puasa, apabila ingin menggunakan widget ini untuk mengucapkan hari raya lainnya, anda cukup pengubah textnya di kode diatas. Cari saja Tulisan ucapnnya di kode tersebut dengan teliti dari atas ke bawah.

Baiklah, saya kira cukup sampai disini saja artikel kali ini Cara Membuat Pesan Popup Ucapan Selamat Puasa di Blog. Jika anda mengalami masalah atau scriptnya tidak bekerja silahkan komen saja dibawah annti akan saya berikan solusinya.

Baiklah, sekian dan terima kasih!

Sc: berbagai sumber di internet

Imamkunblog.com Mengucapkan
Selamat Menunaikan Ibadah Puasa
Ramadhan 1441 H