Cara Membuat Landing Page VioMagz Pada Blogger Free

OIFnews.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.


ni 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 OIF News */
.oifnews-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
}
.oifnews-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);
  }
}
.oifnewscont{
  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;
}
.oifnewscont h1{
  color: #fff;
  text-transform: uppercase;
  font-size: 35px;
  font-weight: 900;
  margin-bottom: 20px;
}
.oifnewscont h2{
  color: #fff;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 20px;
}
.oifnewscont p{
  color: #fff;
  font-size: 18px;
  margin-bottom: 20px;
}
.oifnewscont 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;
}
.oinewscont 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='oifnews-landing'>
      <div class='oifnewscont'>
        <h1>Your title</h1>
        <h2>Landing page by OIFnews.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.

Show comments
Hide comments

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel