Type something and hit enter

author photo
By
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.

Cara Memasang Widget Melayang Ucapan Idul Fitri di Blog

Widget melayan 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

Cara Memasang Widget Melayang Ucapan Idul Fitri di Blog

Langkah 2
Selanjutnya silakan pilih "Tambah Gadget"

Cara Memasang Widget Melayang Ucapan Idul Fitri di Blog

Langkah 3
Lanjutkan kembali dengan memilih "HTML/Javascript"

Cara Memasang Widget Melayang Ucapan Idul Fitri di Blog

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!

Cara Memasang Widget Melayang Ucapan Idul Fitri di Blog

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...

0 komentar

Silakan tuliskan komentar Anda sesuai dengan topik postingan halaman ini. Setiap komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.