Cara Membuat Toko Online Dengan Blogspot Gratis Selamanya

Banyak sekali blog yang membahas tentang cara membuat toko online gratis karena memang banyak juga orang yang mencari informasi tersebut.

Namun terkadang informasi yang mereka dapatkan belum tentu sama dengan yang mereka harapkan.

Di jaman yang serba modern ini memang memanjakan seseorang untuk melakukan hal-hal yang tadinya rumit menjadi simple, seperti halnya belanja online, belanja online memang membantu kita untuk menghemat waktu, terutama untuk kita yang di sibukkan dengan pekerjaan.

Dengan banyaknya peminat belanja melalui online, semakin banyak juga orang yang memulai untuk bisnis online, bukan hanya pembisnis handal yang melakukannya, tapi semua orang termasuk karyawan juga bisa dengan mudah menjalankan bisnis online

Para pembisnis online biasanya mengandalkan sosial media mereka untuk memasarkan produk mereka, seperti Facebook, twitter,instagram dan lain-lain,  banyak juga yang membangun toko online sendiri

Membahas tentang toko online, sekarang kalian bisa membuatnya sendiri dengan modal gratisan, tanpa keluar biaya sepeserpun untuk membuat toko online, yang kalian butuhkan hanyalah hp android atau laptop dan tentunya paket internet.

Bagaimana caranya?

Oke kali ini saya akan membahas bagaimana cara membuat toko online gratis selamanya dengan blogger atau blogspot, cara ini benar-benar gratis, jadi sangat cocok untuk kalian yang baru ingin terjun di dunia bisnis dengan modal yang kecil, sebelumnya apakah kalian sudah mengenal blogger, kalau belum, silahkan simak ulasan singkat tentang blogger

Apa itu blogger

Blogger adalah sebuah layanan publikasi blog yang dibuat oleh Pyra Labs dan diakuisisi oleh Google pada tahun 2003. Secara umum, blog yang dihost oleh Google berada di bawah subdomain blogspot.com. Blogger memperbolehkan penggunanya untuk mempublikasikan blognya di server lain, melalui FTP hingga 1 Mei 2010. Setelah tanggal tersebut, semua blog harus disimpan di server Google, meskipun pengguna dapat menggunakan alamat situsnya sendiri dengan fitur Custom URl

Bagaimana cara membuat toko online di blogger?

Untuk membuat toko online di blogger, kalian harus mempersiapkan alat tempur seperti :

• Hp android atau laptop.
• Paket internet.
• Akun gmail.
• Template toko online blogspot.

Template toko online blogspot bisa kalian download di sini untuk versi gratis, atau klik di sini untuk membeli template

Jika kalian sudah mempersiapkan semuanya, berarti kalian sudah siap untuk memulai membuat toko online, sekarang kita mulai untuk membuat toko online gratis di blogger

Cara membuat toko online gratis di blogger

1. Membuat akun blogger

Jika kalian belum memiliki akun di blogger, silahkan untuk membuatnya terlebih dahulu, ikuti langkah-langkah di bawah ini:

• Kunjungi situs blogger.com dari android atau pc kalian nanti akan muncul tombol buat blog seperti gambar di bawah ini.

• Setelah itu, klik tombol buat blog, nanti kalian akan di alihkan menuju akun gmail untuk pendaftaran.

• Masukan gmail yang sudah kalian siapkan, boleh gmail lama maupun gmail baru, setelah masukan gmail, klik tombol berikutnya, maka kalian akan di suruh memasukkan pasword.

• Silakan isikan pasword akun gmail kalian dan klik tombol berikutnya, setelah itu kalian di minta untuk membuat nama panggilan di blogger, nama panggilan akan muncul pada profil blog atau toko online kalian nantinya.

• Pembuatan Akun sudah selesai, sekarang saatnya kalian membuat blog untuk toko online kalian dengan klik tombol buat blog baru seperti gambar yang ada di bawah ini.

• Isikan data blog kalian sesuai keinginan, atau nama toko online kalian.

Keterangan:

• JuduL: isi dengan nama blog atau toko online kalian, misalnya clickshop.
• Alamat: isi alamat dengan nama subdomaian yang kalian inginkan, contoh: clickshop.blogspot.com
• Tema: pilih salah satu tema, yang mana aja bebas, tema itu nantinya kita ganti dengan tema toko online yang sudah kalian download tadi.

Setelah di isi semua silahkan klik tombol buat blog, nanti akan muncul pop-up untuk membeli nama domain, abaikan saja, klik lain kali

Pembuatan blog sudah selesai, sekarang kita tinggal merubah blog kita menjadi toko online. Di bawah ini adalah gambar dashboard akun di blogger

Dan di bawah ini merupakan tampilan blog yang tadi kita buat, masih dengan tema bawaan blogger.

Sekarang kita rubah blog menjadi toko online, caranya :

• Masuk ke dashboard blogger, lalu pilih "tema" > "cadangkan/pulihkan".

pilih "choose file", masukan file template yang sudah di download tadi, kemudian klik " Unggah".

Setelah selesai mengganti tema, coba lihat tampilan blog kalian, apakah sudah  menjadi toko online?

Tentu saja belum...

karena masih harus kita edit lagi templatenya,

Oke, sekarang kita masuk ke tahap pengeditan tema,

Pertama kita akan mengedit menu navigasi tetlebih dahulu

Cara edit menu navigasi

Untuk mengedit menu navigasi kalian harus mengeditnya lewat menu Edit HTML.

Login ke “Blogger” > Masuk ke menu “Tema” > Klik “Edit HTML”.

Cari kode ini di dalam kode template:

<!-- menu navigasi header start -->
<ul>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a>
  <ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
  </ul>
  </li>
  <li><a href='#'>Menu</a>
  <ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
<li><a href='#'>SubMenu4</a></li>
  </ul>
  </li>
</ul>
<!-- menu navigasi header end -->

Edit teks warna kuning dengan URL tujuan dan teks warna merah dengan nama menu yang  kalian inginkan.

Menghapus Menu

Jika kalian ingin menghapus salah satu menu cukup hapus dari kode <li> sampai </li>.

Misalnya ingin menghapus menu “SubMenu4” maka hapus kode :

<li><a href='#'>SubMenu4</a></li>

Menambah menu

Untuk menambahkan menu, copy kode ini:

<li><a href='#'>NamaMenu</a></li>

Paste kode tersebut di atas kode :

</ul>
<!-- menu navigasi header end -->

Menambah Menu dengan SubMenu

Untuk menambahkan menu dengan submenu, copy kode ini :

<li><a href='#'>NamaMenu</a>
  <ul>
<li><a href='#'>NamaSubMenu1</a></li>
<li><a href='#'>NamaSubMenu2</a></li>
  </ul>
</li>

Paste kode tersebut di atas kode :

</ul>
<!-- menu navigasi header end -->

Jangan lupa sesuaikan URL tujuan menu dan Nama menunya.

Cara memosting Produk

Untuk cara posting produk, sama seperti posting artikel, hanya saja untuk posting produk memerlukan kode HTML khusus yang diletakan di dalam artikel.

Silakan baca caranya di bawah ini:

Login ke “Blogger” > klik “Entri Baru“

Pada editor artikel pilih mode “HTML“ bukan "compose"

Setelah itu paste kode ini pada bagian 

konten :

<div class="gambar-produk"> <div class="gambar-slide"> <img alt="gambar produk 1" src="URL-GAMBAR-1" /> <img alt="gambar produk 2" src="URL-GAMBAR-2" /> <img alt="gambar produk 3" src="URL-GAMBAR-3" /> </div> <button class="prev">Prev</button> <button class="next">Next</button> <div class="status-produk"> <div class="stok-habis">Stok Habis</div> <div class="promo">Promo</div> <div class="produk-terlaris">Terlaris</div> </div> </div> <div class="detail-produk" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"> <div content="IDR" itemprop="priceCurrency"></div> <div class="harga-produk" content="3150000" itemprop="price">Rp3.150.000</div> </div> <div class="deskripsi-produk"> Deskripsi produk ada di sini... </div>

Keterangan :

• URL-GAMBAR-1, URL-GAMBAR-2, URL-GAMBAR-3

Ganti dengan URL gambar produk, usahakan gambar diupload di blogger, bukan dari tempat lain. 

Rekomendasi ukuran gambar menggunakan aspek rasio 4:5, misalnya jika lebar gambar 300px, maka tingginya adalah 375px.

• content=”315000″

Ganti angka 315000 dengan harga produk tanpa pemisah koma/titik dan juga tanpa simbol mata uang

• Rp.3.150.000

Ganti angkanya dengan harga produk menggunakan simbol mata uang dan pemisah ribuan.

• Deskripsi produk di sini…

Ganti dengan deskripsi produk

Untuk menambah harga dicoret, tambahkan kode <strike>HARGA</strike> di depan harga. Kurang lebih jadinya seperti ini :

<strike>Rp.4.000.000</strike> Rp.3.150.000

Untuk menghilangkan keterangan stok habis, hapus kode ini :

<div class="stok-habis">Stok Habis</div>

Untuk menghilangkan keterangan promo, hapus kode ini :

<div class="promo">Promo</div>

Untuk menghilangkan keterangan terlaris, hapus kode ini :

<div class="produk-terlaris">Terlaris</div>

• Kalau sudah, klik “Publikasikan"

PCara posting Artikel

Cara posting artikel prosesnya sama seperti posting produk, hanya saja tidak memerlukan kode HTML khusus.

Tapi ada satu langkah penting yang perlu kalian lakukan saat posting artikel, yaitu memberi label “Artikel” pada artikel yang sobat posting.

Caranya sebagai berikut:

Login ke “Blogger” > “Entri Baru“

Isi judul dan dan konten artikel

Pada bagian label isi dengan label “Artikel” (tanpa tanda kutip + harus diawalai dengan huruf besar)

Jika sudah, klik “Publikasikan

Mengedit Nomor WhatsApp dan Nomor HP

Pada halaman produk terdapat tiga informasi kontak yang bisa dihubungi calon pembeli. Informasi kontak tersebut adalah Nomor WhatsApp, Nomor SMS, dan Nomor Telepon.

Untuk mengedit Nomor WhatsApp caranya:

Login ke “Blogger” > “Tema” > “edit HTML“

Cari kode ini di dalam template:

<a class='chat-wa' href='https://api.whatsapp.com/send?phone=6282111111111' target='_top'> <i aria-hidden='true' class='fa fa-whatsapp'/> Chat WhatsApp </a>

Edit yang bertanda kuning dengan nomor WhatsApp milik kalian (nomor harus diawali dengan kode negara 62)

Klik “Simpan tema“

Untuk mengedit Nomor SMS caranya:

Login ke “Blogger” > “Tema” > “edit HTML“

Cari kode ini di dalam template:

<a class='chat-sms' href='sms:082111111111' target='_top'> <i class='fa fa-paper-plane' aria-hidden='true'></i> <b:switch var='data:blog.locale'><b:case value='id' />Kirim SMS<b:default />Send SMS</b:switch> </a>

Edit yang bertanda kuning dengan nomor untuk menerima SMS

Klik “Simpan tema“

Untuk mengedit Nomor Telepon caranya:

Login ke “Blogger” > “Tema” > “edit HTML“

Cari kode ini di dalam template:

<a class='chat-phone' href='tel:082111111111' target='_top'> <i class='fa fa-phone' aria-hidden='true'></i> <b:switch var='data:blog.locale'><b:case value='id' />Telpon<b:default />Call</b:switch> </a>

Edit yang bertanda kuning dengan nomor untuk menerima panggilan telpon

Klik “Simpan tema“

Mungkin cukup sampai di sini tutorial cara membuat toko online dengan blogspot, semoga bermanfaat, jika ada pertanyaan silahkan tanya melalui komentar di bawah ini, atau bisa mengirimkan pertanyaan melalui meni contact, Terima kasih sudah berkunjung...

Share :