Cara Membuat Popup Ramadan Seperti Punya Arlina

Mungkin jika kalian sering berkunjung ke salah satu situs Blogger indonesia yaitu Arlina Design akan muncul Pop Up Ramadan yang terdapat pada blognya dengan tampilan flat serta ada tambahan animasi menjadi lebih bagus sekali Pop Up tersebut, tentu saja kalian juga bisa menambahkan Pop Up Ramadan tersebut di blog kalian dengan mudah loh..

Cara Membuat Popup Ramadan Seperti Punya Arlina

Untuk memasang Pop Up Ramadan ini sangat mudah ngak perlu ribet kok, kalian cuman harus menaruh beberapa kode pada tempatnya saja dengan begitu Pop Up Ramadan pasti bisa dipasang di blog kalian. Untuk lebih jelasnya kalian bisa langsung ke tutorial dibawah ini.

Cara Membuat Popup Ramadan


1. Buka Blog sobat > lalu klik Tema > Edit Template

2. Cari kode <style> or <b:skin> lalu copy kode css dibawah ini, dan paste dibawah kode <style> or <b:skin>
 /* Pop Up Animation Ramadan */
@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);
    opacity: 0;
  }
  50% {
    transform: translate(100%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(100%, 0);
    opacity: 0;
  }
}
@keyframes sun_movement {
  0% {
    top: 50px;
  }
  100% {
    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 Ramadan */
#puasa2018 {
  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: 99;
  min-height: 350px;
  padding: 20px;
  overflow: hidden;
  border-radius: 10px;
  animation: change_color 7s infinite linear, slideDown 2s;
}
#puasa2018 .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%;
}
#puasa2018 .puasa18 p {
  margin: 20px auto;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
#puasa2018 .puasa18 .ramadan2018 {
  font-size: 3rem;
  font-weight: 700;
}
#puasa2018 a.close-popup {
  position: absolute;
  bottom: 15px;
  right: 20px;
  color: #fff;
  text-align: center;
  border-radius: 100%;
  cursor: pointer;
  z-index: 99;
  transition: all 0.3s;
}
#puasa2018 a.close-popup:hover {
  color: #fff;
}
#puasa2018 a.close-popup:active {
  opacity: 0;
}
#puasa2018 a.close-popup i {
  font-family: fontawesome;
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
  transform: rotate(270deg);
  transition: all 0.3s;
}
#puasa2018 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;
  z-index: 2;
}
.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 7s 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 7s infinite linear;
}
.malam18 {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  animation: run_malam18 7s 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 7s infinite linear;
}
@media (max-width: 800px) {
  #puasa2018 {
    top: 10px !important;
    left: 10px;
    right: 10px;
    min-height: 250px;
  }
  #puasa2018 .puasa18 {
    font-size: 1.1rem;
    top: 0;
  }
  #puasa2018 .puasa18 .ramadan2018 {
    font-size: 2.2rem;
  }
  .gunung18,
  .hari18,
  .bintang18,
  .malam18 .moon {
    display: none;
  }
} 
3. Cari kode <body> lalu copy kode html berikut dan paste tepat dibawah kode <body>
<div id='puasa2018'>
<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='ramadan2018'>Ramadan 1439 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> 
4. Cari kode </body> lalu copy kode javascript berikut dan paste tepat diatas kode </body>
 $(window).bind("load",function(){$("#puasa2018").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})}); 
5. Simpan Template/Save Template

dan sekarang coba kamu lihat maka akan muncul Pop Up Ramadan seperti punya arlina design tentu saja kamu bisa menggubah kode css nya dengan Gambar misalnya atau apa saja seterah kalian mau mengkreasikan seperti apa saja. Sekian menggenai Tutorial Membuat Popup Ramadan.


See the Pen Pop Up Ramadan by Kang Iyan (@KangIyan) on CodePen.

Berlangganan update artikel terbaru via email:

Show comments
Hide comments

0 Response to "Cara Membuat Popup Ramadan Seperti Punya Arlina"

Post a Comment

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ