Welcome to www.winkamaru.com

Cara Memasang Widget Melayang Ucapan Idul Fitri di Blog


Ketika hari besar tiba biasanya banyak blogger memasang widget melayang di blog mereka untuk ikut mengucapkan selamat hari raya idul fitri kepada pengunjung yang datang ke blog mereka.

Widget melayang berikut sebenarnya masih sama seperti widget pop up ucapan selamat berpuasa tetapi diubah saja text kalimatnya menjadi "Selamat Merayakan Kemenangan, Minal Aidin Wal Faidzin Mohon Maaf Lahir dan Batin.

Keunggulan widget melayan ucapan selamat idul fitri ini cukup responsive sehingga tidak mengganggu tampilan blog secara signifikan.

Cara memasang widget ucapan Idul Fitri ini di blog pun sangat mudah. Anda hanya perlu memasang nya melalui widget HTML di blog. Caranya sebagai berikut:

Langkah 1
Masuk ke menu Tata Letak blog Anda di Blogger


Langkah 2
Selanjutnya silakan pilih "Tambah Gadget"


Langkah 3
Lanjutkan kembali dengan memilih "HTML/Javascript"


Langkah 4
Selanjutnya silakan masukkan kode berikut ini:

 <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 Merayakan Kemenangan</p>   
   <p><span class='ramadhan2019'>Minal Aidin Wal Faidzin </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>  

Kurang lebih seperti pada gambar di bawah. Lalu pilih simpan!


Penting
Silakan cari ucapan berikut pada kode di atas, lalu sesuaikan dengan text ucapan yang Anda inginkan:

 <p>Selamat Merayakan Kemenangan</p>    
   <p><span class='ramadhan2019'>Minal Aidin Wal Faidzin </span></p>    
   <p>Mohon Maaf Lahir Batin</p>   

  1. Selamat Merayakan Kemenangan (Ganti Sesuai Keinginan)
  2. Minal Aidin Wal Faidzin (Ganti Sesuai Keinginan)
  3. Mohon Maaf Lahir Batin (Ganti Sesuai Keinginan)

Demikian, semoga bermanfaat...