Cara Membuat Landing Page Di Viomagz

Satriaryan22.com - Hallo sahabat blogger, beberapa blogger yang sering berkunjung ke blog saya mungkin sudah kenal dan tidak asing lagi dengan template Viomagz.  Template yang satu ini bahkan menjadi primadona bagi sebagian kalangan blogger indonesia terlebih bagi para desainer dan modifikator blog termasuk admin disini dan menjadi Ignimagz. Pasalnya, bagi beberapa blogger memiliki anggapan bahwa kode yang diterapkan pada Template Viomagz tersusun dengan rapi dan terurai, dengan begitu akan mempermudah para modifikator untuk memodifikasi bagian-bagiannya tanpa mengalami banyak kesulitan.

Sepertinya hanya saya seorang yang memodifikasi dan membagikan tutorial Viomagz original menjadi sebuah Viomagz landingPage sebab selama ini saya belum pernah menemukan artikel Viomagz landingpage maupun tutorial Viomagz landingpage di pencarian browser manapun.

Namun, sekarang anda bisa menemukan artikel dan tutorial yang membahas cara membuat Viomagz Landing page di satriaryan22.com. Pada tutorial kali ini saya masih menggunakan Viomagz v.3.3 sebagai bahan percobaan.

Viomagz landing page ini saya buat awalnya hanya coba-coba sekedar mengasah keterampilan desain blog yang saya miliki, dan sekarang anda juga bisa mencobanya dirumah dengan mengikuti tutorial dibawah ini.

Sebenarnya tutorial ini bisa anda terapkan di template manapun, tetapi akan ada perbedaan sedikit cara penempatannya. Hal ini akan bisa anda lakukan untuk bereksperimen modifikasi template yang berbeda selain template viomagz.

Sebelum berlanjut ke tutorialnya, saya ingatkan kembali bahwa backup template anda terlebih dahulu untuk berjaga-jaga jika anda melakukan kesalahan seperti salah menempatkan kode, error, dan lainnya.

Demo viomagz landingpage

Cara Membuat LandingPage di Template Viomagz

• Masuk ke dashboard blog 

• Lalu masuk ke menu tema blog

• Kemudian klik edit HTML Cari kode ]]></b:skin> lalu tambahkan kode dibawah ini tepat diatas kode ]]></b:skin>

• Yang ditandai dengan warna merah adalah link gambar background, anda bisa menggantinya sesuai keinginan anda

• Lalu cari kode </header> </div>, letakkan kode dibawah ini tepat dibawah kode tersebut

• Agar landingpage muncul hanya di tampilan awal atau homepage url silahkan tambahkab kode seperti yang berwarna kuning seperti dibawah ini

• Terakhir, tempelkan javascript dibawah ini tepat diatas kode </body>

• Lalu simpan dan terapkan template yang sudah anda modif

• Lihat hasilnya

x

/* LANDING PAGE BY SATRARYAN22 */

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

}

.faronesia-landing::after{

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRf9_v1ziNg8-8BzNqdfKTN0fKJun5-NvA-WxEfu2-B2PeqkZi6) no-repeat;

  background-size: cover;

  opacity: .5;

  animation: anim 25s linear infinite;

}

@keyframes anim {

  50%{

    transform: scale(2);

  }

  100%{

    transform: scale(1);

  }

}

.faronesiacont{

  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;

}

.faronesiacont h1{

  color: #fff;

  text-transform: uppercase;

  font-size: 35px;

  font-weight: 900;

  margin-bottom: 20px;

}

.faronesiacont h2{

  color: #fff;

  text-transform: uppercase;

  font-size: 20px;

  font-weight: 800;

  margin-bottom: 20px;

}

.faronesiacont p{

  color: #fff;

  font-size: 18px;

  margin-bottom: 20px;

}

.faronesiacont 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;

}

.faronesiacont a:hover{

  color: #d91e18;

  background: #fff;

  border: 2px solid #d91e18;

}

<div class='faronesia-landing'>

      <div class='faronesiacont'>

        <h1>Your title</h1>

        <h2>Landing page by faronesia.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 cond='data:blog.url == data:blog.homepageUrl'>

<div class='faronesia-landing'>

      <div class='faronesiacont'>

        <h1>Your title</h1>

        <h2>Landing page by satriaryan22.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>

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

Demikianlah mengenai Cara membuat landingpage di template viomagz semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.

Bagikan Artikel ini

KLIK

DONASI VIA DANA Bantu berikan donasi anda jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.satriaryan22.com