Cara Mudah Membuat Ucapan Marhaban Ya Ramadhan Di Blogger Cara Mudah Membuat Ucapan Marhaban Ya Ramadhan Di Blogger - mizipediacom mizipediacom: Cara Mudah Membuat Ucapan Marhaban Ya Ramadhan Di Blogger

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Mudah Membuat Ucapan Marhaban Ya Ramadhan Di Blogger

Tuesday, 30 May 2017



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