Cara Membuat Landing Page di Lajang Spot
Cara Membuat Landing Page di 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:
- Membuat landing page di postingan.
- Membuat landing page di homepage.
- 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 homepage di Menu Tata Letak yang berada pada atas dan bawah widget blog, yaitu:
- Widget HTML #1 (Homepage) yang berada di bawah widget header blog.
- Widget HTML #3 (Homepage) yang berada di atas widget posting blog.
- Widget HTML #6 (Homepage) yang berada tepat di bawah widget posting blog.
- Widget Testimoni (Homepage) untuk menampilkan testimoni yang berada di bawah widget posting blog.
- Widget HCP (Homepage) untuk menulis Harga dan Cara Pemesanan yang berada di bawah widget posting blog.
- Widget Setting Form Order (Homepage) untuk mengatur Form Order yang berada di bawah widget posting blog, yang terdiri dari:
- Widget Nama Produk untuk menulis nama produknya.
- Widget Custom Form Order untuk mengedit formulir pemesanannya.
- Widget Metode Pembayaran untuk menambahkan daftar metode pembayaran yang dapat dipilih.
- Widget HTML #9 (Homepage) yang berada tepat di bawah widget Setting Form Order (Homepage).
Kita bisa memulai menyusun landing page dari "Widget HTML #1 (Homepage)", tapi kalau saya lebih memilih memulai dari "Widget HTML #3 (Homepage)".
Agar ngeditnya hanya pada satu widget khusus di atas postingan blog yaitu "Widget HTML #3 (Homepage)" dan satu widget khusus di bawah postingan blog yaitu "Widget HTML #6 (Homepage)".
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.
Jadi, dalam membuat landing page, usahakan yang pertama kali dilihat adalah headline dari produk atau jasa yang ditawarkan.
Oleh karena itu, agar pembaca fokus, kita harus meniadakan link-link ke luar dari landing page seperti menu navigasi, button search, dan sebagainya.
Pada template Lajang Spot, Anda bisa mengatur untuk menyembunyikannya 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 Button Down CTA
Button down ini, digunakan untuk mengarahkan pengunjung untuk bisa segera melakukan "tindakan" yang kita inginkan.
Letaknya tepat di bawah header blog kita.
Yang apabila diklik, akan mengarahkan ke bagian "tindakan" yang kita inginkan yang berada di bawah.
Tindakan yang kita pasang di landing page kita disebut dengan istilah "Call to Action" yang biasa disingkat dengan CTA.
Karena yang kita inginkan dari pengunjung adalah memesan produk atau jasa, maka tindakan yang kita inginkan adalah Pesan Sekarang.
Jadi, CTA-nya adalah sebuah tombol pesan sekarang, sehingga kita membuat button down yang bertuliskan "Pesan Sekarang" menggunakan kode HTML berikut ini yang akan mengarahkan ke tombol CTA yang sebenarnya.
Kode CTA button down:
<div class="button down"><a href="#teks-cta">Pesan Sekarang</a></div>
Letakkan kode ini pada Widget HTML #3 (Homepage).
Hasilnya:
Coba klik button di atas, maka Anda akan diarahkan ke bagian bawah yang menggunakan atribut id dengan nilai "teks-cta".
#4.3 Membuat Headline Landing Page
Headline atau judul landing page adalah jenis huruf tebal besar di bagian atas halaman landing page.
Headline adalah hal pertama (dan terkadang terakhir) 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 HTML #3 (Homepage) tepat di bawah button down CTA yang telah dibuat sebelumnya.
Hasilnya..
Template Lajang Spot Bisa Iklan Konversi di Facebook Ads dengan Mudah
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.4 Membuat Subheadline Landing Page
Langkah selanjutnya setelah membuat button down dan 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 untuk subheadline Anda.
Jadi kode HTML-nya akan seperti ini..
<div id="subheadline"><h3>Teks Subheadline Anda di Sini</h3></div>
Hasilnya:
Teks Subheadline Anda di Sini
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 FrienlyBisa 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 FriendlyBisa Ngeblog dan Jualan Online dalam Satu Blog serta Bisa Iklan Konversi di Fb Ads dengan Mudah tanpa Perlu Website
#4.4 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="Simple Sales Page Template" src="URL GAMBAR" width="480px" height="270px"></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="270" id="BLOG_video-ID_VIDEO" width="480"></object></div>
Misalnya saya mengganti ID_VIDEO dengan f60dcbb3ec3bf62e yang merupakan id video saya yang diupload di blogger.
Hasilnya:
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>
Misalnya saya mengganti ID_VIDEO dengan FkKmfakwCOg yang merupakan id video saya yang diupload di youtube.
Hasilnya:
#4.5 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, 2, dan 3, letakkan pada Widget HTML #3 (Homepage) tepat di bawah ads image atau video yang telah dibuat sebelumnya.
Untuk poin 4, letakkan pada Widget HTML #6 (Homepage) saja.
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.6 Menambahkan Social Proof / Testimonial
Kita bisa menambahkan social proof atau testimonial seperti slider testimoni pada Widget Testimoni (Homepage) yang berada di bawah widget postingan blog.
Adapun kode HTML-nya bisa dicopy pada bagian Social Prof di "Kode HTML Postingan Produk Lajang Spot".
#4.7 Menambahkan Harga dan Cara Pemesanan
Price (harga), Promo, dan Scarcity (keterbatasan) serta cara pemesanan bisa kita tambahkan secara sekaligus pada Widget HCP (Homepage).
Kode HTML PPS (Price, Promo, Scarcity):
<div id="pps">
<div class="subjudul"><h2>HARGA & CARA PEMESANAN</h2></div>
<div id="price">
<p>Berapa harga <strong><em>Nama Produk Anda</em></strong> ini?👇</p>
<p><ins>Harga Promo</ins></p>
<p><span class="harga-coret">Rp 299.000</span> (<span id="promo">Diskon 149rb</span>)</p>
<p><span class="harga-item">Rp 150.000</span></p>
</div>
<div id="info-pps">
<p>*Promo Tidak Berlaku Setiap Saat ya. Bisa naik kapan saja.</p>
</div>
</div>
Hasilnya:
HARGA & CARA PEMESANAN
Berapa harga Nama Produk Anda ini?👇
Harga Promo
Rp 299.000 (Diskon 149rb)
Rp 150.000
*Promo Tidak Berlaku Setiap Saat ya. Bisa naik kapan saja.
Adapun kode HTML cara pemesanan apabila menggunakan form order adalah sebagai berikut.
<div class='gambar-penunjuk'>
<img alt='Gambar Penunjuk ke Teks Pesan Sekarang' height='115px' loading='lazy' src='https://cdn.statically.io/img/2.bp.blogspot.com/-eUxzM73imbk/XMj5sVlKr6I/AAAAAAAACco/sotMSB9vuBEpyxeDbYhG6euD9KAVDiW6gCPcBGAYYCw/s1600/arrow2.gif' width='200px'/>
</div>
<div class='teks-ps' id='teks-cta'>PESAN SEKARANG</div>
<p><ins>Cara Pemesanan </ins></p>
<ol>
<li>Isi semua yang bertanda *, yang lain boleh kosong. </li>
<li> Klik Send to WhatsApp dan tunggu sampai kami membalas pesanan Anda.</li>
</ol>
Hasilnya:
PESAN SEKARANGCara Pemesanan
- Isi semua yang bertanda *, yang lain boleh kosong.
- Klik Send to WhatsApp dan tunggu sampai kami membalas pesanan Anda.
#4.8 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="button"><a 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.
Contoh tombol CTA seperti tombol di bawah ini yang akan mengarahkan ke link tujuan.
#4.9 Setting Form Order Homepage
4.9.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 = ['6282349165919', '6282349165919'];
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.9.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.9.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
5. Contoh Landing Page dengan Template LajangSpot
Landing page yang dibuat dengan template lajangSpot merupakan landing page yang simple.
Mengapa landing page harus simple? Salah satunya agar bisa minimalis.
Kita membuat landing page seminimalis mungkin agar pembaca memahami dan mengakses landing page kita dengan mudah agar bisa tercapai konversi.
Silahkan lihat landing page Template Lajang Spot.
6. Menambahkan Facebook Pixel di Landing Page Blogspot
Ini merupakan bagian yang sangat penting setelah landing page kita berhasil dibuat.
Tujuan dari pemasangan facebook pixel adalah agar kita bisa beriklan di facebook ads dengan objektif konversi.
Cara menambahkan facebook pixel di landing page blogspot caranya mudah, apalagi bagi Anda yang menggunakan template LajangSpot, karena sudah disediakan widget khusus untuk menambahkan facebook pixel .
Apa itu facebook pixel dan cara menambahkannya di landing page blogspot?
Silahkan baca lebih lengkap Cara Memasang Facebook Pixel di Landing Page Blogspot.
7. Membuat Pricing Table di Landing Page Blogspot
Pricing table memiliki arti tabel harga, adalah sebuah perbandingan harga produk pada landing page penjualan dalam bentuk tabel.
Apa mannfaat membuat pricing table dan cara membuatnya di Landing Page Penjualan Blogspot?
Membuat pricing table di landing page penjualan tentunya bermanfaat untuk memengaruhi keputusan pelanggan dalam membeli produk melalui penawaran tersebut.
Karena calon buyer, selanjutnya kita singkat dengan cabuy, dihadapkan dengan sebuah pilihan, mau pilih yang mana, bukan tentang pilih ya atau tidak.
Jika cabuy dihadapkan dengan beberapa pilihan, terkadang cabuy bingung dalam mempertimbangkan, mana nih yang harus dipilih.
Dalam keadaan bingung tersebut, kemudian kita memberi masukan "pilih ini saja" dengan memberikan alasan yang dapat diterima.
Kalau cocok dengan penawaran tersebut, si cabuy akan segera melakukan pembelian.
Tentu cara ini dapat memperbesar peluang konversi pengunjung yang datang ke landing page penjualan.
Kita hanya tinggal menampilkan pilihan produk, harga, serta deskripsi produk/layanan yang ditawarkan saja.
Bagi Anda yang ingin membuatnya, silahkan baca Membuat Pricing Table di Landing Page Penjualan.
Nah, demikianlah "Cara Membuat Landing Page di Blogspot dengan Template Lajang Spot", bagi Anda yang belum memiliki, silahkan beli templatenya di Lajang Spot.
Semoga bermanfaat..
Posting Komentar untuk "Cara Membuat Landing Page di Lajang Spot"