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.

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.