Saturday, January 4, 2014

Dengan meningkatnya teknologi dan makin luasnya jaringan internet peluang berjualan melalui online sungguh menjanjikan. Bagaimanakah carany membuat toko online dengan blogspot? Pertama anda harus mempunyai account blogspot terlebih dahulu atau membuta blog terlebih dahulu. Bagaimanakah caranya membuat Blog? silahkan Klik Cara Gampang Mambuat Blog
Setelah bisa membuat Blog ikuti langkah-langkah dibawa ini untuk membuat toko online :


Langkah 1 : Pertama buat new blog atau buat blog baru. Alamat blog biasanya sering muncul alamat tidak tersedia. Tetapi tetap coba terus dengan nama-nama lain. Kadang ketik satu huruf saja sudah keluar alamat tidak tersedia. Teruskan saja ketik.

Langkah 2 : masuk di template



Masukan template yang sudah tersedia (Shopping-Cart.xml , shoes online store.xml, simplex-eshop.xml, template-babyshop-zoomtemplate.xml ) 

klik Backup/store (cadangkan/pulihkan) setelah itu chose file (pilih file) dan upload (unggah).

Untuk pilihan template silahkan klik : pilihan template toko online

Langkah 3 : Membuat Chart toko online. Masuk di Setting/Setelan, klik post and comment/komentar. untuk kotak tampilakn sebanyak mungkin bisa diisi 15. lalu template entri : add/tambah diklik dan copy file yg saya cantumkan ini di kotaknya. Copy dibawah ini :

<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><a href="#" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="#" src="#" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
<td><input class="item_add" type="button" value="Beli " /></td>
</tr>
<tr>
<th><b>Nama Barang</b></th>
<td class="item_name">Tuliskan nama produk di sini</td>
</tr>
<tr>
<th><b>Harga</b></th>
<td class="item_price">Tulis harga produk di sini</td>
</tr>
<tr>
<th><b>Deskripsi produk</b></th>
<td class="item_Description">Silakan tuliskan deskripsi produk Anda di sini.</td>
</tr>
<tr>
<th><b>Ketersediaan Barang</b></th>
<td>Tuliskan ketersediaan barang di sini</td>
</tr>
<tr>
<th><b>Gambar Tambahan</b></th>
<td>Tambahkan gambar tambahan untuk produk ini di sini.</td>
</tr>
</tbody>
</table>



lalu save/simpan setelan. nah di new post sdh akan terlihat seperti toko online tinggal memasukan foto,harga,dll


Untuk foto Produk buat yang paling kecil sehingga tidak terlalu besar. Klik di fotonya dan pilih small size. Setelah selesai maka post akan terlihat seperti ini :





Toko online anda sudah setengah jadi sekarang mari kita lanjutkan dengan
Mengatur Script template toko online blogspot agar checkout membuka halaman pemesanan
Secara default script template toko online blogspot dalam template tersebut pengaturan script tombol checkout disaat anda klik masih mengarah ke situs paypal atau eror. bagaimana agar tombol checkout diarahkan ke halaman pemesana atau order, maka terlebih dahulu dilakukan perubahan script template toko online. Anda perlu mengganti url checkout dengan url halaman yang diinginkan. Untuk lebih detailnya silahkan ikuti panduan di bawah ini.


Sebelum harus membuat terlebih dahulu form pemesanan dengan google doc 
Langkah Memmbuat Formulir Online dengan Google Docs
#1 Buka website Google Docs

#2 Login menggunakan Akun Google
#3 Klik tombol Create lalu pilih Form



#4. Masukkan hal-hal yang ingin ditampilkan dalam form
#5. Setelah selesai klik tombol Save di kanan atas.
#6. Selesai. Link di bawah form adalah alamat formulir online yang dapat dipergunakan di blog toko online yang ingin diberi formulir pembelian

#5 Klik Save

Kalau selesai masuk ke blog anda. Login ke blogger, Di Vertikal Menu pilih Template
Di bagian Thumbnail Template klik tombol Edit HTML

2. Selanjutnya muncul halaman script template editor seperti di bawah ini


Perhatikan script template toko online, tampilan awalnya seperti di bawah ini

<!-- Shopping Cart Starts -->
<div id='add-to-cart-widget'>
<h2>Shopping Cart</h2>
<div class='simpleCart_items'/> 
<div id='cartTotal'>
Total: Rp. <b><span class='simpleCart_total'/></b>
</div>
<div class='cartbuttons'>
<a class='simpleCart_empty' href='javascript:;'>Empty Cart</a>
<a class='simpleCart_checkout' href='javascript:;'>Checkout</a>
</div>
</div>
<!-- Shopping Cart Ends -->


Ganti bagian script
 
<a class='simpleCart_checkout' href='javascript:;'>Checkout</a>

Masukkan url halaman yang akan dihubungkan dengan toombol checkout, misalnya url yang digunakan
  http://pjshopok.blogspot.com/p/formulir-pemesanan.html maka perubahannya seperti di bawah ini

<a class='simpleCart_checkout' href='http://pjshopok.blogspot.com/p/formulir-pemesanan.html>Checkout</a>


Hasil Edit Script Shoping cart  menjadi seperti di bawah ini:
 

<!-- Shopping Cart Starts -->
<div id='add-to-cart-widget'>
<h2>Shopping Cart</h2>
<div class='simpleCart_items'/>
 
<div id='cartTotal'>
Total: Rp. <b><span class='simpleCart_total'/></b>
</div>
<div class='cartbuttons'>
<a class='simpleCart_empty' href='javascript:;'>Empty Cart</a>
<a class='simpleCart_checkout' href='http://pjshopok.blogspot.com/p/formulir-pemesanan.html'>Checkout</a>
</div>
</div>
<!-- Shopping Cart Ends -->

Setelah selesai melakukan Edit script tempate. Klik Tombol
 Simpan Template 

maka bila diklik form pembelian atau pemesanan akan muncul 



Selamat Mencoba.

45 comments:

  1. Untuk templatenya ada berapa pilihan mas?

    ReplyDelete
  2. Omm..kalau untuk mobile version apa ada script yg hrus dirubah..??

    ReplyDelete
  3. Thanks! ini yang lagi saya cari-2x akhirnya ketemu juga

    ReplyDelete
  4. Untuk masukin fotonya gimana gan?

    ReplyDelete
  5. Klo dibuat toko online seperti lazada dan yang lainnya themes yang cocok apa ya bro? kadang toko online dari blogspot memang susah modifikasi themesnya.

    ReplyDelete
  6. Makasih banyak ya ilmunya sekalian ijin download.

    ReplyDelete
  7. gan mohon bantuan tutorialnya buat ngedit keranjang belanja, sama masukin harga trus kirim ordernya gan......
    di blog
    http://arraihan-collection.blogspot.com/

    saya newbie gan yang sedang mencoba membuka lapak

    ReplyDelete
  8. terima kasih banyak gan untuk infonya,, semoga menjadi info yang sangat bermanfaat bagi kita semua

    ReplyDelete
  9. Gan kalo memasukan gambar secara bersamaan bisa gak?misalnya foto tas sampai 5 item gitu.mohon penjelasan

    ReplyDelete
  10. halo gan poedjiati tan, saya mau memulai membuka toko online, kebetulan template yang saya punya bagus bagi diri saya, tapi sayangnya template saya tidak mempunyai fitur widget keranjang belanja, apakah agan bsa memberikan saya tutor bagaimana cara memasangan widget keranjang belanja? saya sudah googling ga nemu ehehe makasi ya saya tunggu balesannya ;((

    ReplyDelete
  11. makasih atas infonya
    http://obatalami24.blogspot.com/2014/12/obat-keputihan-paling-alami.html

    ReplyDelete
  12. mantap dah artikelnya kawan saya suka desainnya

    ReplyDelete
  13. terimakasih banyak buat artikelnya sob, sangat membantu...

    ReplyDelete
  14. sepertinya web toko online dengan platform blogspot akan lebih menarik, karena kita sudah paham betul kemudahan blogspot, namun menurut saya platform blogspot ini harus selalu diuji coba agar tidak ditemukan celah yang dapat merugikan pemilik dan konsumen

    Salam kenal sobat, maaf blogwalking langsung berkomentar hehhehe
    trims,
    Butik Komputer

    ReplyDelete
  15. Manteep sob informasi artikelnya :)
    http://goo.gl/WwX4fm

    ReplyDelete
  16. Tutorialnya Sangat Lengkap dan Mudah di Mengerti Kunjung balik ya gan
    http://aris88stmik-plk.blogspot.com

    ReplyDelete
  17. untuk toko online yang lebih mudah lagi tanpa membuat website bisa gabung di www.shopious.com . Pusat toko online terlengkap dan teraman :D bisa punya website sendiri disana :D

    ReplyDelete
  18. Terima Kasih banyak sangat Membantu.

    ReplyDelete
  19. http://url.ac/ar9px
    http://goo.gl/Xe60pk
    http://tinyurl.com/qdb7u4m
    http://ow.ly/RqKGm
    http://mcaf.ee/qdpgc9
    http://tiny.cc/h2bj2x
    http://is.gd/TTe9Mh
    http://goo.gl/sHZ7pU
    http://goo.gl/YJ8vKR
    http://goo.gl/e5VEhj
    http://goo.gl/bZnDV2
    http://ow.ly/RUn6l

    ReplyDelete
  20. Informasi yang berguna terutama buat kami yang lagi memulai bisnis online...
    Cek dagangan kami di
    http://www.safacolection.com/

    ReplyDelete
  21. Mantap untuk toko online ni
    http://www.bukukesehatan.com/

    ReplyDelete
  22. Kalo template nya bukan gitu enggak bisa ya??? ;((

    ReplyDelete
  23. Kalo template nya bukan gitu enggak bisa ya??? ;((

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. Nice info ...
    BTW Blognya fontnya terlalu kecil gan..

    ReplyDelete
  26. kerren tutorialnya.. tq for share

    ReplyDelete
  27. Saya akan coba, semoga berhasil..

    ReplyDelete
  28. mau tanya cara memasukan gambar dan kalau jenis barangnya katakan 20, barang scripnya apa juga dikopi 20 di komennya mohon penjelasan masih awam

    ReplyDelete
  29. tombol beli nya ga bisa di klik :'(

    ReplyDelete
  30. gan..? untuk menu add to chard nya gmn?
    salam kenal..

    ReplyDelete
  31. Boleh di coba dan ijin menyerap ilmu gan.
    Moga sukses selalu.

    ReplyDelete
  32. trims gan, perlu dicoba nih :d

    ReplyDelete
  33. A web application developed based on the shopping cart migration concept will adopt the layout of the application.

    ReplyDelete
  34. Amazing, keep sharing Data Entry also visit us thanku

    ReplyDelete
  35. Thank you for your post, myself very happy to read it because it can give me more insight, thanks.Stylish Font Generator

    ReplyDelete
  36. Sudah di ciba tutorialnya tapi masih belum berhasil

    ReplyDelete