Cara Mudah Membuat Ucapan Marhaban Ya Ramadhan Di Blogger




Cara Mudah Membuat Ucapan Marhaban Ya Ramadhan Di Blogger
Cara Mudah Membuat Ucapan Marhaban Ya Ramadhan Di Blogger
Pada kesempatan kali ini saya akan share Cara Mudah Membuat Ucapan Marhaban Ya Ramadhan Di Blogger, mungkin jika anda ingin melihat versi demo nya anda bisa melihat di blog saya. Sebenarnya tutorial ini sudah di bagikan oleh kompi ajaib, namun tidak ada salah nya saya share kembali agar memudah kan para blogger untuk mendapatkan tutorial seperti ini.

Padahal sebelum puasa saya ingin share artikel ini tetapi saya tidak ada waktu, namun berhubung sudah memasuki 4 hari puasa, pada hari ini lah saya ada kesempat untuk membuat artikel ini, jika anda merasa muslin dan ingin membuatkan kata ucapan selamat ramadhan, anda bisa menerapkan kode-kode yang telah di siapkan di bawah ini. 

Untuk langkah-langkah awal penerapannya diblog anda, ikuti langkah-langkah dibawah ini.

Cara Mudah membuat ucapan ramadhan

  1. Seperti biasa ya gan, pastikan andaudah masuk di Akun Blogger sendiri atau disini.
  2. Masuk pada bagian editor template , untuk caranya pilih Menu Template -> Edit HTML.
  3. Anda copy kan kode di bawah ini pastekan di atas kode </head>  (cara cepat tekan CTRL+F)
  4. <style type='text/css'>
    
    /*<![CDATA[*/
    
    .parallax {
    
      background: url(https://1.bp.blogspot.com/-eDvnHc9Xte8/WRwNHL66RsI/AAAAAAAArII/-9hXRACvQA0mVeHV2KKC86yf6ENEuTNTgCLcB/s1600/ramadhan.png);
    
      background-repeat: no-repeat;
    
      background-size: 100% 100%;
    
      height:100vh;
    
      width:100%;
    
      position:relative;
    
      z-index:9999;
    
    }
    
    
    
    .parallax h2 {
    
      text-align: center;
    
      padding: 70vh 0 0;
    
      font-size: 4em;
    
      line-height:1;
    
      color: white;
    
      font-family: "Trebuchet MS";
    
      margin:0;
    
    }
    
    .parallax p {
    
      text-align: center;
    
      padding: 20px 50px 0;
    
      margin:0;
    
      font-size: 2em;
    
      color: white;
    
      font-family: "Trebuchet MS";
    
    }
    
    .parallax .arrow_down{
    
      position:absolute;
    
      width:60px;
    
      height:60px;
    
      bottom:20px;
    
      left:50%;
    
      margin-left:-30px;
    
      font-size:24px;
    
      color:#fff;
    
    }
    
    .parallax .close_parallax{
    
      position:absolute;
    
      width:20px;
    
      height:20px;
    
      top:20px;
    
      right:25px;
    
      font-size:34px;
    
      line-height:1;
    
      color:#fff;
    
      cursor:pointer;
    
    }
    
    .parallax .bounce {
    
      -webkit-animation-name: bounce;
    
      animation-name: bounce;
    
      -webkit-transform-origin: center bottom;
    
      -ms-transform-origin: center bottom;
    
      transform-origin: center bottom;
    
      -webkit-animation-duration: 1s;
    
      animation-duration: 1s;
    
      -webkit-animation-fill-mode: both;
    
      animation-fill-mode: both;
    
      animation-iteration-count: infinite;
    
      }
    
      @-webkit-keyframes bounce {
    
      0%, 20%, 53%, 80%, 100% {
    
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    
      -webkit-transform: translate3d(0,0,0);
    
      transform: translate3d(0,0,0);
    
      }
    
      40%, 43% {
    
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    
      transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    
      -webkit-transform: translate3d(0, -30px, 0);
    
      transform: translate3d(0, -30px, 0);
    
      }
    
      70% {
    
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    
      transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    
      -webkit-transform: translate3d(0, -15px, 0);
    
      transform: translate3d(0, -15px, 0);
    
      }
    
      90% {
    
      -webkit-transform: translate3d(0,-4px,0);
    
      transform: translate3d(0,-4px,0);
    
      }
    
      }
    
      @keyframes bounce {
    
      0%, 20%, 53%, 80%, 100% {
    
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    
      -webkit-transform: translate3d(0,0,0);
    
      transform: translate3d(0,0,0);
    
      }
    
      40%, 43% {
    
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    
      transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    
      -webkit-transform: translate3d(0, -30px, 0);
    
      transform: translate3d(0, -30px, 0);
    
      }
    
      70% {
    
      -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    
      transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    
      -webkit-transform: translate3d(0, -15px, 0);
    
      transform: translate3d(0, -15px, 0);
    
      }
    
      90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);
    
      }
    
      }
    
    @media screen and (max-width:1024px){.parallax h2 {
    
      padding: 60vh 0 0;
    
      font-size: 2em;
    
    }
    
    .parallax p {
    
      font-size: 1em;
    
    }
    
    }
    
    @media screen and (max-width:375px){.parallax h2 {
    
      padding: 50vh 0 0;
    
    }
    
    }
    
    /*]]>*/
    
    </style>
  5. Kemudian anda copy kode HTML di bawah dan paste di atas kode <body>
    <section class="parallax" id="parallax">
        <h2>Marhaban Ya Ramadhan</h2>
        <p>Selamat menunaikan ibadah puasa, semoga amal ibadah kita diterima Allah SWT, aamiin.</p>
        <div class="arrow_down bounce"><img alt="down" width="60" height="60" src="https://3.bp.blogspot.com/-HJTeFvBoI8Y/WRwS6wxAnKI/AAAAAAAArIc/-QlF5qgEi7AKTZxNnm2TRpTnfx4VKKOEQCLcB/s1600/chevron-double-down%2B%25281%2529.png" /></div>
        <div class="close_parallax" onclick="hideParallax()" title="Close">&amp;times;</div>
      </section>
  6. Untuk langkah terakhir anda copas kode Javascript di bawah ini dan letakan di atas kode </body>
    <script type='text/javascript'>
    //<![CDATA[
    var parallax= document.querySelector(".parallax");
    window.addEventListener("scroll", function() {
       var scrolledHeight= window.pageYOffset,
                    limit= parallax.offsetTop+ parallax.offsetHeight;             
      if(scrolledHeight > parallax.offsetTop && scrolledHeight <= limit) {
        parallax.style.backgroundPositionY=  (scrolledHeight - parallax.offsetTop) /1.5+ "px";
        } else {
         parallax.style.backgroundPositionY=  "0";
        }
         });
    function hideParallax() {
    document.getElementById("parallax").style.display = "none";
    };
    //]]>
    </script>
  7. Taraaa sekarang sudah selesai, bisa anda klik save template. Jangan lupa baca Bismillah agar berhasil untuk pembuatannya. 
Demikian lah tutorial saya pada sore ini, selamat mencoba dan semoga bisa berhasil. Jika terdapat kurang paham dan kurang di mengerti untuk penerapannya di blog anda, bisa anda tanyakan di kolom komentar dibawah ini.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect