Blogspot Shopping Cart Percuma

Bismillah...

Hari ni saya nak beri percuma shopping cart. Ia adalah shopping cart yang asas dan simple. Tetapi tanda harga semuanya dalam USD '$'. Dalam versi yang saya selalu buatkan untuk pelanggan saya semua mereka mahukan tanda harga Ringgit Malaysia 'RM'. Ketika saya menulis ni saya yakin belum ada lagi pembuat Shopping Cart yang dapat memberikan anda tanda dalam matawang malaysia mahupun untuk pembayaran PayPal yang menunjukkan kod matawang Malaysia 'MYR'. Yang paling banyak adalah dalam matawang USD dan boleh didapati juga dengan tanda Rupiah 'Rp' iaitu matawang Indonesia.

Dahulu puas saya mencari dan akhirnya saya terpaksa buat sendiri kodnya untuk matawang Malaysia. Berikut adalah contoh templat percuma yang saya sediakan untuk anda miliki.

Ringgit Malaysia atau RM



Download Template : KLIK DI SINI
Download kesemua files. Jika anda ada perisian ZIP/RAR, boleh sahaja hanya download file J-Shopping-Cart.rar kerana file tersebut telah di kompres menjadi lebih ringan. Templat shopping cart ini adalah dalam skrip XML.

Contoh template : KLIK DI SINI

Selepas download sila ke blog ini semula untuk melihat tutorial selanjutnya bagaimana cara nak pasang ke dalam blog anda.

Seperti biasa taip www.blogger.com. Login dan buat blog baru. Jika anda buat blog yang baru, skip langkah 1.

Sekiranya anda telah sediakan blog sebelum ini, klik tajuk blog anda.

1. Klik/Pergi ke 'Template' - 'Edit HTML'. Jadikan amalan untuk backup terlebih dulu template lama. Kemudian - Right Click Mouse anda - Select all - Copy - Cari Notepad -Kemudian Paste ke dalamnya - Save As.

2. Buka file XML yang anda telah download - Right Click Mouse - Select all - Copy

3. Kembali semula ke blog anda tadi. Klik 'Template' - 'Edit HTML' - Right Click Mouse anda - Select all - Paste - 'Save template'-'View blog' untuk melihat blog templat anda.

4. Klik 'Settings' - Posts and comments - Post Template - Klik 'Add' dan isikan kod di bawah.


<table border="1" style="width: 660px;">
<tbody>
<tr>
  <th class="item_thumb" id="thumb" width="45%"><a href="http://3.bp.blogspot.com/-
k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="http://3.bp.blogspot.com/-
k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s400/blue.gif" 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="Add to Cart" /></td>
</tr>
<tr>
  <th><b>Item Name</b></th>
  <td class="item_name">Product Name Goes here!</td>
</tr>
<tr>
  <th><b>Price</b></th>
  <td class="item_price">$99.99</td>
 </tr>
<tr>
  <th><b>Description</b></th>
  <td class="item_Description">Your product description here!</td>
 </tr>
<tr>
  <th><b>Available Stock</b></th>
  <td>Stock count here!</td>
</tr>
<tr>
  <th><b>Misc</b></th>
  <td>Place extra thumbs/images of product here</td>
</tr>
</tbody>
</table>



5. Klik 'Posts' - 'New Post'. Tukar gambar display dengan gambar produk anda. Anda boleh edit mana yang perlu seperti keterangan di dalam ruangan yang sepatutnya.

6. Jika anda ada akaun PayPal dan mahu gunakannya untuk proses bayaran dalam shopping cart anda, ikuti langkah berikut, Ctrl+ F cari perkataan seperti dibawah dan ganti e-mel berwarna biru di bawah dengan e-mel paypal anda.

<script type='text/javascript'>
simpleCart.email = &quot;dayaglokal@gmail.com&quot;;
simpleCart.checkoutTo = PayPal;
simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];
</script>



7. Jika takde kad Kredit/Debit PayPal boleh guna borang online. Contoh guna Kontactr. Pertama sekali pergi ke Kontactr.com dan daftar untuk akaun baharu. Bila anda dah daftar masuk, skrol ke bawah dan anda akan lihat :

“Ajax Embed Widget” atau “Buttons Code” dan dapatkan Kontactr ID seperti ini :  id=183287;. Salin no id tersebut untuk digunakan untuk langkah seterusnya.

Sekarang pergi ke Template - Edit HTML . Tambah kod di bawah sebelum </head> tag.


<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script>

Kemudian klik butang kekunci keyboard Ctrl+ F dan cari :

input.item_add{
    bottom: 9px;
    font-size: 11px;
    position: absolute;
    right: 15px;
    width: 90px;
}

Gantikan dengan...

span.item_add{
    bottom: 9px;
    font-size: 11px;
    position: absolute;
    right: 15px;
    width: 90px;
}


Ada satu lagi...

input.item_add {
    font-size: 17px;
    height: 40px;
    margin: 5px 0 0 140px;
    position: relative;
    width: 120px;
}


Gantikan dengan ni..

span.item_add {
    font-size: 17px;
    height: 40px;
    margin: 5px 0 0 140px;
    position: relative;
    width: 120px;
}



8. Save Template

Balik semula ke 'Settings' - 'Posts and comments' - 'Post Template'

<table border="1" style="width: 660px;">
 <tbody>
<tr>
  <th class="item_thumb" id="thumb" width="45%"><a href="http://3.bp.blogspot.com/-
k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="http://3.bp.blogspot.com/-
k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block;
height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
  <td><span class="item_add"><script type="text/javascript"> id=183287; t=1; ctxt="Order Now"; </script>
<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script></span></td>
 </tr>
<tr>
  <th><b>Item Name</b></th>
  <td class="item_name">Product Name Goes here!</td>
</tr>
<tr>
  <th><b>Price</b></th>
  <td class="item_price">$99.99</td>
 </tr>
<tr>
  <th><b>Description</b></th>
  <td class="item_Description">Your product description here!</td>
 </tr>
<tr>
  <th><b>Available Stock</b></th>
  <td>Stock count here!</td>
 </tr>
<tr>
  <th><b>Misc</b></th>
  <td>Place extra thumbs/images of product here</td>
 </tr>
</tbody></table>


Tukar id=183287 kepada id anda.


9. Sekarang kembali semula ke ruangan 'Template' - 'Edit HTML' - Tekan butang Ctrl+ F dan cari kod di bawah.

<script src='http://introbloggerscripts.googlecode.com/files/cart.js' type='text/javascript'/>

Gantikan kepada..

<script src='http://shopppingcart.googlecode.com/files/simplecart.js' type='text/javascript'/>

10. Buat halaman/page baru. Klik 'Pages' - 'New page'. Namakannya 'Checkout' dan kemudian masukkan kat Page 'Checkout' kod di bawah (klik 'HTML')

<table border="1" style="width: 680px;"><tbody>
<tr><td class="odd">Jumlah Produk: </td><td class="even"><span class="simpleCart_quantity">0</span></td></tr>
<tr><td class="odd">Jumlah Harga: </td><td class="even"><span class="simpleCart_total">RM0.00</span></td></tr>
<tr><td class="odd">Kos Penghantaran: </td><td class="even"><span class="simpleCart_shippingCost">RM0.00</span></td></tr>
<tr><td class="odd">Kos Cukai: </td><td class="even"><span class="simpleCart_taxCost">RM0.00</span></td></tr>
<tr><td class="odd">Bayaran: </td><td>Maybank - No. Akaun : 1010 6693 5993</td></tr>
<tr><td class="odd">Jumlah Bayaran: </td><td class="even"><span class="simpleCart_finalTotal">RM0.00</span></td></tr>
</tbody></table>

Selesai...

Anda boleh edit mana yang patut seperti contoh no. akaun di atas kepada no akaun anda. Semoga berjaya.

Jika anda mahukan tambahan lain untuk customize blog anda, bolehlah upah saya untuk melakukan perubahan yang anda mahukan. Terimakasih.

*Kepada anda yang telah menjadi pelanggan kami, blog dan link anda nanti akan di masukkan ke dalam weblog ini sebagai rujukan pembaca blog yang singgah ke sini. Amacam best tak?

**Jika anda masih pening bagaimana nak buat, buat-buat tak jadi, buat-buat tak jadi, apa kata saya bantu anda dengan sedikit upah?

***Anda boleh upah saya untuk..
  • Template (diberikan PERCUMA)
  • Tutorial
  • Setting untuk letakkan Post berterusan (secara automatik setiap kali memasukkan produk baru)
  • Setting Page/Halaman baru (contoh seperti paparan pembelian 'Checkout')
  • Background/Latar belakang - Samada berwarna atau bergambar
  • Tema Warna (bingkai, footer, sidebar dll)
  • Header/Banner (Maaf servis desain telah dimansuhkan atau akan di sub pada rakan lain)..
  • Matawang. Contoh ditukar ke Ringgit Malaysia @ RM
  • Memasukkan pembayaran penggunaan kad kredit/debit menggunakan PayPal.
  • Dropdown Menu - Kepada anda yang mempunyai banyak label produk.
  • Memasukkan kod imej gelongsor (slider) bagi templat yang sedia ada Slider Image.
  • Memasukkan dan setting kos penghantaran.
  • Memasukkan kod facebook, instagram, twitter dan yang lain.
  • Memasukkan kod khas untuk menu navigasi, menu dan lain-lain.
  • Borang Online
  • Kod untuk mesra carian atau SEO.
Anda juga boleh upah saya untuk setting domain berbayar seperti contoh :
www.j-reka.blogspot.com kepada www.j-reka.com.


Nama saya Hairizal Hamidon. Saya memulakan perniagaan berdaftar sejak tahun 2007. Saya membuat bisnes SOHO (Small Office Home Office). Kini saya lebih cenderung kepada pemasaran bisnes internet dan menyediakan servis buat blog dengan niche untuk platform BLOGGER BLOG (BLOGSPOT) di J-REKA.COM.


22 ulasan:

  1. Sememangnya memudahkan blogger untuk memulakan jualan on-line... dan percuma pulak tuh! Kini bisa ditambah functions menggunakan send order email selain paypal checkout. Boleh lihat live working page di http://blogrcart-mukabuku.blogspot.com Harap ia dapat membantu designers & blogger usahawan on-line. Lebih mudah, cepat & kelihatan profesional seperti template blogr on-line koleksi anda.

    Terima kasih diatas perkongsian.

    BalasPadam
  2. Bro Irsah, saya memang tabik bro punya desain. Lebih moden. Saya selalu juga rujuk di blog kepunyaan bro. Satu penghormatan bro datang ke sini.

    BalasPadam
  3. Excellent tapi checkout I masih pergi ke Paypal. pening I

    BalasPadam
  4. Lifestyle Zone. Saya sediakan setting untuk ke Checkout terus.

    BalasPadam
  5. Balasan
    1. Ada yang tersilap buat tu. Saya pun offer untuk buat ni sampai 25hb December 2014. Kalau nak upah saya buatkan boleh. Lepas tarikh tu tak buat lagi. Busy dgn projek lain.

      Padam
  6. Macam mana saya nak contact encik untuk upah buatkan online shop blog?

    BalasPadam
    Balasan
    1. Buat masa ni saya busy cikpuan. Kalau nak hubungi boleh melalui Telegram saya atau melalui facebook. Boleh cek link di laman 'HUBUNGI SAYA'

      Padam
  7. Ada sesuatu yang berkaitan shopping cart akan saya buat untuk tahun ini. Kalau boleh sabar, ada manfaatnya untuk pembaca yang mahukannya..

    BalasPadam
  8. Bagaimana bila di shopping cart & check out masih USD. bagaimana mahu tukar kan?

    BalasPadam
    Balasan
    1. Ulasan ini telah dialihkan keluar oleh pengarang.

      Padam
    2. Saya ada sediakan kod Ringgit Malaysia tu. Untuk pembelian kod cikpuan boleh bagi alamat e-mel. Nanti saya e-mel harga.

      Padam
    3. saya pon ada masalah yg sama ..boleh e-mel kan kt aremad9403@g.mail.com

      Padam
  9. Dibahagian shopping cart selepas klik add to cart. Image pilihan menjadi BROKEN / tiada gambar. Mengapa ye

    BalasPadam
    Balasan
    1. Ada beberapa sebab imej tu broken.
      1. Saiz imej tu besar. Boleh buat melalui online je antaranya di http://www.picresize.com/
      2. Di Malaysia masih lagi tak ramai yang mempunyai kelajuan internet yang tinggi. Ini menyebabkan lambat loading terutama untuk video dan imej bersaiz besar.

      Itu adalah kelemahan template seperti ini. Sebab itu ada template shopping cart yang ringkas dan tak memaparkan secara terus thumnail image tersebut kerana masalah-masalah seperti di atas.

      Padam
  10. saya sudah buat. sampai no 7. nak paste html tu tak jumpa pula head tag adess..tolong..

    BalasPadam
    Balasan
    1. Di dalam ruangan kod xml blog tu saya suka klik kanan mouse kemudian tekan butan Ctrl + F.

      masukkan perkataan atau kod yang kita nak cari tu seperti 'head' kemudian klik 'enter'.

      Padam
  11. Bagaimana bila di shopping cart & check out masih USD. bagaimana mahu tukar kan?

    BalasPadam
    Balasan
    1. Saya mengambil upah sedikit untuk setting tanda USD tersebut. Tapi sejak 15hb mac 2016 saya terpaksa bekukan servis saya kerana masa yang tidak mengizinkan sekarang.

      Padam
  12. salam..tolong tuan..sy tak dapat buka .xml file tu la

    BalasPadam
  13. w'salam. Maaf, saya tak buat lagi servis ini.

    BalasPadam