Cara Membuat Pop Up Ucapan Selamat Menunaikan Ibadah Puasa Ramadhan
Assalamualaikum Sahabat Blogger.
Cara Membuat Pop Up Ucapan Selamat Menunaikan Ibadah Puasa Ramadhan - Perkataan yang indah adalah "Allah". Lagu yang merdu adalah "Adzan". Media yang terbaik adalah "Al-Qur'an". Senam yang sehat adalah "Sholat". Diet yang sempurna adalah "Puasa". Kebersihan yang menyegarkan adalah "Wudhu". Perjalanan yang indah adalah "Haji". Ingatan yang baik adalah ingat akan "Dosa & Taubat". Semoga dibulan yang suci ini membawa iman dan taqwa. Marhaban ya Ramadhan. Selamat Menjalankan Ibadah Puasa di Bulan Suci Ramadhan 1440 H.

Pada kesempatan yang indah ini, saya ingin berbagi tutorial "Cara Membuat Ucapan Selamat Berpuasa", tutorial ini sebenarnya sudah ada banyak bertebaran di Google. Namun, tidak ada salahnya jika saya ingin berbagi cara ini kepada kalian semua. Cara kerja pop up ini sangat sederhana, pop up ini akan muncul apabila anda membuka suatu halaman di dalam blog. Pop up ini juga dilengkapi dengan tombol "X" atau "Close" untuk menutup pesan tersebut. Untuk anda yang ingin menerapkan pop up ini, silakan simak baik-baik tutorial dibawah ini :

Cara Membuat Ucapan Selamat Berpuasa

Tahap #1
Buka dashboard blog anda -> Pilih menu "Tema" -> Klik "Edit HTML" Kemudian anda cek template blog anda apakah sudah ada scipt Fontawesome atau belum, jika sudah ada, anda bisa lanjut ke Tahap #2. Namun, untuk anda yang templatenya belum ada script FontAwesome, silakan anda tambahan script dibawah ini diatas kode </head>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Tahap #2
Letakkan kode CSS dibawah ini tepat diatas kode </head> atau &lt;/head&gt;
<style type="text/css">
  <!-- Pop Up Animation Ucapan Ramadhan by MasPutro.com -->
  @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>
Tahap #3
Letakkan kode HTML dibawah ini tepat diatas kode </body> atau &lt;/body&gt;
<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>
Tahap #4
Tambahkan kode JavaScript dibawah ini tepat diatas kode </body> atau &lt;/body&gt;
<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>
Tahap #5
Simpan tema

!! Catatan !!
Apabila tombol "X" atau "Close" tidak dapat berfungsi dengan baik, anda bisa menambahkan kode dibawah ini tepat diatas kode </head> atau &lt;/head&gt;
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'>
</script>
Dan itulah Cara Membuat Pop Up Ucapan Selamat Menunaikan Ibadah Puasa Ramadhan, semoga tutorial kali ini dapat bermanfaat untuk kita semua. Terimakasih Wassalamualaikum.
Penulis : MasPutro.com

Post a Comment

Lebih baru Lebih lama