Cara Membuat Landing Page Blogspot dengan Lajang Spot

Apa itu Landing Page dan bagaimana Cara Membuat Landing Page di Blogspot dengan Template Lajang Spot?

Pertama kita akan bahas sedikit apa pengertian dan komponen dari Landing Page.

1. Pengertian dan Komponen Landing Page

Menurut wikipedia landing page adalah..

Halaman web tunggal yang muncul sebagai tanggapan terhadap mengklik pada hasil pencarian mesin pencari yang dioptimalkan, promosi pemasaran, email pemasaran, atau iklan online.

Berdasarkan pengertian tersebut, landing page merupakan halaman web yang sengaja dibuat sebagai halaman landas ketika seseorang mengklik tautan yang diberikan.

Umumnya, landing page dibuat untuk tujuan komersial. Misalnya untuk menawarkan produk dan jasa.

Adapun komponen dalam membuat landing page, adalah sebagai berikut.

• Headline.
• Subheadline.
• Gambar / Video.
• Badan / Isi / Penjelasan.
• Social Proof / Testimonial.
• Call to Action (CTA).

2. Mengapa Membuat Landing Page di Blogspot

Berikut ini sejumlah alasan mengapa membuat landing page di blogspot.

• Mudah digunakan, sangat cocok untuk pemula.
• Fitur yang lumayan lengkap.
• Bisa digunakan untuk menghasilkan uang dari blog.
• Aman dan terpercaya karena merupakan salah satu layanan milik Google.
• Gratis digunakan.

3. Cara Membuat Landing Page di Blogspot

Nah, setelah mengetahui apa itu dan komponen, serta alasan membuat landing page di blogspot, sekarang kita akan belajar "Cara Membuat Landing Page di blogspot.

Di sini, saya menggunakan Template Lajang Spot.

Jika Anda menggunakan template blogger yang berbeda dalam membuat landing page, bisa ditiru komponen dan materi landing page yang dibahas di sini.

Ada tiga cara membuat landing page di template lajang spot yang akan kita bahas:

1. Membuat landing page di postingan.
2. Membuat landing page di homepage.
3. Membuat landing page katalog di halaman label produk / jasa.

Untuk yang pertama, sudah dibahas secara khusus pada Kode HTML Postingan Produk di Lajang Spot.

Untuk yang ketiga, sudah dibahas juga secara khusus pada postingan Cara Membuat Katalog Produk di Lajang Spot.

Sehingga pada postingan ini, kita hanya akan membahas yang kedua saja.

Untuk yang kedua yaitu di homepage, kita bisa membuat landing page khususnya menggunakan template lajang spot dengan memanfaatkan widget khusus untuk landing page di Menu Tata Letak yang berada pada atas dan bawah widget blog.

4. Cara Membuat Landing Page dengan Template Lajang Spot

Kita akan membahas bagaimana membuat landing page menggunakan template Lajang Spot di homepage.

Apa itu homepage?

Homepage adalah halaman beranda atau halaman depan dari blog kita.

Dimana pada halaman ini, umumnya berisi daftar postingan terbaru.

Kita dapat mengubah homepage blog kita menjadi landing page.

Berikut ini langkah-langkah dalam membuat landing page di homepage.

#4.1 Setting Landing Page

Landing page dibuat satu kolom agar pembaca fokus pada konten landing page hingga pembaca mengambil tindakan yang diinginkan.

Pada template Lajang Spot, Anda bisa mengatur untuk menyembunyikan apa yang tidak perlu ada di landing page sebagai berikut.

• Buka menu "Tata Letak Blog".
• Edit kode pada "Widget Setting Landing Page" sebagai berikut.

<script>
var landingPageSetting  = {navMenuHomepage: false, btnSearchHomepage: false, navMenuPostDijual: false, btnSearchPostDijual: false, blogWidgetHomepage:true, footerWidgetHomepage:false,};
</script>

Silahkan ganti "true" atau "false" untuk menampilkan atau menyembunyikan sesuai keinginan.

• navMenuHomepage: menampilkan atau menyembunyikan menu navigasi di homepage.
• btnSearchHomepage: menampilkan atau menyembunyikan button search di homepage.
• navMenuPostDijual: menampilkan atau menyembunyikan menu navigasi di postingan dijual produk atau jasa.
• btnSearchPostDijual: menampilkan atau menyembunyikan button search di postingan dijual produk atau jasa.
• blogWidgetHomepage: menampilkan atau menyembunyikan widget postingan blog di homepage.
• footerWidgetHomepage: menampilkan atau menyembunyikan widget footer blog di homepage.

#4.2 Membuat Headline Landing Page

Headline atau judul landing page adalah jenis huruf tebal besar di bagian atas halaman landing page.

Headline adalah hal pertama yang dibaca siapa pun ketika mereka tiba di landing page.

Landing page adalah jenis halaman khusus yang memiliki satu fokus, yaitu mengonversi calon pelanggan pada beberapa tindakan yang diinginkan (seperti mengisi formulir atau melakukan pembelian atau meminta demo).

Berikut ini praktik terbaik dalam membuat headline landing page.

• Memperjelas tentang tawaran itu.
• Menjanjikan manfaat tertentu.
• Tambahkan sesuatu yang menarik.

Jadi, bagaimana Anda menulis headline yang sangat jelas tentang tawaran itu, menjanjikan manfaat tertentu, dan memiliki hal yang menarik tanpa terlalu bertele-tele?

Untuk membuat headline, kita bisa menggunakan kode HTML berikut ini.

<div id="headline"><h2>Template Lajang Spot Bisa Ngiklan Konversi di Facebook Ads dengan Mudah</h2></div>

Letakkan kode ini pada Widget LP Header Section (Homepage) dengan menuliskannya di dalam elemen <div class="lp-header-content"> sebegai berikut.

<div class="lp-header-content"> 
  <div id="headline"><h2>Lajang Spot, Template Landing Page untuk Jualan sambil Ngeblog</h2>
</div>

Kita bisa memformat teks pada headline dengan teks garis bawah, teks garis miring, dan sebagainya.

Anda bisa mempelajari bagaimana Memformat Teks pada HTML Blog.

Misalnya saya ingin membuat garis bawah pada teks "Bisa Iklan Konversi" dan memiringkan teks "dengan mudah", maka kode HTML-nya adalah:

<div id="headline"><h2>Template Lajang Spot <ins>Bisa Iklan Konversi</ins> di Facebook Ads <em>dengan Mudah</em></h2></div>

Hasilnya:

Template Lajang Spot Bisa Iklan Konversi di Facebook Ads dengan Mudah

Kita juga bisa memformat teks pada headline dengan menggunakan mark text.

Misalnya, saya ingin memberikan mark text pada teks "Lajang", maka kode HTML menjadi:

<div id="headline">Template <mark>Lajang</mark> Spot <ins>Bisa Iklan Konversi</ins> di Facebook Ads <em>dengan Mudah</em></div>

Hasilnya:

Template Lajang Spot Bisa Iklan Konversi di Facebook Ads dengan Mudah

Dalam membuat headline, cukup memberikan formating text maksimal tiga saja.

Kita bisa mengkombinasikannya dengan memberi warna pada teks, misalnya warna merah atau warna utama template blog.

Di Template Lajang Spot sudah ditambahkan kode CSS sebagai cara memberikan pewarnaan pada teks.

• font-red untuk memberi warna merah.
• font-orange untuk memberi warna orange.
• font-color untuk memberi warna utama template blog.

Untuk memberikan warna pada teks khusus di headline, kita menggunakan tag <span class="class-name">teksnya di sini</span>

Contoh warna merah, ganti class-name dengan font-red sebagai berikut.

<span class="font-red">teksnya di sini</span>

Hasilnya:

teksnya di sini

Contoh warna orange, ganti class-name dengan font-orange sebagai berikut.

<span class="font-orange">teksnya di sini</span>

Hasilnya:

teksnya di sini

Contoh warna utama template blog, ganti class-name dengan font-color sebagai berikut.

<span class="font-color">teksnya di sini</span>

Hasilnya:

teksnya di sini

Sekarang kita terapkan pada headline.

Misalnya saya ingin memberi warna merah pada teks "Template Lajang Spot" sebagai berikut.

<div id="headline"><span class="font-red">Template <mark>Lajang</mark> Spot</span> <ins>Bisa Iklan Konversi</ins> di Facebook Ads <em>dengan Mudah</em></div>

Hasilnya:

Template Lajang Spot Bisa Iklan Konversi di Facebook Ads dengan Mudah

Atau memberi warna orange pada teks "Template Lajang Spot" sebagai berikut.

<div id="headline"><span class="font-orange">Template <mark>Lajang</mark> Spot</span> <ins>Bisa Iklan Konversi</ins> di Facebook Ads <em>dengan Mudah</em></div>

Hasilnya:

Template Lajang Spot Bisa Iklan Konversi di Facebook Ads dengan Mudah

Atau memberi warna utama blog pada teks "Template Lajang Spot" sebagai berikut.

<div id="headline"><span class="font-color">Template <mark>Lajang</mark> Spot</span> <ins>Bisa Iklan Konversi</ins> di Facebook Ads <em>dengan Mudah</em></div>

Hasilnya:

Template Lajang Spot Bisa Iklan Konversi di Facebook Ads dengan Mudah

#4.3 Membuat Subheadline Landing Page

Langkah selanjutnya setelah membuat headline adalah membuat subheadline jika dibutuhkan.

Jika Anda membutuhkan subheadline, maka buatlah untuk lebih memperjelas dan melengkapi kekurangan headline.

Misalnya jika headline Anda kepanjangan maka Anda bisa membuat subheadlinenya, tepat berada di bawah headline.

Jika tag judul headline Anda h2, maka gunakanlah tag judul h3 atau tag p untuk subheadline Anda.

Jadi kode HTML-nya untuk Widget LP Header Section (Homepage) akan seperti ini:

<div class="lp-header-content">

  <div id="headline"><h2>Teks headline di Sini</h2></div>
  <div id="subheadline"><p>Teks Subheadline di Sini</p></div>
  
</div>

Misalnya, saya memiliki headline "Template Lajang Spot, One Column, Responsive, Mobile dan SEO Frienly".

Saya hanya memberikan informasi tentang produknya, tidak memberikan informasi berupa manfaatnya bagi pengguna, serta hal yang menariknya.

Oleh karena itu, saya perlu memberi subheadline di bawahnya yaitu "Bisa Ngeblog dan Jualan Online dalam Satu Blog".

Kode HTML-nya:

<div id="headline"><h2><span class="font-color">Template Lajang Spot</span>, One Column, Responsive, Mobile dan SEO Frienly</h2></div>
<div id="subheadline"><h3>Bisa Ngeblog dan Jualan Online dalam Satu Blog</h3></div>

Hasilnya:

Template Lajang Spot, One Column, Responsive, Mobile dan SEO Frienly

Bisa Ngeblog dan Jualan Online dalam Satu Blog serta Bisa Iklan Konversi di Fb Ads dengan Mudah tanpa perlu Website

Atau saya menmberikan dua warna yang berbeda, teks bold, dan teks miring.

Template Lajang Spot One Column, Responsive, Mobile dan SEO Friendly

Bisa Ngeblog dan Jualan Online dalam Satu Blog serta Bisa Iklan Konversi di Fb Ads dengan Mudah tanpa Perlu Website

#4.4 Menambahkan Tombol Aksi

Setelah membuat headline dan subheadline, biasanya ada tombol aksi di bawahnya seperti tombol whatsapp atau telepon.

Gunakan kode berikut untuk membuat tombol aksi yang Anda inginkan. Misalnya tombol kontak ke whatsapp atau telepon.

<div class="btn-container"> 
  <a class="btn-primary" href="tel:+6281234567890">Call Now</a> 
  <a class="btn-secondary" href="https://wa.me/6281234567890" target="_blank" rel="nofollow">WhatsApp Now</a> 
</div>

Jadi, kode Widget LP Header Section (Homepage) kita sekarang adalah:

<div class="lp-header-content">
  <div id="headline"><h2>Teks headline di Sini</h2></div>
  <div id="subheadline"><p>Teks Subheadline di Sini</p></div>
  <div class="btn-container"> 
    <a class="btn-primary" href="tel:+6281234567890">Call Now</a> 
    <a class="btn-secondary" href="https://wa.me/6281234567890" target="_blank" rel="nofollow">WhatsApp Now</a> 
  </div>
</div>

#4.5 Menambahkan Iklan Gambar dan Video

Kita bisa menambahkan gambar atau video di bawah headline atau subheadline dengan menggunakan kode HTML berikut.

Untuk menambahkan gambar, kita gunakan kode:

<div class="ads-image"><img alt="Judul gambarnya" src="URL GAMBAR" width="480px" height="480px"></div>

Misalnya, saya menggunakan URL gambar dari template lajang spot, sehingga hasilnya akan seperti di bawah ini.

Untuk menambahkan video upload di blogger, kita gunakan kode:

<div class="ads-video"><object class="BLOG_video_class" contentid="ID_VIDEO" height="480" id="BLOG_video-ID_VIDEO" width="480"></object></div>

Untuk menambahkan video youtube, kita gunakan kode:

<div class="ads-video"><p><a href="https://www.youtube.com/watch?v=ID_VIDEO">https://www.youtube.com/watch?v=ID_VIDEO</a></p></div>

Letakkan kode ads-image atau ads-video setelah elemen class lp-header-content.

Jadi, kode Widget LP Header Section (Homepage) kita sekarang adalah:

<div class="lp-header-content">
  <div id="headline"><h2>Teks headline di Sini</h2></div>
  <div id="subheadline"><p>Teks Subheadline di Sini</p></div>
  <div class="btn-container"> 
    <a class="btn-primary" href="tel:+6281234567890">Call Now</a> 
    <a class="btn-secondary" href="https://wa.me/6281234567890" target="_blank" rel="nofollow">WhatsApp Now</a> 
  </div>
</div>

<div class="ads-image">
  <img alt="Judul gambarnya" src="URL GAMBAR" width="480px" height="480px">
</div>

#4.6 Menambahkan Keterangan Lokasi di Kiri Atas Headline

Biasanya ini digunakan untuk landing page layanan lokal. Kode html-nya sebagai berikut.

<div class="lp-location"> 
  <svg width="20" height="20" fill="currentColor" class="bi bi-geo-alt-fill" viewbox="0 0 16 16"> 
    <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path> 
  </svg> 
  <span>Layanan Iklan Jakarta</span> 
</div>

Jadi, kode Widget LP Header Section (Homepage) kita sekarang adalah:

<div class="lp-header-content">
  <div class="lp-location"> 
    <svg width="20" height="20" fill="currentColor" class="bi bi-geo-alt-fill" viewbox="0 0 16 16"> 
      <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path> 
    </svg> 
    <span>Layanan Iklan Jakarta</span> 
  </div>
  <div id="headline"><h2>Teks headline di Sini</h2></div>
  <div id="subheadline"><p>Teks Subheadline di Sini</p></div>
  <div class="btn-container"> 
    <a class="btn-primary" href="tel:+6281234567890">Call Now</a> 
    <a class="btn-secondary" href="https://wa.me/6281234567890" target="_blank" rel="nofollow">WhatsApp Now</a> 
  </div>
</div>

<div class="ads-image">
  <img alt="Judul gambarnya" src="URL GAMBAR" width="480px" height="480px">
</div>

#4.7 Menambahkan Badan Landing Page

Badan dari suatu landing adalah tempat kita menjelaskan tentang apa dan mengapa harus memesan atau memakai produk / jasa yang ditawarkan.

Badan dari suatu landing page dapat berisi:

• Filtering Audience
• Statement
• What Product
• Why Product

Untuk poin 1 dan 2 diletakkan pada Widget LP Statement Section, poin 3 diletakkan pada Widget LP What Product Section.

Untuk poin 4, letakkan pada Widget LP Why Product Section.

Untuk kode HTML-nya masing-masing, saya sudah menjelaskannya pada postingan "Kode HTML Postingan Produk Lajang Spot" yang bisa Anda baca mulai dari Filtering Audience.

#4.8 Menambahkan Social Proof / Testimonial

Kita bisa menambahkan social proof atau testimonial seperti slider testimoni pada Widget Testimoni (Homepage) yang berada pada Widget LP Social Proof Section.

Adapun kode HTML-nya bisa dicopy pada bagian Social Prof di "Kode HTML Postingan Produk Lajang Spot".

#4.9 Menambahkan Harga dan Cara Pemesanan

Price (harga), Promo, dan Scarcity (keterbatasan) serta cara pemesanan bisa kita tambahkan secara sekaligus pada Widget LP PPS Section.

Adapun kode HTML-nya juga ada pada pada pembahasan PPS di "Kode HTML Postingan Produk Lajang Spot".

#4.10 Menambahkan Call to Action

Jika Anda menggunakan form order, Anda tidak perlu menambahkan tombol "Pesan Sekarang" karena sudah ada di bawah form order.

Tapi jika Anda tidak menggunakan form order, bisa menambahkan secara manual tombol pesan sekarang, atau tombol CTA sesuai tujuan landing page Anda.

Kode HTML yang digunakan untuk membuat tombol CTA adalah:

<div class="btn-container"><a class="btn-primary" href="#">Pesan Sekarang</a></div>

Note: Ganti yang bertanda merah dengan URL CTA Anda, misal URL yang mengarahkan ke pesan WA. Ganti yang bertanda hijau dengan teks tombol CTA Anda.

Pelajari selengkapnya tentang Button (Tombol).

#4.11 Setting Form Order Homepage

4.11.1 Setting Form Order

Anda bisa mengatur form order di homepage dengan cara sebagai berikut.

• Masuk ke menu “Tata Letak” pergi ke bagian Widget Setting Form Order Homepage.
• Klik edit pada Widget Custom Form Order.
• Setelah itu edit kode berikut ini.

var phoneAdmin = ['6281234567890', '6281234567890'];
var lajangSpotCTA = {formOrder:true, buttonWA: true, textButtonWA:'Send to WhatsApp'};
var formSetting = {product:true, numProducts:false, notes:false, payment:false, myName:true, phone:true, email:true, city:false, districts:false, adress:false,  url:false};
var inputWajib = {product:false, numProducts:false, notes:false, payment:false, myName:true, phone:true, email:false, city:false, districts:false, adress:false,  url:false};

• var phoneAdmin: Ganti dengan nomor WhatsApp Anda atau CS Anda. Bisa ditambahakn lebih dari satu nomor WhatsApp yang akan didistribusikan secara merata jika ada pesanan yang masuk ke pesan WhatsApp.
• var lajangSpotCTA: Ganti true dengan false atau sebaliknya jika ingin menampilkan atau menyembunyikan form order, serta ganti teks CTA sesuai keinginan. Jika ingin menyembunyikan form order maka atur formOrder dan buttonWA bernilai false.
• var formSetting: Ganti true dengan false atau sebaliknya jika ingin menampilkan atau menyembunyikannya pada form order. Misalnya jika tidak ingin menampilkan nama produk pada form order maka gunakan kode product:false.
• var inputWajib: Ganti true dengan false atau sebaliknya jika ingin inputan pada form order harus diisi atau tidak. Dalam melakukan pengaturan ini, hanya berlaku pada var formSetting apa saja yang bernilai true (yang tampil pada form order).

Jika Anda salah dalam menuliskan kode atau tidak sesuai ketentuan di atas, maka script form order akan error sehingga tidak bisa memproses inputan pada form order.

4.11.2 Masukan Nama Produk

Anda bisa memasukkan atau mengedit inputan otamatis nama produk di homepage sebagai berikut.

• Masuk ke menu “Tata Letak” pergi ke bagian Widget Setting Form Order Homepage.
• Klik edit pada Widget Nama Produk.
• Setelah itu edit nama produk landing page Anda.

4.11.3 Edit atau Tambahkan Opsi Metode Pembayaran

Jika Anda tidak menyembunyikan metode pembayaran, Anda bisa mengedit atau menambahkan opsi metode pembayaran sebagai berikut.

• Masuk ke menu “Tata Letak” pergi ke bagian Widget Setting Form Order Homepage.
• Klik edit pada Widget Metode Pembayaran.
• Setelah itu edit kode berikut ini.

<option />Bayar di Tempat (COD)  <option/>Transfer Bank BRI <option/>Transfer Bank BNI

Note: Jangan gunakan enter, gunakan spasi saja untuk memisahkan. Untuk menambahkan metode pembayaran, cukup tambahkan saja kode berikut ini.

<option/>Nama Metode Pembayaran

#4.12 Menambahkan FAQ (Frequently Asked Questions)

Salin-tempel dan edit kode di bawah ini pada Widget LP Faq Section.

<div id="faq"> 
  <h2>FAQ-nya</h2> 
  <details> 
    <summary>pertanyaan-1?</summary> 
    <p>Jawaban-1</p> 
  </details> 
  <details> 
    <summary>Pertanyaan-2?</summary> 
    <p>Jawaban-2</p> 
  </details> 
  <details> 
    <summary>Pertanyaan-3?</summary> 
    <p>Jawaban-3</p> 
  </details> 
</div>

#4.13 Menambahkan CTA Final

Salin-tempel dan edit kode di bawah ini pada Widget LP CTA Section.

<h2>Jangan Biarkan Kompetitor Mendahului Anda</h2> 
<p>Pesan sekarang juga sebelum promo berakhir!</p> 
<div class="btn-container"> 
  <a class="btn-primary" href="tel:+6281234567890">Telepon Sekarang</a> 
  <a class="btn-secondary" href="https://wa.me/6281234567890">WhatsApp Saya</a> 
</div>

#4.14 Menambahkan Gallery

Salin-tempel dan edit kode di bawah ini pada Widget LP Gallery Section.

<h2>Slideshow Images</h2> 
<div class="lp-slideshow"> 
  <div class="lp-slide"> 
    <img alt="judul gambar-1" height="480px" src="#url-gambar-1" width="480px" /> 
    <p>Caption Gambar-1</p> 
  </div> 
  <div class="lp-slide"> 
    <img alt="judul gambar-2" height="480px" src="#url-gambar-2" width="480px" /> 
    <p>Caption Gambar-2</p> 
  </div> 
  <div class="lp-slide"> 
    <img alt="judul gambar-3" height="480px" src="#url-gambar-3" width="480px" /> 
    <p>Caption Gambar-3</p> 
  </div> 
<a class="prev" data-action="prev">&#10094;</a> 
<a class="next" data-action="next">&#10095;</a> 
</div> 
<div class="lp-dot-container"> 
  <span class="lp-dot" data-slide-index="0"></span> 
  <span class="lp-dot" data-slide-index="1"></span> 
  <span class="lp-dot" data-slide-index="2"></span> 
</div>

#4.15 Menambahkan Footer Content

Ada 3 widget yang ada pada Widget LP Footer Section yang bisa Anda gunakan.

Hal ini bermanfaat untuk menambah informasi "About", "Contact Us", dan semacamnya.

#4.16 Menambahkan Floating Contact

Anda bisa membuat tombol kontak melayang di landing page Anda dengan menambahkan nomor telepon dan whatsapp pada Widget LP Floating Contact Section.

---

Nah, demikianlah "Cara Membuat Landing Page di Blogspot dengan Lajang Spot", bagi Anda yang belum memiliki, silahkan beli templatenya di Lajang Spot.

Semoga bermanfaat..