×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

Cara Membuat Landing page di Template Viomagz

Faronesia.com - Hallo sahabat faronesia, beberapa blogger yang sering berkunjung ke faronesia 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 Faromagz. 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 faronesia.com. Pada tutorial kali ini saya masih menggunakan Viomagz v.2.6 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.
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>
/* LANDING PAGE BY FARONESIA */
.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;
}
  • 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
<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>
  • Agar landingpage muncul hanya di tampilan awal atau homepage url silahkan tambahkab kode seperti yang berwarna kuning seperti dibawah ini
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<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>
  • Terakhir, tempelkan javascript dibawah ini tepat diatas kode </body>
<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>
  • Lalu simpan dan terapkan template yang sudah anda modif
  • Lihat hasilnya
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.
Buka komentar
Tutup komentar
  1. Kereeen bangettttt..... Izin coba ahhh 😆

    ReplyDelete
  2. Mantap gan, itu thumbnailnya mirip pornhub 😅

    ReplyDelete
  3. Cara ganti warna gimana ya?

    ReplyDelete
  4. Wah makasih ya ilmunya. Kebetulan baru bikin blog pake CMS blogspot template viomagz. Bakal langsung dicoba

    ReplyDelete
    Replies
    1. Trimakasih sudah mampir gan, jgn bosan² mampir kembali hehe

      Delete
  5. gan caranya biar baground nya tidak bergerak gimana?

    ReplyDelete
    Replies
    1. Di tutorial ini background tidak gerak gan

      Delete
  6. How to do this on a static page?

    ReplyDelete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial