Download Template
Keterangan
Menggunakan Blogger sebagai toko online tidak mudah tapi gratis.
Jika memiliki WebHoting, akan lebih baik jika menggunakan CMS yang mendukung penggunaan toko online
1. OpenCart.
Fitur terlalu lengkap sehingga kurang mudah
Demo dari Open Cart bisa dilihat disini
http://www.opencart.com/index.php?route=demonstration/demonstration
2. Wordpress+WooCommerce Theme
Cukup lengkap sehingga mudah digunakan
Wordpress https://wordpress.org/
WooCommerce http://www.woothemes.com/woocommerce/
atau
Mudah dan Gratis
dengan menggunakan jasa Toko Online
Bukalapak.com atau Tokopedia.com
Download Template Aperka Versi 1
https://drive.google.com/file/d/0B3WaFWapcwjDNXo0XzVPV3BiTlk/view?usp=sharing
Laman yang harus dibuat
1. View Cart
2. Send Orders
3. Instant Checkout
4. Error
5. Success
1. View Cart
<h2 style="margin: 0;">
#1 Keranjang Belanja</h2>
Review your selected item(s) in your Cart.<br />
<br />
<span class="simpleCart_items"></span>
<br />
<h2 style="margin: 0;">
#2 Catatan Belanja</h2>
Lihat kembali pesanan Anda.<br />
<br />
<table border="1" class="summary">
<tbody>
<tr>
<td>Banyak Barang:</td>
<td><strong><span class="simpleCart_quantity"> </span> item(s)</strong></td>
</tr>
<tr>
<td>Jumlah Harga:</td>
<td><strong><span class="simpleCart_total"> </span></strong></td>
</tr>
<tr>
<td>Biaya Kirim: </td>
<td><strong><span class="simpleCart_shipping"> </span></strong></td>
</tr>
<tr>
<td>Asuransi:</td>
<td><strong><span class="simpleCart_tax"> </span></strong></td>
</tr>
<tr>
<td><strong>Jumlah Pembayaran:</strong></td>
<td><strong><span class="simpleCart_grandTotal"> </span></strong></td>
</tr>
</tbody>
</table>
<br />
<br />
<h2 style="margin: 0;">
#3 Checkout Options</h2>
Pilih metode pembayaran.<br />
<br />
<table class="checkingOut">
<tbody>
<tr>
<td><strong><a class="button checkout-links" href="http://aperka.blogspot.com/p/instant-checkout.html" rel="nofollow">Bayar melalui Paypal</a></strong><br />
Metode pembayaran online yang aman.
</td>
<td><strong><a class="button checkout-links" href="http://aperka.blogspot.com/p/send-orders.html" rel="nofollow">Kirim Email ke Aperka</a></strong><br />
Pembayaran manual
</td>
</tr>
</tbody>
</table>
2. Send Orders
<form action="" id="contact" method="post">
<fieldset>
<h2 style="margin: 0;">
Pesanan Anda</h2>
Pesanan dan pembayaran<br />
<br />
<table border="1" class="summary" rules="all">
<tbody>
<tr>
<td>Jumlah Barang:</td>
<td><strong><span class="simpleCart_quantity"> </span> item(s)</strong></td>
</tr>
<tr>
<td>Jumlah Harga:</td>
<td><strong><span class="simpleCart_total"> </span></strong></td>
</tr>
<tr>
<td>Biaya Kirim: </td>
<td><strong><span class="simpleCart_shipping"> </span></strong></td>
</tr>
<tr>
<td>Asuransi:</td>
<td><strong><span class="simpleCart_tax"> </span></strong></td>
</tr>
<tr>
<td><strong>Jumlah Pembayaran:</strong></td>
<td><strong><span class="simpleCart_grandTotal"> </span></strong></td>
</tr>
</tbody>
</table>
<br />
<br />
<h2 style="margin: 0;">
Kirim Pesanan</h2>
Data yang anda masukkan akan kami rahasiakan.<br />
<br />
<br />
<div>
<label for="firstname">Nama Depan *</label>
<input id="first_name" name="firstname" placeholder="Nama Depan" title="Your First Name (Required)" type="text" />
</div>
<div>
<label for="lastname">Nama Belakang *</label>
<input id="last_name" name="lastname" placeholder="Nama Belakang" type="text" />
</div>
<div>
<label for="email">Alamat Email *</label>
<input id="email" name="email" placeholder="Email" type="text" />
</div>
<div>
<label for="phone">Phone/ HP *</label>
<input id="phone" name="phone" placeholder="Nomor HP" type="text" />
</div>
<div>
<label for="address">Alamat Pengiriman *</label>
<textarea id="address" name="address" placeholder="Alamat lengkap untuk pengiriman barang"> </textarea>
</div>
<div>
<label for="postcode">Kode Pos *</label>
<input id="postcode" name="postcode" placeholder="Kode Pos" type="text" />
</div>
<div class="clear" style="width: 100%;">
</div>
<div>
<label for="message">Catatan Tambahan<br /><small><i>silahkan isi catatan tambahan Anda disini.</i></small></label>
<textarea id="comments" name="message" placeholder="Catatan Tambahan" style="border: 1px solid #ccc;"></textarea>
</div>
<div>
Catatan: Label bertanda (*) harus diisi.<br />
Salinan detail pesanan Anda akan dikirim ke alamat email Anda. Mohon lihat kotak masuk email Anda setelah berhasil mengirim pesanan ini. Terima Kasih.
</div>
<div>
<a class="simpleCart_checkout button" href="javascript:;" id="sent-order">Kirim Pesan</a>
</div>
</fieldset>
</form>
3. Instant Checkout
We're sorry. We could not process your orders.<br />
<br />
Possible cause:-<br />
<br />
<ul>
<li>Invalid e-mail address.</li>
<li>Busy internet traffic.</li>
<li>Slow/bad internet line.</li>
<li>One or more data is incomplete.</li>
</ul>
<br />
<br />
You can resubmit your orders <a href="http://aperka.blogspot.com/p/view-cart.html">here</a> and continue. Your order items is still available in your cart
4. Success
Thank you. We have received your order details.<br />
<br />
All payment details can be viewed in your email. Please check your email inbox for further instructions.<br />
<br />
Kindly contact us if you need assistance.
Template untuk Posting
<table border="1" class="product-image">
<tbody>
<tr>
<th class="thumb_image" id="thumb"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUkXHHFCE_pZuDKHrZzlWjSUkPMEuVxfYOo3vMEoxbPQgReGV42i0TOdIvFzcctrPhTxDNNdc6U8eHIS49gfrFjojvLsLpgPTrv5Pgysx7G7Qch4xadyZhad0yckHXew9joRlDxW499Q0R/s1600/placeholder-product-image-large.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUkXHHFCE_pZuDKHrZzlWjSUkPMEuVxfYOo3vMEoxbPQgReGV42i0TOdIvFzcctrPhTxDNNdc6U8eHIS49gfrFjojvLsLpgPTrv5Pgysx7G7Qch4xadyZhad0yckHXew9joRlDxW499Q0R/s320/placeholder-product-image-large.png" border="0" height="320" width="320" class="item_thumb" /></a></div>
</th>
</tr>
</tbody>
</table>
<table border="1" class="product-details">
<tbody>
<tr>
<td>RP <span class="item_price">15000</span></td>
</tr>
<tr>
<td class="add_cart"><a class="item_add button" href="javascript:;">Add to Cart</a></td>
</tr>
<tr>
<td class="total_quantity">Currently <strong><span class="simpleCart_quantity"></span></strong> item(s) in cart.</td>
</tr>
<tr>
</tbody>
</table>
<table border="1" class="product-descriptions">
<tbody>
<tr>
<td class="product-label"><strong>Description</strong></td>
</tr>
<tr>
<td class="item_description">
Lorem ipsum dolor sit amet, dolor pericula te eos. Cum melius definitionem et, te impetus mediocrem persequeris mei. Per cu populo diceret reformidans, ei nam dolor apeirian. Postea consetetur an pri, an inani mollis recusabo eum, ea possit pertinax usu. Eligendi principes vim no, ei sea cibo corrumpit.
</td>
</tr>
</tbody>
</table>
<!--more-->
<table border="1" class="product-thumbnails">
<tbody>
<tr>
<td class="thumb-images"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGDr0KzkGdm27Tzt6YBsd32-ZcZU1WYWcqiS4uSMkuJIwNwgF0yVj-SkY5r-0Mu7gZziWyGkqae9Cu_HVrGboJLUDwiuIUA0-g5vYpbEUExXZi4Jlt9ACulgg8YpKKU79LQhscU79VcMw/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGDr0KzkGdm27Tzt6YBsd32-ZcZU1WYWcqiS4uSMkuJIwNwgF0yVj-SkY5r-0Mu7gZziWyGkqae9Cu_HVrGboJLUDwiuIUA0-g5vYpbEUExXZi4Jlt9ACulgg8YpKKU79LQhscU79VcMw/s200/product_placeholder.jpg" border="0" height="125" width="125" /></a></div>
</td>
<td class="thumb-images"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGDr0KzkGdm27Tzt6YBsd32-ZcZU1WYWcqiS4uSMkuJIwNwgF0yVj-SkY5r-0Mu7gZziWyGkqae9Cu_HVrGboJLUDwiuIUA0-g5vYpbEUExXZi4Jlt9ACulgg8YpKKU79LQhscU79VcMw/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGDr0KzkGdm27Tzt6YBsd32-ZcZU1WYWcqiS4uSMkuJIwNwgF0yVj-SkY5r-0Mu7gZziWyGkqae9Cu_HVrGboJLUDwiuIUA0-g5vYpbEUExXZi4Jlt9ACulgg8YpKKU79LQhscU79VcMw/s200/product_placeholder.jpg" border="0" height="125" width="125" /></a></div>
</td>
<td class="thumb-images"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGDr0KzkGdm27Tzt6YBsd32-ZcZU1WYWcqiS4uSMkuJIwNwgF0yVj-SkY5r-0Mu7gZziWyGkqae9Cu_HVrGboJLUDwiuIUA0-g5vYpbEUExXZi4Jlt9ACulgg8YpKKU79LQhscU79VcMw/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGDr0KzkGdm27Tzt6YBsd32-ZcZU1WYWcqiS4uSMkuJIwNwgF0yVj-SkY5r-0Mu7gZziWyGkqae9Cu_HVrGboJLUDwiuIUA0-g5vYpbEUExXZi4Jlt9ACulgg8YpKKU79LQhscU79VcMw/s200/product_placeholder.jpg" border="0" height="125" width="125" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</td>
<td class="thumb-images"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGDr0KzkGdm27Tzt6YBsd32-ZcZU1WYWcqiS4uSMkuJIwNwgF0yVj-SkY5r-0Mu7gZziWyGkqae9Cu_HVrGboJLUDwiuIUA0-g5vYpbEUExXZi4Jlt9ACulgg8YpKKU79LQhscU79VcMw/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGDr0KzkGdm27Tzt6YBsd32-ZcZU1WYWcqiS4uSMkuJIwNwgF0yVj-SkY5r-0Mu7gZziWyGkqae9Cu_HVrGboJLUDwiuIUA0-g5vYpbEUExXZi4Jlt9ACulgg8YpKKU79LQhscU79VcMw/s200/product_placeholder.jpg" border="0" height="125" width="125" /></a></div>
</td>
</tr>
</tbody>
</table>
Installation
***Coming Soon***
Langganan:
Komentar (Atom)
0 komentar: