Kode HTML Postingan Produk di Lajang Spot - Lajang Spot
Ξ
×
Beranda › Panduan Lajang Spot › Kode HTML Postingan Produk di Lajang Spot

Kode HTML Postingan Produk di Lajang Spot

Oleh Ibnu Batauga (Diperbarui: ) - Posting Komentar

Kode HTML Postingan Produk ini adalah alternatif yang bisa Anda gunakan dalam membuat postingan produk.

Anda bisa membuat atau menyusunnya sendiri jika Anda sudah terbiasa dalam membuat postingan blog baik dalam "Tampilan HTML" atau "Tampilan Menulis".

Sebelum membuat atau menyusun kode html postingan produk, ketahui dulu jenis, komponen, dan struktur dari suatu halaman postingan produk.

1. Jenis Halaman Produk

Ada dua jenis halaman produk yang perlu Anda ketahui yaitu product page dan sales page.

Keduanya tentu memiliki arti dan fungsi yang berbeda. Berdasarkan katanya product page memiliki arti "halaman produk" sedangkan sales page memiliki arti "halaman penjualan".

Product page berfungsi untuk menuliskan tentang suatu produk. Misalnya, apa saja komposisinya, manfaatnya, cara penggunaan, dan sebagainya yang hanya berkaitan dengan produk saja.

Sales page selain menuliskan tentang produknya, juga berfungsi untuk mempengaruhi agar pengunjung membeli produk tersebut dengan penawaran yang menarik.

Nah sekarang, yang menjadi pertanyaan adalah apa tujuan kita membuat blog jualan online?

Jika tujuannya adalah mencari pembeli maka halaman produk yang sesuai adalah "sales page" karena jika sekedar membuat product page maka lebih dianjurkan menggunakan marketplace yang sudah ada seperti shopee, tokped, dll.

Apalagi jika Anda ingin beriklan di fb ads, landing page yang cocok adalah sales page.

2. Komponen dan Struktur Sales Page

Jenis halaman produk yang digunakan pada template LajangSpot lebih kepada sales page dan dirancang agar bisa beriklan di fb ads. Jadi, saya hanya ingin menjelaskan tentang komponen dan struktur sales page khususnya pada template LajangSpot.

Komponen maksudnya adalah unsur-unsur apa saja yang menyusun sebuah sales page sedangkan struktur maksudnya susunan dari unsur-unsur tersebut seperti apa.

Menurut agankhalid.com, sales page setidaknya berisi 5 hal berikut ini.

  • Produk Anda
  • Deskripsi produk Anda
  • Harganya berapa,
  • Bagaimana cara pembelian,
  • atau kontak yang bisa dihubungi ketika ada orang yang ingin membeli produk Anda.
Dengan halaman sales page seperti ini saja, Anda sudah bisa mulai berjualan.

Untuk sampai bikin website yang IYUH, MANTEP, SEREM, NGERI, ADA BURUNG TERBANG, ADA SUARA KELUAR, ADA ANIMASI GERAK GERAK, NAGA INDOSIAR TERBANG, dan sebagainya, BISAAAA NANTI.

Yang penting bagi Anda sekarang untuk memulai, cukup membuat sales page simpel seperti ini. Yang proses pembuatannya kurang dari 10 menit, dan sudah siap mengudara untuk menerima traffic secara online.

Secara umum, komponen utama sebuah landing page yang efektif adalah sebagai berikut.

  • Headline: Teks yang pertama kali dibaca pada sebuah halaman.
  • Gambar/video: Gambar atau video iklan, gambar produk, atau gambar lainnya.
  • Subheadline: Teks setelah headline yang memperjelas dan memperkuat headline.
  • Badan/isi/penjelasan: Dapat berupa filtering audience, statement, deskripsi produk, dan semisalnya yang berkaitan dengan apa dan mengapa harus memesan produk tersebut.
  • Social proof: Testimonial atau yang semisalnya.
  • Call to action (CTA): Tindakan yang harus diambil untuk bisa memiliki produk tersebut dengan mengklik tombol yang telah disediakan.

3. Kode HTML Postingan Produk

jika Anda ingin berjualan online dengan template LajangSpot, Anda bisa menggunakan template posting berikut ini.

#3.1 Simple Sales Page Template

Dengan Simple Sales Page Template ini, Anda sudah bisa mulai berjualan dengan susunan sales page sebagai berikut.

  1. Headline: Judul postingan produk Anda.
  2. Subheadline: Teks yang menarik perhatian pembaca setelah headline.
  3. Ads Image/video: Kalau Anda sedang beriklan di fb ads, letakkan di sini gambar atau video iklan fb ads tetapi ubah ukuran dengan rasio yang direkomendasikan untuk gambar/video di blog yaitu 16:9.
  4. What Product: Berisi deskripsi produk Anda.
  5. Price, Promo, and Scarcity (PPS): Berisi tentang harga produk, promo, dan info keterbatasan baik pada promonya atau stok barangnya.
  6. Call to Action (CTA): Tombol atau form pemesanan.

Silahkan Anda copy paste ke konten postingan produk Anda, kemudian edit sesuai dengan produk Anda.

<div id="subheadline"><h3>Bisa Mulai Jualan Online Tanpa Ribet Desain Web</h3></div>
<div class="ads-image"><img alt="Judul Gambar" height="270px" src="URL Gambar" width="480px" /></div>

<div id="what-product"> 
<div id="deskripsi-produk"><h2>Deskripsi Produk</h2>
<ul class="dashed">
<li>Di sini, Anda jelaskan apa kelebihan–kelebihan produk Anda.</li> 
<li>Atau Anda jelasin kenapa orang harus beli produk Anda.</li>
<li>Atau manfaat apa yang akan mereka dapatkan apabila mereka membeli produk Anda.</li>
<li>Atau masalah mereka yang mana yang akan teratasi apabila membeli produk Anda. Dan sebagainya.</li>
<li>Jelasinnya point per point saja. Seperti ini.</li>
<li>Selain jelasin, upload eh tuh foto – foto produk Anda yang lainnya.</li>
<li>Dengan Anda mengupload banyak foto mengenai produk Anda, orang akan lebih bisa membayangkan produk yang akan mereka beli dari Anda.</li>
</ul>
</div>
</div>

<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 100rb)</span></p>
<p><span class="harga-item">Rp 149.000</span></p>
</div>
<div id="info-pps">
<p>*Promo Tidak Berlaku Setiap Saat ya. Bisa naik kapan saja.</p> </div>
</div>
LIHAT DEMO

#3.2 Sales Page Copywriting Template

SPCT maksudnya adalah kode html template postingan produk yang menggunakan copywritting untuk lebih memaksimalkan sales page Anda.

Sales page adalah aset digital untuk membantu Anda mengubah pembaca biasa menjadi pelanggan.

Anda mungkin pernah membaca sales page yang terlihat membosankan, sehingga Anda memilih untuk keluar daripada meneruskan membaca.

Untuk memastikan halaman penjualan Anda tidak termasuk dalam kategori tersebut, Anda harus mengoptimalkan kontennya dengan copywritting.

Sebelum lanjut, Anda mungkin perlu tahu istilah copywritting.

  • Copy: teks yang digunakan dalam penjualan atau pemasaran (beda dengan copy yang artinya salin)
  • Copywriting: teknik menulis copy.
Kalau Anda sudah menerapkan prinsip copywriting untuk menciptakan kata dan kalimat yang tepat, bahkan desain sederhana pun akan berhasil menjual. - panduanim.com

Bagi Anda pengguna template LajangSpot, Anda bisa menggunakan template postingan produk yang telah disediakan dengan susunan sebagai berikut.

  1. Headline: Judul postingan produk Anda.
  2. Subheadline: Teks yang menarik perhatian pembaca setelah headline.
  3. Ads Image/video: Kalau Anda sedang beriklan di fb ads, letakkan di sini gambar atau video iklan fb ads tetapi ubah ukuran dengan rasio yang direkomendasikan untuk gambar/video di blog yaitu 16:9. Jika tidak, letakkan gambar produknya saja.
  4. Filtering Audience: Pertanyaan-pertanyan kepada pembaca apakah mengalami masalah yang akan mendapat solusi jika memesan produk Anda. Tujuannya untuk lebih menyaring orang-orang yang betul-betul cocok dengan produk yang Anda tawarkan.
  5. Statement: Penjelasan lebih lanjut dari pertanyaan yang ada pada filtering audience.
  6. What Product: Memperkenalkan produk seperti bentuknya dalam bentuk gambar, deskripsi produk, fitur dan manfaat produk, dan lain-lain.
  7. Why Product: Menjelaskan mengapa harus memesan produk Anda.
  8. Social Proof: Berisi testimoni pelanggan Anda atau siapa saja yang telah menggunakan produk Anda atau berapa banyak yang telah menggunakan produk Anda.
  9. Price, Promo, and Scarcity (PPS): Berisi tentang harga produk, promo, dan info keterbatasan baik pada promonya atau stok barangnya.
  10. Call to Action (CTA): Tombol atau form pemesanan.

Silahkan Anda ATM (amati, tiru, modifikasi) ke konten postingan produk Anda satu per-satu, kemudian edit sesuai dengan produk Anda.

#1 Headline

Headline dari sales page Anda adalah judul postingan Anda. Buatlah judul postingan dengan menyebutkan nama produknya saja tanpa ada tambahan kata kunci seperti "beli", "jual", "murah", dan semisalnya pada judul postingan tersebut.

Contohnya:
Jual Celana Sirwal List Murah

#2 Subheadline

Subheadline merupakan slogan atau teks yang mengambarkan atau menjelaskan produk Anda secara singkat dan menarik.

Misalnya judul postingan produk Anda Celana Sirwal List, maka subheadlinenya seperti contoh di bawah ini.

<div id="subheadline"><h3>Bisa Tampil Santai dan Nyaman Seharian</h3></div>

#3 Ads Image/Video

<div class="ads-image"><img alt="Judul Gambar Iklan" height="270px" src="Url Gambar Iklannya" width="480px" /></div>

Jika Anda beriklan di fb ads, ukuran gambar atau video iklan minimal yang direkomendasikan adalah 1080 x 1080 piksel. Ukuran gambar atau video tersebut memiliki aspek rasio 1:1 yang berarti lebar dan tingginya sama.

Adapun aspek rasio yang direkomendasikan untuk gambar dan video pada blog dengan template Lajang Spot adalah 16:9. Misalnya, jika lebar gambar yang Anda tentukan adalah 480px maka tingginya adalah 270px.

Anda bisa saja tidak mengubah ukuran gambar iklan Anda pada postingan produk Anda, tetapi pada halaman depan blog Anda, akan nampak gambar yang tidak terlihat keseluruhannya.

#4 Filtering Audience

Filtering audience di sini bentuknya pertanyaan yang jawanannya hanya "Ya" atau "Tidak".

Pertanyaan yang diberikan harus sesuai dengan masalah yang Anda akan bahas dan berikan solusinya.

Jawaban yang diharapkan tentunya adalah "Ya" yang berarti pembaca tersebut sesuai dengan target market Anda. 

<div id="filtering-audience">
<p>Ingin sesuatu tapi tidak tahu begitu?</p>
<p>Sedang sesuatu tapi belum begini?</p>
<p>Sering sesuatu tapi masih begitu-begitu?</p> 
<p>Jika ia, Anda berada di halaman yang tepat.</p>
</div>

#5 Statement

Statement artinya pernyataan. Pada bagian ini, Anda harus memberikan penjelasan lebih lanjut tentang pertanyaan yang ada pada filtering audience.

Statement terdiri dari tiga bagian yaitu opening statement, explanatory statement, dan closing statement.

Contohnya: "Ketahui dulu" sebagai opening statement, "Masalahnya" sebagai explanatory statement, dan "Solusinya.." sebagai closing statement.

<div id="statement">
<p><span class="mark-color">Ketahui dulu..</span></p>
<p>Bla bla bla.</p> 
<p>Bla bla bla.</p> 
<p>Bla bla bla.</p> 
<p>Bla bla bla.</p> 

<p><span class="mark-color">Tapi masalahnya..</span></p>
<p>Bla bla bla.</p> 
<p>Bla bla bla.</p> 
<p>Bla bla bla.</p> 
<p>Bla bla bla.</p>
<p>Bla bla bla.</p>

<p><span class="mark-color">Solusinya..</span></p>
<p>Bla bla bla.</p>
<p>Bla bla bla.</p>
<p>Bla bla bla.</p>
<p>Bla bla bla.</p>
<p>Bla bla bla.</p>
<p>Bla bla bla.</p>
</div>

Pada kode HTML di atas, Anda bisa menggunakan tag heading h2, h3, dan h4 pada kata "ketahui dulu..", "masalahnya..", dan "solusinya..".

Misalnya: 
<h4>Ketahui dulu..</h4>
<p>...</p>
<h4>Masalahnya..</h4>
<p>...</p>
<h4>Solusinya..</h4>
<p>...</p>

atau menggunakan: 

<div class="subjudul"><h4>Kata atau Frasa</h4></div>
Contohnya: 
<div class="subjudul"><h4>Ketahui dulu..</h4></div>

#6 What Product

Untuk membuat komponen What Product pada html, gunakan kode berikut ini untuk memasukkan ke dalamnya apa saja tentang produk Anda.

<div id="what-product">
<!-- ISI KOMPONEN WHAT PRODUCT -->
</div>

Gunakan kode berikut ini untuk memasukkan beberapa gambar produk Anda ke dalam komponen What-Product.

<div class="subjudul"><h2>Produk Anda</h2></div>
<div class="slide-show gambar-produk"> 
<div class="gambar-slide">
<img alt="Gambar Slide 1" height="270px" src="#" width="480px"/>
<p>Gambar Slide 1</p>
</div>
<div class="gambar-slide">
<img alt="Gambar Slide 2" height="270px" src="#" width="480px"/>
<p>Gambar Slide 2</p>
</div>
<button class="prev" onclick="plusDivs(-1)">Prev</button> <button class="next" onclick="plusDivs(1)">Next</button>
</div>

Gunakan kode berikut ini untuk memasukkan deskripsi produk Anda ke dalam komponen What-Product.

<div id="deskripsi-produk">
<div class="subjudul"><h3>Deskripsi Produk</h3></div>
<!-- ISI DESKRIPSI PRODUK ANDA -->
</div>

#7 Why Product

Untuk membuat komponen Why Product pada html, gunakan kode berikut ini untuk memasukkan ke dalamnya apa saja why produk Anda.

<div id="why-product">
<!-- ISI ELEMENNYA DI SINI -->
</div>

Gunakan kode berikut ini untuk memasukkan mengapa harus memesan produk Anda ke dalam komponen What Product.

<div class="subjudul"><h2>Mengapa Harus Memesan Produk Ini</h2></div>
<ol>
<li>Alasan 1 ...</li>
<li>Alasan 2 ...</li>
<li>...</li>
</ol>

#8 Social Proof

Untuk membuat komponen Social Proof pada html, gunakan kode berikut ini untuk memasukkan ke dalamnya apa saja Social Proof produk Anda.

<div id="social-proof">
<!-- ISI ELEMENNYA DI SINI -->
</div>

Gunakan kode berikut ini untuk memasukkan testimoni dalam bentuk teks ke dalam komponen Social Proof.

<div class="subjudul"><h2>Testimoni</h2></div>
<div class="slideshow-testimoni">
<div class="testimoni">
  <q>Teks testimoni 1.</q>
  <p class="author-testimoni">Nama Orang 1</p>
</div>
<div class="testimoni">
  <q>Teks testimoni 2.</q>
  <p class="author-testimoni">Nama Orang 2</p>
</div>
<button class="prev-testimoni" onclick="plusSlides(-1)">❮</button>
<button class="next-testimoni" onclick="plusSlides(1)">❯</button>
</div>

Untuk memasukkan testimoni dalam bentuk gambar ke dalam komponen Social Proof, tinggal hapus elemen tag <q> dan <p class="author-testimoni">, kemudian masukkan kode link gambar berikut.

<img alt="Judul Gambar"  src="#" width="480px" height="480px">
Note: Ganti yang bertanda hijauh dengan judul gambarnya dan yang bertanda merah dengan URL gambarnya.

#9 PPS

Untuk membuat komponen PPS pada html, gunakan kode berikut ini untuk memasukkan ke dalamnya apa saja PPS produk Anda.

<div id="pps">
<!-- ISI ELEMENNYA DI SINI -->
</div>

Gunakan kode berikut ini untuk memasukkan harga produk Anda ke dalam komponen PPS.

<div class="subjudul"><h2>HARGA & CARA PEMESANAN</h2></div>
<div id="price">
<p>Berapa harga <strong><i>Nama Produk Anda</i></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>

Gunakan kode berikut ini untuk menambahkan info pps ke dalam komponen PPS.

<div id="info-pps">
<p>*Promo Tidak Berlaku Setiap Saat ya. Bisa naik kapan saja.</p>  
</div>

#10 Call To Action (CTA)

Untuk menambahkan tombol CTA, Anda bisa menggunakan kode berikut ini.

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

LIHAT DEMO
Author Profile
Ibnu Batauga
Blogger, Math Tutor, dan Internet Marketer
Kategori:

Posting Komentar untuk "Kode HTML Postingan Produk di Lajang Spot"

Langganan: Posting Komentar (Atom)