Cara Membuat Landing Page VioMagz di Blogger Gratisan

Jagoandzgn.com - Landing page ini sangat berperan penting untuk salah satu media untuk jualan online, Nah dengan landing ini anda bisa leluasa untuk menjelaskan produk yang anda jual secara detail kepada sang pembeli untuk menawarkan produk anda.


Ini salah satu fitur yang sangat luar biasa dan sulit disaingin oleh metode konvensional dengan landing page anda pun juga bisa melacak data pengunjung menggunakan teknologi tracking bisa melalui Facebook maupun Google analytics dan pada tutorial kali ini saya akan membuat tutorial ini dengan menggunakan Viomagz versi 3.2.

Cara Membuat Landing Page Viomagz di Blogger Gratisan

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke menu TEMA  > Klik Edit HTML
3. Selanjutnya silahkan cari kode ]]></b:skin > dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* Landing Page by Jagoandzgn */
.jagoandzgn-landing {
  width: 100%;
  height: 100vh;
  background: #000;
  position: relative;
  overflow: hidden;
  -webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
}
.jagoandzgn-landing::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://wallpaperplay.com/walls/full/e/a/1/6001.jpg) no-repeat;
  background-size: cover;
  opacity: .5;
  animation: anim 25s linear infinite;
}
@keyframes anim {
  50%{
    transform: scale(2);
  }
  100%{
    transform: scale(1);
  }
}
.jagoandzgncont{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  width: 100%;
  max-width: 800px;
  text-align: center;
  padding: 0 40px;
  box-sizing: border-box;
}
.jagoandzgncont h1{
  color: #fff;
  text-transform: uppercase;
  font-size: 35px;
  font-weight: 900;
  margin-bottom: 20px;
}
.jagoandzgncont h2{
  color: #fff;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 20px;
}
.jagoandzgncont p{
  color: #fff;
  font-size: 18px;
  margin-bottom: 20px;
}
.jagoandzgncont a{
  display: inline-block;
  text-decoration: none;
  color: #fff;
  border: 2px solid #fff;
  border-radius:50px;
  background: #d91e18;
  text-transform: uppercase;
  padding: 10px 20px;
  transition: 0.4s linear;
}
.jagoandzgncont a:hover{
  color: #d91e18;
  background: #fff;
  border: 2px solid #d91e18;
}

4. Selanjutnya silahkan cari kode </header>...</div> dan copy kode dibawah ini tepat DIBAWAH kode tersebut.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='jagoandzgn-landing'>
      <div class='jagoandzgncont'>
        <h1>Your title</h1>
        <h2>Landing page by Jagoandzgn.com</h2>
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <a data-scroll='#main' data-scroll-offset='-70' data-scroll-speed='600' href='#main'><i class='fas fa-angle-double-down faa-flash animated'/> go to content</a>
      </div>
    </div>
</b:if>

5. Langkah terakhir silahkan copy kode dibawah ini dan paste tepat DIATAS kode </body> tersebut.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $('a[href^="#main"]').on('click',function (e) {
     e.preventDefault();
     var target = this.hash,
     $target = $(target);
     $('html, body').stop().animate({
         'scrollTop': $target.offset().top
     }, 1000, 'swing', function () {
         window.location.hash = target;
     });
 });
});
//]]>
</script>

6. Kalau sudah silahkan klik SIMPAN dan Selesai.


Bagaimana mudah bukan untuk tutorial Cara Membuat Landing Page Viomagz di Blogger Gratisan, apabila kamu memiliki pertanyaan seputar blogger silahkan komen dikolom komentar dibawah artikel ini.

Sumber : Faronesia.com
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    2 Komentar

    1. hai admin, mau tanya bagaimana cara hidden first image ?
      jadi hanya tampil di thumbnail homepage saja, sedangkan pada post ke hidden.
      thankyou

      BalasHapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel