Cara Membuat Pesan Popup Selamat Ramadhan Melayang di Blog

Cara Membuat Pesan Popup Selamat Ramadhan Melayang di Blog
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
Show comments
Hide comments

0 Response to "Cara Membuat Pesan Popup Selamat Ramadhan Melayang di Blog"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×