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.

Images by rian_seo

Cara Membuat Postingan Produk Jualan di Blogspot

Buka Blogger > Postingan > Entri baru 

Images by rian_seo

Ubah mode artikel yang sebelumnya Compose menjadi HTML

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.

Berbagi :