Type something and hit enter

author photo
By
Panduan blogging kali ini, saya akan mengulas beberapa cara sederhana untuk memasang pop up ucapan selamat di blog bagi pengguna blogger.com.

Sebenarnya memasang pop up ucapan selamat di blog tidak terbatas pada model ucapan yang diinginkan. Semua blogger bebas menentukan sendiri ucapan selamat tersebut apakah untuk menyambut pengunjung blog atau ucapan selamat lainnya sesuai keinginan.

Misalnya jika saat bulan puasa, maka umumnya blogger akan memasang pop ucapan selamat berpuasa sehingga setiap pengunjung datang ke blog mereka. Pengunjung mendapatkan notifikasi ucapan selamat berpuasa tersebut.

Pada saat bulan ramadhan seperti saat ini, rasanya cukup elok jika sebagai blogger kita memasang pop up ucapan selamat berpuasa di blog untuk menyampaikan salam kepada pengunjung blog kita yang sedang menjalankan ibadah puasa di bulan ramadhan.

Nah... jika Anda juga ingin memasang pop ucapan selamat ini. Silakan ikuti panduan blogging di bawah ini:

Model 1: Pop Up Ucapan Selamat Berpuasa 1440 H


Cara Memasang Pop Up Ucapan Selamat Berpuasa

Langkah 1
Silakan masuk ke draft.blogger.com milik Anda. Lalu masuk pada menu Edit HTML template blog dan tambahkan kode di bawah ini sebelum kode ]]></b:skin> atau di atas kode </head>.

 <style type='text/css'>  
 /* Pop Up Ucapan Selamat Berpuasa */  
 @keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}  
 #ucapanpuasa2019{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);max-width:600px;z-index:99;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 2s}#ucapanpuasa2019 .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)}#ucapanpuasa2019 .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#ucapanpuasa2019 .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#ucapanpuasa2019 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}#ucapanpuasa2019 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}#ucapanpuasa2019 .puasa19 .ramadhan2019{font-size:1.5rem}#ucapanpuasa2019{min-height:260px;left:20px;right:20px}}  

Langkah 2
Terakhir sebelum simpan template. Tambahkan kode berikut di atas kode </body> di blog Anda.

 <div id='ucapanpuasa2019'>  
  <div class='ketupat'></div>  
 <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>  
 </div>  

Selesai...

Tips Bermanfaat 1
Untuk anda yang tidak ingin repot! Anda bisa langsung menambahkan kode berikut melalui tata letak - tambah gadget - HTML/Javascript. Tanpa perlu melalui edit HTML Template. Beres!

 <center>  
 <!-- HTML -->  
 <div id='myModal'>  
 <div id='arlinapuasa2019ku'>  
 <div class='ketupat'></div>  
 <a class='close-popup' href='#' onclick='document.getElementById('myModal').style.display='none';return false;' title='Close this message'>Close</a>  
 <div class='hidemodal' id='hiding'><span title='Do not show this message again'>&#215;</span></div>  
 <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>  
 </div>  
 <div class='matilampu'></div>  
 </div>  
 <!-- CSS -->  
 <style type="text/css">  
 /* Pop Up Ramadhan */  
 @keyframes zoomIn{from{opacity:0}50%{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}  
 #myModal{display:none}#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:1001;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 1s}#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;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#336d9e;color:#fff}#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}#hiding{background:#3979b0;position:absolute;bottom:20px;right:78px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:20px;padding:0 10px;line-height:28px;min-width:28px;transition:all 0.3s}#hiding:hover{background:#336d9e;color:#fff}.matilampu{position:fixed;top:0;background:rgba(0,0,0,0.35);left:0;right:0;bottom:0;margin:0;z-index:1000;animation:zoomIn 1s}  
 @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>  
 <!-- JAVASCRIPT -->  
 <script type="text/javascript">  
 function setCookie(e,i,o){var n=new Date;n.setDate(n.getDate()+o);var a=escape(i)+(null==o?"":"; expires="+n.toUTCString());document.cookie=e+"="+a}function getCookie(e){var i,o,n,a=document.cookie.split(";");for(i=0;i<a.length;i++)if(o=a[i].substr(0,a[i].indexOf("=")),n=a[i].substr(a[i].indexOf("=")+1),(o=o.replace(/^s+|s+$/g,""))==e)return unescape(n)}var Arlina_COOKIE="cookiearlina",hideMe=document.getElementById("myModal"),cookie=getCookie(Arlina_COOKIE),cookiearlina=cookie||hideMe.style.display,hiding=document.getElementById("hiding");hiding.onclick=function(){setCookie(Arlina_COOKIE,cookiearlina,100),hideMe.style.display="block"===cookiearlina?"none":"block",cookiearlina=hideMe.style.display},hiding.onclick();  
 </script>  
 </center>  

Model 2: Pop Up Ucapan Selamat Berpuasa 1440 H

Cara Memasang Pop Up Ucapan Selamat Berpuasa di Blog

Langkah 1
Tempatkan kode di bawah ini tepat di atas kode </head> di dalam template blog. Melalui menu Edit HTML Template Blog Anda.

 <style type="text/css">  
 /* Pop Up Animation Ramadhan */  
 @keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}  
 @keyframes change_color{0%{background:#5ac7da}33.33%{background:#3173bd}66.66%{background:#0d4a8d}100%{background:#5ac7da}}  
 @keyframes run_hari18{0%{transform:translate(0%,0)}50%{transform:translate(100%,0)}50.01%{transform:translate(-100%,0)}}  
 @keyframes sun_movement{0%{top:50px}20%{top:-30px}25%{top:-30px}40%{top:50px}}  
 @keyframes run_malam18{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}}  
 @keyframes moon_movement{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}}  
 /* Pop Up Ramadhan */  
 #popuppuasa18{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:change_color 5s infinite linear,slideDown 2s}  
 #popuppuasa18 .puasa18{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%}  
 #popuppuasa18 .puasa18 p{margin:20px auto;text-shadow:2px 2px 5px rgba(0,0,0,0.2)}  
 #popuppuasa18 .puasa18 .ramadhan18{font-size:3rem;font-weight:700}  
 #popuppuasa18 a.close-popup{position:absolute;bottom:15px;right:20px;color:#fff;text-align:center;border-radius:100%;cursor:pointer;z-index:99;transition:all .3s}  
 #popuppuasa18 a.close-popup:hover{color:#fff}  
 #popuppuasa18 a.close-popup:active{opacity:0}  
 #popuppuasa18 a.close-popup i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}  
 #popuppuasa18 a.close-popup:hover i{transform:rotate(360deg)}  
 .gunung18{width:400px;height:300px;display:block;background:#4aad52;position:absolute;bottom:-150px;transform:rotate(45deg);border-radius:50px}  
 .gunung18.behind{background:#42a54a;right:-120px;bottom:-180px;z-index:-1}  
 .hari18{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_hari18 5s infinite linear}  
 .hari18 .awan18{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}  
 .hari18 .awan18: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}  
 .hari18 .awan18.invert{top:60px;left:250px}  
 .hari18 .awan18.invert:before{left:50px}  
 .hari18 .sun{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:sun_movement 5s infinite linear}  
 .malam18{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_malam18 5s infinite linear}  
 .malam18 .bintang18 .star{width:5px;height:5px;display:block;background:#f7f7f7;border-radius:50%;position:absolute}  
 .malam18 .bintang18 .star:nth-child(1){top:50px;left:50px}  
 .malam18 .bintang18 .star:nth-child(2){top:200px;left:70px}  
 .malam18 .bintang18 .star:nth-child(3){top:100px;left:300px}  
 .malam18 .bintang18 .star:nth-child(4){top:50px;left:220px}  
 .malam18 .bintang18 .star:nth-child(5){top:160px;left:320px}  
 .malam18 .bintang18 .star:nth-child(6){top:150px;left:230px}  
 .malam18 .bintang18 .star:nth-child(7){top:180px;left:400px}  
 .malam18 .bintang18 .star:nth-child(8){top:50px;left:360px}  
 .malam18 .moon{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:moon_movement 5s infinite linear}  
 @media (max-width:800px){#popuppuasa18{top:10px!important;left:10px;right:10px;min-height:250px}#popuppuasa18 .puasa18{font-size:1.1rem;top:0}#popuppuasa18 .puasa18 .ramadhan18{font-size:2.5rem}.gunung18{display:none}.hari18,.bintang18,.malam18 .moon{display:inline}#popuppuasa18 a.close-popup {z-index:999999}}  
 </style>  

Langkah 2
Selanjutnya tempatkan kode HTML berikut di atas kode </body>

 <div id='popuppuasa18'>  
 <a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>  
 <div class='puasa18'>  
 <p>Selamat Menunaikan Ibadah Puasa</p>  
 <p><span class='ramadhan18'>Ramadhan 1440 H</span></p>  
 </div>  
 <div class='gunung18'></div>  
 <div class='gunung18 behind'></div>  
 <div class='hari18'>  
 <div class='awan18'></div>  
 <div class='awan18 invert'></div>  
 <div class='sun'></div>  
 </div>  
 <div class='malam18'>  
 <div class='bintang18'>  
 <div class='star'></div>  
 <div class='star'></div>  
 <div class='star'></div>  
 <div class='star'></div>  
 <div class='star'></div>  
 <div class='star'></div>  
 <div class='star'></div>  
 <div class='star'></div>  
 </div>  
 <div class='moon'></div>  
 </div>  
 </div>  

Langkah 3
Masih sama seperti langkah 2. Silakan kembali menambahkan kode berikut di atas kode </body>

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

Selesai.

Penting!
Khusus untuk model pop up ucapan selamat berpuasa yang kedua, silakan tambahkan font awesome berikut di dalam blog Anda.

 <link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>  

Selain itu, bila tombol "close" pop up tersebut tidak berfungsi. Maka coba tambahkan kode di bawah ini sebelum kode </head>  di dalam template edit HTML Blog Anda.

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>  

Silakan pilih salah satu model pop up ucapan selamat berpuasa di atas sesuai dengan keinginan Anda.

Demikian semoga bermanfaat.

0 komentar

Mohon tidak berkomentar dengan link aktif, termasuk berpromosi jasa dan lain-lain. Karena akan langsung dihapus