Kode HTML Postingan Produk di Lajang Spot

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 google dan facebook ads serta lainnya, 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. 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, letakkan di sini gambar atau video iklan 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">
<p>Teks subheadline</p>
</div>

<div class="ads-image">
<img alt="Judul Gambar" src="URL_Gambar" width="480px" height="480px" />
</div>

<div id="what-product"> 
</div>

<div id="pps">
<div class="subheading"><h2>HARGA & CARA PEMESANAN</h2></div>
<p>Berapa harga <strong><em>Nama Produk Anda</em></strong> ini?👇</p>
<p><span class="harga-coret">Rp 299.000</span></p>
<p><span class="harga-item">Rp 149.000</span></p>
<p>*Promo Tidak Berlaku Setiap Saat ya. Bisa naik kapan saja.</p>
</div>

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

<div id="subheadline">
<p>Teks subheadline</p>
</div>

<div class="ads-image">
<img alt="Judul Gambar" src="URL_Gambar" width="480px" height="480px" />
</div>

<div id="filtering-audience"> 
</div>

<div id="statement"> 
</div>

<div id="closing-statement"> 
</div>

<div id="what-product"> 
</div>


<div id="why-product"> 
</div>

<div id="social-proof"> 
</div>

<div id="pps">
<div class="subheading"><h2>HARGA & CARA PEMESANAN</h2></div>
<p>Berapa harga <strong><em>Nama Produk Anda</em></strong> ini?👇</p>
<p><span class="harga-coret">Rp 299.000</span></p>
<p><span class="harga-item">Rp 149.000</span></p>
<p>*Promo Tidak Berlaku Setiap Saat ya. Bisa naik kapan saja.</p>
</div>

#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", dan semisalnya pada judul postingan tersebut.

Contohnya:

Jual Template Lajang Spot untuk Ngeblog Sambil Jualan Online

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

Bisa gunakan tag heading atau paragraf.

#3 Ads Image/Video

<div class="ads-image"><img alt="Judul Gambar Iklan" src="Url Gambar Iklannya" width="480px" height="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 terserah Anda.

Anda juga bisa memisahkan closing stament secara tersendiri.

<div id="closing-statement">
<!-- ISI KOMPONEN CLOSING STATEMENT -->
</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>

Anda bisa memasukkan apa saja di sini yang menjelaskan tentang produk Anda.

Misalnya deskripsi produk, fitur atau keunggulan, gambar produk, dan sebagainya.

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

<div class="slideshow-images"> 
<div class="image-slide">
<img src="URL_GAMBAR_1" alt="Judul Gambar Slide 1" height="480px" width="480px"/>
<p>Keterangan Gambar Slide 1</p>
</div>
<div class="image-slide">
<img src="URL_GAMBAR_2" alt="Judul Gambar Slide 2" height="480px" width="480px"/>
<p>Keterangan Gambar Slide 2</p>
</div>
<button class="prev" onclick="plusDivs(-1)">Prev</button> <button class="next" onclick="plusDivs(1)">Next</button>
</div>

Lihat demo Images Slideshow

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

#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="slideshow-testimonial">
<div class="testimonial">
  <q>Teks testimoni 1.</q>
  <p class="author-testimonial">Nama Orang 1</p>
</div>
<div class="testimonial">
  <q>Teks testimoni 2.</q>
  <p class="author-testimonial">Nama Orang 2</p>
</div>
<button class="prev-testimonial" onclick="plusSlides(-1)">❮</button>
<button class="next-testimonial" onclick="plusSlides(1)">❯</button>
</div>

Untuk memasukkan testimoni dalam bentuk gambar ke dalam komponen Social Proof, masukkan kode html link gambar berikut di dalam class testimonial.

<img src="#"  alt="Judul Gambar" width="480px" height="480px">

Note: Ganti yang bertanda merah dengan URL gambarnya dan yang bertanda hijauh dengan judul gambarnya.

Lihat demo Testimonial Slideshow

#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="subheading"><h2>HARGA & CARA PEMESANAN</h2></div>
<p>Berapa harga <strong><i>Nama Produk Anda</i></strong> ini?👇</p>
<p><span class="original-price">Rp 299.000</span></p>
<p><span class="sale-price">Rp 150.000</span></p>
<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="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.

Lihat demo Button (Tombol) CTA selengkapnya.