Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini!

Cara Membuat Postingan / Artikel Kusus Jualan Online Blogspot

Cara Membuat Postingan / Artikel Kusus Jualan Online Blogspot Images @rian_seo
Cara Membuat Postingan / Artikel Kusus Jualan Online Blogspot

Cara Membuat toko online di Blogspot itu cukup mudah, bahkan kita tidak perlu pakai plugins layaknya Wordpress, yang perlu kita lakukan hanyalah memasang template blogger kusus toko online.

Proses pembuatan artikel produk juga relatif mudah di Blogger ini. Tapi tidak semudah proses pembuatan artikel produk di WooCommerce (WordPress).

Namun bagi saya tetap mudah menggunakan blogger ini, karena yang kita perlukan hanyalah memasukkan / menyalin detail produk yang akan dijual kedalam artikel mode HTML yang telah disediakan.

Lalu bagaimana caranya?


Berikut ini ada beberapa langkah yang bisa kamu ikuti untuk membuat artikel produk jualan toko online blogspot yang benar dan terstruktur.

Salin kode HTML dibawah ini.
<div class="produk-saya" itemscope="" itemtype="https://schema.org/Product">
<img alt="" itemprop="image" src="URL-FOTO-ANDA">
<a class="nama-produk" href="#" itemprop="name" target="_blank">Nama Produk Anda</a>
<br>
<div class="rating-saya" itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">
<span class="skor" itemprop="ratingValue"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>4.0</span>
<span class="rating" itemprop="reviewCount">11</span>
</div>
<div itemprop="offers" itemscope="" itemtype="https://schema.org/Offer">
<span class="daftar-harga" content="USD" itemprop="priceCurrency">Price:</span>
<span class="harga-produk" content="9.00" itemprop="price">Rp.9.000.000</span>
<link href="https://schema.org/InStock" itemprop="availability">Sale
</div>
<h4>Deskripsi:</h4>
<div class="description-item" itemprop="description">
<li>Contoh isi tulisan</li>
<li>Contoh isi fiktur</li>
<li>Contoh data jualan</li>
</div>
</div>
NB :

  1. URL-FOTO-ANDA = Url gambar / foto produk jualan
  2. Nama Produk Anda = Ubah dengan nama produk sendiri
  3. 11 = Angka nilai rating produk kamu
  4. Rp.9.000.000 = Angka nilai harga jualan kamu
  5. Deskripsi = Isi dengan fiktur / penjelasan produk


Kode diatas adalah kode standar yang sesuai dengan arahan schema markup, Kamu bisa lihat contoh kodenya dihalaman ini agar lebih lengkapnya.

Apabila kode yang kita tulis didalam artikel dilakukan dengan benar, maka untuk laporan kode validnya bisa kita lihat di halaman Google Data Tersruktur.

Maka tampilan produk yang kita tulis dihalaman post, akan tampil seperti ini contohnya jika dilihat dihalaman beranda pencarian Google.

Cara Membuat Postingan / Artikel Kusus Jualan Online Blogspot
Images by rian_seo

Cara Membuat Postingan Produk Jualan di Blogspot

Buka Blogger > Postingan > Entri baru 

Cara Membuat Postingan / Artikel Kusus Jualan Online Blogspot
Images by rian_seo

Ubah mode artikel yang sebelumnya Compose menjadi HTML

Cara Membuat Postingan / Artikel Kusus Jualan Online Blogspot
Images by rian_seo

Paste kode HTML yang diatas tadi sebelumnya di kolom mode HTML Artikel.

Klik " Publikasikan "

Merapikan Tampilan Artikel Produk Anda

Salin kode CSS dibawah ini.
.rating, .skor {font-size:13px;}
.nama-produk {color:#111!important;font-size:20px;font-weight:500;}
.daftar-harga {font-size:12px;color:#888;}
.harga-produk {font-size:18px;color:#B12704;}
.produk-tersedia {font-size:15px;color:#B12704;}
.description-item {font-size:14px;}
.fa-star, .fa-star-half {color:#ffa403;font-size:13px!important;}
.produk-saya img {float:left;margin:0 20px 10px 0;padding:0;width:200px;height:250px;}
.produk-saya {font-family:'Roboto';width:45.78%;background:#ffffff;float:left;display:inline-block;margin-right:20px;margin-left:20px;margin-bottom:20px;box-sizing: border-box;padding:8px;border:1px solid #cccccc;border-radius:3px;}
.rating-saya {padding:10px;}
@media screen and (max-width: 800px){
.box-info {margin: 15px 10px 50px;}
.box-list li {width:90%;}
}
@media only screen and (max-width: 640px) {
.produk-saya {width:100%;margin:0;margin-bottom:20px;float:none}
.produk-saya img {width: 100%;float: none;height: 100%;margin: 0 0 20px 0;}
}
Letakan kode CSS diatas, didalam mode file template blogger kamu dan letakan diatas kode </style> atau ]]></b:skin>

Klik " SAVE "

Akhir Kata


Itulah sedikit tips dari kami, tentang cara penulisan produk jualan yang benar di blogspot. Jika ada pertanyaan atau masukan jangan ragu untuk menyampaikan lewat kolom komentar blog ini.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

Komentar (0)

Post a Comment

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter