Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

THEME SHOP - Tukang Toko Online
Jasa Review

Template Toko Online Shopping Cart dengan Checkout via Email

Makin banyak pegiat toko online yang memanfaatkan platform blogger sebagai tempat untuk membuka lapaknya. Dan, efeknya adalah dengan makin banyak dicarinya template yang sangat mendukung untuk berbisnis ecommerce ini.

Saat ini sudah semakin banyak blogger template ecommerce yang melengkapi fiturnya dengan shopping cart. Namun hanya sedikit template berfitur shopping cart dengan currency mata uang lokal (Rupiah) dan bisa melakukan checkout via email. Kebanyakan fitur checkout dari shopping cart adalah melalui paypal atau google checkout yang pada saat ini belum bisa memproses dan menerima rupiah.


Kalaupun ada template dengan shopping cart yang memiliki fitur currency Rupiah dan tombol Checkout via email, maka yang banyak beredar adalah template berbayar atau template premium. Sampai saat ini sepertinya belum ada yang bersedia membaginya secara cuma-cuma.


Nah kali ini Tukang Toko Online akan membagikan blogger template toko Online dengan fitur shopping cart yang memakai currency rupiah dan dilengkapi juga dengan fitur checkout via email. Shopping cart di template ini memanfaatkan script dari SimpleCart dan desain template dari BloggerMint, sebelum disempurnakan oleh Tukang Toko Online agar lebih mudah dipakai oleh pebisnis lokal (Indonesia).


Setidaknya meskipun belum secanggih shopping cart dari Sistem CMS lainnya semacam Wordpress, Opencart dll, namun fitur shopping cart pada template ini sudah cukup jika dipakai sebagai lapak berjualan online buat Blogger.


Baca juga posting mengenai template toko online berikut yang sudah memiliki fitur desain responsive dan juga memiliki fungsi checkout via email serta email invoice yang lebih lengkap:


Silakan anda simak fitur selengkapnya di bawah ini dan jika anda berkenan, silakan anda download dan manfaatkan dengan bijak.


Jangan Lupa untuk mengklik tombol Like pada fanpage Tukang Toko Online di facebook atau follow Twitter Tukang Toko Online agar anda bisa terus menerima update artikel dari Blog ini.



Template Kranjang Blanja



template kranjang blanja

Fitur :
  • Header Adspace 728x90 
  • YM Button
  • Search Box
  • Tab Navigation
  • Grid Style 4 columns
  • breadcumbs
  • Related Post with thumbnail 
  • Bookmark Share Site
  • Shopping cart
  • IDR Currency (Rupiah)
  • Multi Tabs Widget
  • Checkout via email
checkout page single page

Panduan Install template
1. Download Template dari link Download di atas
2. Masuk ke akun Blogger Anda.
3. Upload file template tersebut pada akun blogger Anda (panduan upload Template ADA DISINI)
4. Kemudian Masuk ke opsi EDIT HTML template blogger Anda. Jangan lupa untuk memberi centang Expand Widget Template (ingat!! selalu back up template dulu untuk jaga-jaga).

Berikut adalah beberapa elemen kode yang bisa anda lakukan editing.
Editing bagian Header :


header template kranjang blanja


Mengganti ID Yahoo Messenger 
Temukan kode di bawah dan ganti text yang berwarna merah dengan ID YM anda :

ymsgr:sendIM?teguharifiantoati
dan
http://opi.yahoo.com/online?u=teguharifiantoati
Mengedit kotak pencarian 
Agar kotak pencarian bisa bekerja di blog Anda, cari alamat url berikut :
http://templatekranjangblanja.blogspot.com/search
ganti text berwarna merah (templatekranjangblanja.blogspot.com) dengan alamat URL Blog Anda.

Mengganti Logo

Anda harus menuju ke Tab Layout/ Tata Letak, Kemudian edit widget Header, lalu ganti logo dengan logo toko anda sendiri (lihat gambar di bawah ini).


mengganti logo blog / toko online

Mengganti Banner 728x90

Masuk ke template >> edit html >>  centang expand widget 
Cari kode berikut :
<div id='topads'>
<b:section class='adslot' id='adslot' maxwidgets='1' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>

  </div>
Hapus semua kode yang berwarna merah dan ganti dengan kode berikut
<a href='http://linkanda.com/' target='_blank' rel='nofollow'><img src='http://alamaturlgambaranda.com/gambar.jpg'/></a>
Keterangan:
- ganti link warna merah dengan link anda
- ganti link gambar warna biru dengan link gambar anda (pastikan ukuran gambar 728x90).

Preview template, jika sudah benar, save template anda

Mengganti Kalimat Selamat Datang
Masih di bagian Template>>Edit HTML, Cari kalimat selamat datang seperti gambar berikut ini dan ganti dengan kalimat selamat datang versi anda sendiri.
Mengganti Link Checkout Shopping Cart

Cari kode berikut ini :  

<b:if cond='data:blog.url != &quot;http://templatekranjangblanja.blogspot.com/p/checkout.html&quot;'>
<!-- Shopping Cart Starts -->
<div id='add-to-cart-widget'>
   <h2>Keranjang Belanja</h2>
   <div class='simpleCart_items'/>
   <div id='cartTotal'>
      Total: <span class='simpleCart_total'/>
   </div>
   <div class='cartbuttons'>
      <a class='simpleCart_empty' href='javascript:;'>Kosongkan</a>
      <a href='http://templatekranjangblanja.blogspot.com/p/checkout.html'>Checkout</a>
       </div>
</div>
<!-- Shopping Cart Ends -->
</b:if>
Kemudian ganti semua alamat sub domain (yang berwarna merah) tersebut dengan alamat blog anda.

Memasang Kode Template Entry Post


Copy kode script di bawah ini dan letakkan pada bagian menu Setting >> Posts anda Comments >> menuju ke opsi Post (klik edit) pada blog anda


<table border="1" style="width: 660px;">
<tbody>
<tr>
  <th class="item_thumb" id="thumb" width="45%">Pasang Gambar Produk Anda DISINI</th>
  <td><input class="item_add" type="button" value="Add to Cart" /></td>
</tr>
<tr>
  <th><b>Kode Barang</b></th>
  <td class="item_name">Kode produk taruh disini!</td>
</tr>
<tr>
  <th><b>Harga</b></th>
  <td class="item_price">$99.99</td>
 </tr>
<tr>
  <th><b>Keterangan</b></th>
  <td class="item_Description">Fitur produk!</td>
 </tr>
<tr>
  <th><b>Stok Barang</b></th>
  <td>Stok barang anda!</td>
</tr>
<tr>
  <th><b>Gambar Tambahan</b></th>
  <td>tempatkan gambar produk tambahan di sini</td>
</tr>
</tbody>
</table>
Membuat Halaman Statis / Static Page untuk Checkout
Masuk ke menu Laman (Page) >>buat laman baru >> laman kosong kemudian masuk ke bagian HTML, beri Judul Checkout, selanjutnya copy paste script di bawah ini :
<h2 style="text-align: center;">
Keranjang Belanja Anda</h2>
<h2 style="font-weight: normal; text-align: center;">
<span style="font-size: x-small;">"Mohon Lengkapi Form dan Copy Paste Semua Order di Kolom Message. .!"</span></h2>
<div class="simpleCart_items">
</div>
<div class="clear">
<br />
<br />
<table border="1" style="width: 680px;"><tbody>
<tr><td class="odd">Total Items: </td><td class="even"><span class="simpleCart_quantity">0</span></td></tr>
<tr><td class="odd">SubTotal: </td><td class="even"><span class="simpleCart_total">Rp0.00</span></td></tr>
<tr><td class="odd">Tax Cost: </td><td class="even"><span class="simpleCart_taxCost">Rp0.00</span></td></tr>
<tr><td class="odd">Biaya Kirim: </td><td><a href="http://jne.co.id/" rel="nofollow" target="_blank">Cek di Sini</a></td></tr>
<tr><td class="odd">Final Total: </td><td class="even"><span class="simpleCart_finalTotal">Rp0.00</span></td></tr>
</tbody></table>
</div>
Anda bisa mengganti kalimat panduan yang berwarna merah sesuai dengan selera anda sendiri. 

Ini masih belum selesai, agar halaman checkout via email anda bisa berfungsi, harus menambahkan kode email kontak form di bawah kode di atas. Kalau dalam contoh demo templatenya memakai form dari Kontactr (panduannya DISINI). Sehingga hasilnya seperti terlihat pada gambar di bawah ini 



checkout page
Anda bisa memakai form buatan buatan sendiri dari Google Docs (Lihat cara pembuatannya DISINI) atau dari form email kontak lain yang banyak bertebaran di internet.

Sampai disini tutorial panduan install template kranjang blanja sudah selesai.


Jika ada masalah silakan kirimkan komentar melalui kolom komentar di bawah.


Jangan  lupa Like fanpage facebook Tukang Toko Online.



Kalau anda gak mau repot dan susah-susah edit template dan bikin toko online platform blogger, Manfaatin Jasa bikin toko Online dari tukang Toko Online DISINI

85 komentar untuk "Template Toko Online Shopping Cart dengan Checkout via Email"

  1. kalo cara menghapus keranjang belanja gmn caranya ya :)

    BalasHapus
  2. makasih bos tutorialnya akan ane coba praktekkan app jg fb ane

    BalasHapus
  3. @wibi : hapus semua kode di bagian sub judul Mengganti Link Checkout Shopping Cart pada artikel di atas..

    BalasHapus
  4. Mau Tanya nie Gan..? Bisa ngak saya minta tutorial shopping cartnya saja buat saya pasang di tamplate blog online shop saya...?Jika ada di mana saya bisa kunjungi link tutorialnya...?tanks

    BalasHapus
  5. @anduras: maaf gan, saya gak punya tutorialnya, saya ambil cart dari simplecart punyanya the wojoo team yang open source. Coba googling aja ya Gan. thx dah bkunjung.

    BalasHapus
  6. Makasii banyak ya Gan..template nya siip bgt..
    mo nanya nih,gw udh nyoba template nya,tp link "Check Out" yg d bwh keranjang belanja kl d klik kog g bs masuk ke Halaman Statis / Static Page untuk Checkout ?? gmn benahin nya gan??

    gw udh nurut step by step nya #awalnya...
    tp trs pas gw edit2 gt,entah gw klik apaan,,jadinya gitu deh...

    mnta bantuannya ya gan ....
    thankz for all

    BalasHapus
  7. Ane mau namya gan, kalo chekout yg di atas bisa di pake di template blogger store ga gan?soalnya ane udh trlanjur pake template blogger store.terimakasi atas jawabannya

    BalasHapus
  8. Gan..........klo widget "produk terbaru" yang sebelah kanan atas gak muncul, solusinya gmana?

    Thanks before

    BalasHapus
  9. @Hapshalita : udah bikin page checkout..? 9alamatnya harus seperti ini : naamablog.blogspot.com/p/checkout.html.
    Lalu ikuti cara panduan cara : Mengganti Link Checkout Shopping Cart di atas.

    @wahyu :Bisa gan, tinggal edit aja widget shopping cartnya dan ganti link cekout dengan link page checkout anda.

    @informasi terkini : hapus dulu widget tsb, lalu pasang lagi widget recent post dari bloggerplugins.

    BalasHapus
  10. templatenya menarik sekali, udah aku coba tp topads yg 728x90 gk bisa muncul, mau diganti sebagai banner toko.. ada solusinya gk y? thnx :)

    BalasHapus
  11. makasih ya gan ane ijin sedot templatenya n ijin pake ya.....

    BalasHapus
  12. @Panindias: gak munculnya kenapa ya Gan..?
    @Belly : Silakan gan..

    BalasHapus
  13. cara ganti topads yg 728x90 gmn y?

    BalasHapus
  14. @panindian : tinggal ganti aja url gambar dengan url gambar yang udah agan upload di hosting (misal di photobucket). Usahakan ukuran bannernya juga sama 728x90 pixel ya Gan, biar image hasilnya juga sesuai... Semoga berhasil..

    BalasHapus
  15. Mantep gan, dicoba pasang untuk Toko Wing yang rencana mau tak jual tu domain plus blog storenya. Ijin coba pasang ya gan.
    Best regards

    BalasHapus
  16. cara ganti keranjang belanjanya ke blogger store gimana ya gan

    BalasHapus
  17. om kode ganti topadsnya gmana? ane ubek2 edit html gak nemu

    BalasHapus
  18. Gan, mau nanya cara setting widget "produk terbaru". kok di blog ane ga kebaca yah, kata nya begini: ada kesalahan dalam gadget ini.

    satu lagi, gimana cara nambah form pemesanan di checkout?
    thanks..

    BalasHapus
  19. laman statis check outnya kok, angkanya gk brubah. cma total itemnya doang?

    Total Items: 3
    SubTotal: Rp 0.00
    Tax Cost: Rp 0.00
    Biaya Kirim: Cek di Sini
    Final Total: Rp 0.00

    terus,, di dpan harga hsil klik 'add to cart'-nya ada angka 14-nya. pdahal sharusnya gk ada. kyak gini Rp 14,120,000.00. dan aq sih sdah pasang harga dgn gak pake titik dan Rp juga. tp tes add to cart, mlah ad angka 14-ny itu.

    BalasHapus
  20. @elztore: cek lagi panduan setingnya di atas, sudah saya update

    BalasHapus
  21. @blackbery: hapus widget, add lagi widget recent post dari blogger plugin..
    @hyeongnimwan: untuk pengisian di masing-masing kolom usahakan jangan langsung copy paste dari sumber data anda, edit dulu di notepad baru paste di kolom, atau kalau bisa diketik lagi sendiri. Biasanya karena adanya tabel di dalam tabel karena copy paste tadi.

    Solusinya edit ulang post anda...

    BalasHapus
  22. cek gan http://jamoriginalcasio.blogspot.com/ kok gak sama pada demonya, tutornya kurang gan.. add to cart sama harganya kok gak keluar

    BalasHapus
  23. @Hemat Grosir: Anda belum pasang 'Post Template di Entry Post', coba anda cek lagi panduan untuk 'memasang post template di entry Post' dari artikel di atas

    BalasHapus
  24. gan templatenya bagusnya cuman web browser mozila aja ya,,, soalnya ane buka di google crom ada masalah ketika buka test produk.. sama tolong kasih related postnya juga gan ,, biar keren banget thanks buat agan nih,,

    BalasHapus
  25. @sigit kuncoro: saya test buka di Chrome gak ada masalah gan, related produk udah ada Gan... otomatis tampil di bawah tiap postingan berdasarkan label

    BalasHapus
  26. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  27. saya juga mengalami problem yang sama di checkout. maksimal hanya 3 sd 4 item yg bisa dilist di halaman checkout setelah menekan tombol checkout di chart. saran utk tidak copy paste data ke table sudah dilakukan tetapi hasilnya tetap sama. mohon bantuannya (url nya http://tokoumiku.blogspot.com/)

    BalasHapus
  28. @Admin : blog anda (http://tokoumiku.blogspot.com)belum ada postnya jadi saya belum bisa cek masalah yang sebenarnya seperti apa..?

    BalasHapus
  29. semua post barusan saya revert to draft krn problem tsb, sekarang udah saya publish lg. mohon dilihat kembali..thanks

    BalasHapus
  30. gan.. untuk web ane.. amestore.blogspot.com.. knp ga bisa masuk keranjang belanja? dan gambarnya kepotong gan.. thx

    BalasHapus
  31. kenapa yaa saat diklik add to cart nya ga bisa nambah ke keranjang? terima kasih...

    BalasHapus
  32. Kenapa ya saat klik add to chart hanya posting pertama aja yang benar nominalnya di shopping cart, posting produk yang selanjutnya angka nominalnya ngaco...pada postingan awal juga langsung tertera taxt cost dan shipping costnya padahal kan seharusnya tidak ada...mohon bantuannya. Email saya:kreasinuha@gmail.com

    BalasHapus
  33. min, mau tanya gimana caranya memberikan menu seperti home , chek out dll.
    trima kasih

    BalasHapus
  34. gan, mohon di cek blog saya www.nizhieolshop.blogspot.com
    thumbnail kok tidak penuh ya gan?
    saat gambar di klik, gambar preview( gambar besar tidak tampil)
    lalu saya sudah coba tambah ulang widget recent post, tetapi selalu ada peringatan 'widget broken".

    mohon bantuannya

    BalasHapus
  35. @fan nizhie : Masuk ke template>>HTML lalu:
    Cari kode ini : .post img {width:120px; height:130px;border:0 none; background:none;}
    Ganti dengan kode ini : .post img {width:120px; height:130px;border:0 none; background:none;margin-right:20px;}
    jika masih kelihatan ganti :margin-right:20px; (angka 20 ganti dengan yang lebih besar misal 25 atau 30), preview dulu lalu save jika hasilnya sudah benar.

    BalasHapus
  36. @ Eko debian : tinggal bikin halaman statis baru aja (page)..

    BalasHapus
  37. Muakasih buanyak bro,..
    Saya udah coba dan berhasil.
    @ Toko Online ZENTRIST

    BalasHapus
  38. aku berhasil menggunakannya...thanks ya gan...mudah2 an agan selalu menampilkan yang terbaru dan salam sukses selalu

    BalasHapus
  39. makasih banget ya mas, sebagai ucapan terimakasih saya klik iklan di blog ini, hahaha

    BalasHapus
  40. di kotak katik google akhir nya ketemu juga.... sip gan...!!!. sangat bermanfa'at sekali bagi saya yang mau belajar bisnis online

    BalasHapus
  41. Benarkan Template ini hanya support add cart 15 item produk sekali pesan, dan harus kosongkan item produk dulu untuk pesanan selanjutnya? mohon pencerahan bos. trims byk

    BalasHapus
  42. mas kho zy nda bisah pasan ADD cart
    banya yng blom bisah zy pahami
    mas kalau sempat kunjugi blog zy mas
    http://butik-zonamurah.blogspot.com

    di tunggu yea mas petunjuknya
    fb = devhi sweetmanja

    BalasHapus
  43. Terima kasih tipsnya.. berhasil ;-)

    BalasHapus
  44. ada masalah ni sikit,,,
    kenapa Harga di Gambar Produk Rp. 250.000 waktu kita add to cart ke luar di total kerangjang belanja Rp. 250.00

    mohon masukannya,,,,,

    BalasHapus
  45. bagaimana cara menghapus ym nya ya?

    BalasHapus
    Balasan
    1. Coba cari kode YM di HTML template, lalu hapus semua kodenya... :)

      Hapus
  46. terima kasih ilmunya sangat membantu saya yang baru mengenal cara buat blogspot semoga anda terus berkaya dan diberikan rezeki yang melimpah oleh tuhan. :)

    BalasHapus
  47. Mohon bantuanya gan untuk mengganti data ini carinya dimana ya saya udah periksa HTML nya semua kok ada tulisan seperti dibawah ini

    Temukan kode di bawah dan ganti text yang berwarna merah dengan ID YM anda :

    Agar kotak pencarian bisa bekerja di blog Anda, cari alamat url berikut :

    http://templatekranjangblanja.blogspot.com/search

    ganti text berwarna merah (templatekranjangblanja.blogspot.com) dengan alamat URL Blog Anda.

    Makasaih bantuanya

    BalasHapus
    Balasan
    1. di template >> edit html gan... coba periksa lagi ya.. :d

      Hapus
  48. bisa dibuatkan untuk saya gan?

    BalasHapus
  49. Gan ko g seperti contoh ya , mohon di lihat gan kesalahanya di mana
    http//bajubayiku123.blogspot.com

    makasih bantuanya gan, maklum pemula

    BalasHapus
    Balasan
    1. Salahnya di saat posting gan, banyak atribut yang tidak ditaruh ditempat semestinya, baca lagi panduannya pelan-pelan ya gan, judl post juga gak ditulis.. :d

      Hapus
    2. Ok gan makasih mudahan sy bisa

      Hapus
    3. Nanya gan saya udah seting menurut panduanya tapi add dan saat check out nya ga bisa ya mohon bantuanya gan kalau sempat di lihat blognya ya gan. terimakasih bantuanya

      Hapus
    4. Post Templatenya belum dipasang, Gan... jadi setiap posting harus pake post template tersebut :d

      Hapus
    5. Makasih gan saya sdh coba , tapi ada masalah baru gambarnya seperti terpotong, dan saat chek out halaman statik tdk muncul mohon pencerhanya lagi gan , maaf banyak nanya masih belajar gan

      Hapus
  50. Gan, cara ngasih menu drop down gimana >? Biar nambah keren (h)

    BalasHapus
  51. Kalau Harga sama ADD to Card bisa di tempatkan dibawah gambar ga gan , Caranya bagaimana Tris infonya

    BalasHapus
  52. ini templete bagus tapi bagaimana cara kostumisasi agar tombol addtocart dan harga berada di paling bawah dari gambar produk dan berkenan kiranya dilengkapi dengan invoice order email, terima kasih

    BalasHapus
    Balasan
    1. bagaimana cara agar keterangan produk tercantum di bawah gambar ketika kita klik kanan gambar yg telah di post ..thanks

      Hapus
  53. ass ww mas saya adalah pemula,bisa saya minta kontak untuk bisa di hub jadi belajarnya langsung via phone online

    BalasHapus
  54. makasih buanyak kk~ :>) :>) :>) :-)

    BalasHapus
  55. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  56. thanks udah di coba tapi ada yg gagal wkwkwkwk

    " Mengganti Banner 728x90 "

    bagian itu selalu gagal ;(( merana dah ... buat yang lainnya udah oke pake banget hehehe
    mohon pencerahan lagi nanti ... (h) :>)

    BalasHapus
    Balasan
    1. script gambarnya di parse dulu (tool parse html ada di web ini, sila cari melalui search box). Baru kemudian masukkan ke script template di edit HTML templatenya..

      Hapus
  57. salam gan, kalau di home : Semua Produk

    Lacak Kiriman Barang

    Nomor Resi JNE

    Bank

    Kategori Produk

    Biar Muncul gimana gan, makasih sebelumnya

    BalasHapus
  58. gan saya ada masalah di add to chart, kalu add 1 item bisa , tapi kenapa kalu add lebh dari satu item di page checkout gk tampil ya?...ini blog saya : http://mitlap.blogspot.com

    terima kasih

    BalasHapus
  59. ijin praktek gan ane mo coba jualan...makasih banyak gan buat templatenya

    BalasHapus
  60. Hai,salam kenal. ijin download ya. n aq udah coba buat, tapi ada masalah di tampilan product terbaru kok, gambar product q ketutup ama 'add to chart' gmn solusinya biar gambar product bisa kelihatan. Tolong bantu ya,trims

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

    butuh bantuannya
    ;(

    BalasHapus
    Balasan
    1. ## ralat
      mohon bantuan tutorial buat ngedit keranjang belanja, sama masukin harga trus kirim ordernya gan......
      di blog
      http://arraihan-collection.blogspot.com/

      makasih dan sangat berharap ada yang mau membantu

      Hapus
  62. malam Gan, caranya nge-reset / batalin pilihan item gimana ya. Ane sudah pakai Email me form untuk lengkapin check outnya, tapi kok gak bisa terkirim ya.
    Mohon pencerahannya

    BalasHapus
    Balasan
    1. Maksudnya apanya yang direset ya..? 8-)

      Hapus
    2. gini gan ... kalau saya sudah milih 5 item barang, trus mau ngeremove 1 item saja, gimana ya caranya

      Hapus
  63. Mas saya numpang nyedot punya mas ya. Mau belajar bikin toko online hehehe

    BalasHapus
  64. ijin sedoot gan...txs...kapan mampir di blog ane

    BalasHapus
  65. maaf untuk di check out saya kok tidak muncul item yang diorder ya.. coba cek www.syareshop.com

    BalasHapus
  66. saya masih bingung ditahap ahirnya gan. di tutorial "membuat kontak kami" saya masih bingung,setelah saya mendapatkan kode tinggal ditaruh dimana ya gan

    BalasHapus
  67. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  68. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  69. menambahkan add cart di produknya gmn gan?

    BalasHapus