sponsor

sponsor

Slider

Recent Tube

Business

Technology

Life & style

Games

Sports

Fashion

» » Cara membuat Web Toko Online Gratis

Membuat Web Toko Online Dengan Template Masgus Market


Beberapa pekan terakhir ini saya mencoba mempelajari bagaimana cara membuat web toko online gratis dengan memanfaatkan situs blogger.com untuk membuat sebuah blog garatisan, yang nantinya akan dijadikan model toko online, dari situs blogger.com sendiri belum ada template model toko online yang bisa langsung kita pasang di blog.

Namun begitu, di bloger.com orang-orang top seperti maskolis dan yang lain, mampu menampilkan sisi menarik, yaitu mereka dapat membuat template model toko online, tinggal install di blog kita, jadilah web model toko online.

Template model ini berbeda dengan template pada umumnya, di sini sudah di setting sedemikian rupa, sehingga jika ada orang pesan / order dagangan kita melalui web toko online yang kita punya, maka akan otomatis terkirim via email milik kita, yang sudah kita setting sebelumnya.

Template toko online ini didesain oleh Gusti Adnyana, dan iberi nama Masgus Market, menurut saya template ini menarik dan enak di pandang mata, desainnya juga cukup elegant, apalagi ditambah dengan warna biru muda yang menyala, sungguh membuat template ini semakin mempesona.

Untuk membuat web toko online ini, cukup mudah, tetapi jika anda baru pertama kali mengenal blog, sebaiknya pelajari dulu cara membuat blog, upload template, setting dan editing dan lain-lain, dan untuk anda yang benar-benar pemula, bisa mempelajari dulu dasar-dasar pembuatan blog DI SINI.

Baik, inilah langkah-langkah bagaimana cara membuat web toko online gratis:

Pertama: anda harus punya blog terlebih dahulu, silahkan buat blog di blogger.com

Kedua, karena kita akan memakai template Masgus Market, maka download dulu template tersebut di sini
DOWNLOAD atau di sini DOWNLOAD 

Ketiga, setelah anda download maka ekstrak terlebih dahulu file yang berupa .rar tersebut, sehingga berubah menjadi file .xml.

Keempat upload template tersebut di blog anda (cara upload template blog).

Jika sudah selesai maka langkah selanjutnya adalah, setting tempalte Masgus Market.

Baik, untuk setting template masgus market saya akan copas langsung dari desainnya, bagaimana cara edit dan post dan lain-lain



1. Menampilkan Slide Show pada template.
  • Pilih halaman Tata Letak >Lihat ke sebelah kanan desktop.
  • Klik tambahkan gadget tepat di atas Blog Post > HTML Java Script dan pastekan kode slide show berikut ini :

<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="http://www.idblogsite.com"><img src="http://4.bp.blogspot.com/-v0qcj9oUOBY/UsFTSwR_IHI/AAAAAAAABZY/JO4VrYDoTU8/s1600/gshock_banner_2.jpg" alt="" /></a>
<a href="http://www.idblogsite.com"><img src="http://4.bp.blogspot.com/-Jwua09XKCLI/UsFTVSYZ2EI/AAAAAAAABZo/HMiQK-e5bv0/s1600/banner-(1).jpg" alt="" title="Selamat Datang di toko kami" /></a>
<a href="http://www.idblogsite.com"><img src="http://4.bp.blogspot.com/-Fq1nMvLtKJQ/UsFTUrnxoZI/AAAAAAAABZg/b6L_b-_dDkU/s1600/ban.jpg" alt="" /></a>
<a href="http://www.idblogsite.com"><img src="http://2.bp.blogspot.com/-fLTkF7H58G4/UsFTXPRRWoI/AAAAAAAABZw/ik92FhTI4ns/s1600/slide1-680x285.jpg" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>Selamat Berbelanja
</strong></div>
</div>

  • Klik Simpan dan selesai.
2. Setting data toko online seperti Rekening,Alamat dan Kontak pada Invoice EMAIL.
  • Silahkan anda pindah ke opsi Template > Edit HTML .
  • Kemudian cari data invoice email berikut ini :
simpleCart.email = &#39;masgustemplate@gmail.com&#39;;
simpleCart.checkoutTo = Email;
simpleCart.currency = IDR;
simpleCart.urlWebsite = &#39;http://masgusmarket.blogspot.com&#39;;
simpleCart.urlSuccess= &#39;http://masgusmarket.blogspot.com/p/terima-kasih.html&#39;;
simpleCart.alamatPemilik = &#39;Alamat Anda &#39;;
simpleCart.noHP = &#39;085 xxxx xxxx&#39;;
simpleCart.urlFacebook = &#39;http://www.facebook.com/pages/your facebook&#39;;
simpleCart.urlTwitter = &#39;https://twitter.com/your twitter&#39;;
simpleCart.akunbank1 = &#39;Bank A&#39;;
simpleCart.norek1 = &#39;No Rekening&#39;;
simpleCart.namarek1 = &#39;Nama Pemilik Rekening Bank A&#39;;
simpleCart.akunbank2 = &#39;Bank B&#39;;
simpleCart.norek2 = &#39;No Rekening&#39;;
simpleCart.namarek2 = &#39;Nama Pemilik Rekening Bank B&#39;;
simpleCart.akunbank3 = &#39;Bank C&#39;;
simpleCart.norek3 = &#39;No Rekening&#39;;
simpleCart.namarek3 = &#39;Nama Pemilik Rekening Bank C&#39;;
simpleCart.akunbank4 = &#39;Bank D&#39;;
simpleCart.norek4 = &#39;No Rekening&#39;;
simpleCart.namarek4 = &#39;Nama Pemilik Rekening Bank D&#39;;
simpleCart.akunbank5 = &#39;Bank E&#39;;
simpleCart.norek5 = &#39;No Rekening&#39;;
simpleCart.namarek5 = &#39;Nama Pemilik Rekening Bank D&#39;;
simpleCart.akunbank6 = &#39;Bank F&#39;;
simpleCart.norek6 = &#39;No Rekening&#39;;
simpleCart.namarek6 = &#39;Nama Pemilik Rekening Bank D&#39;;
simpleCart.urlReferrer = &#39;http://www.idblogsite.com&#39;;
simpleCart.businessName = &#39;Nama Toko Online Anda&#39;;
simpleCart.formatsmsKonfirmasi= &#39;(Nama, Email, Jumlah transfer, Bank Tujuan Transfer, Tanggal transfer)&#39;;
simpleCart.contohformatsmsKonfirmasi= &#39;Gusti Putu, masgustemplate@gmail.com, Rp 1.500.000, BCA, 16 juli 2014 &#39;;
simpleCart.catatanTambahanInvoice= &#39;(Jangan Sungkan Untuk menghubungi kami Kembali)&#39;;
Keterangan :
  1. Ganti tulisan yang saya beri warna merah sesuai dengan data toko anda.
  • Klik SIMPAN TEMPLATE.

3. Membuat Postingan di masgusmarket template.
  • Silahkan anda mebuat postingan baru dengan klik Entri baru ( New Entries ).
  • Pastekan kode berikut untuk menciptakan sistem postingan yang kompatibel dengan sistem produk lainnya.

<div class="product_image">
<a class="item_thumb zoomable" href="http://4.bp.blogspot.com/-0dwU0o7MRLo/UsDN_v20YxI/AAAAAAAABWA/1fAGSi9HrVQ/s1600/nike.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="http://4.bp.blogspot.com/-0dwU0o7MRLo/UsDN_v20YxI/AAAAAAAABWA/1fAGSi9HrVQ/s1600/nike.jpg" /></a>
<span class="item_price">RP 280,000.00</span></div>
<div class="product_describe">
<br />
<table class="ui-grid ui-gridFull prd-attributes" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 0px; color: black; font-family: Tahoma, Arial, sans-serif; font-size: 13px; height: 127px; line-height: 15px; margin-bottom: 0px; width: 100%;"><tbody>
<tr class="even" style="background-color: #fafafa;"><td class="strong" style="border: 1px solid rgb(242, 242, 242); font-weight: bold; line-height: 24px; padding: 0px 15px; vertical-align: top;"><div style="text-align: center;">
Nama</div>
</td><td style="border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;"><div id="pdtsku">
AIRWALK SNEAKERS&nbsp;</div>
</td></tr>
<tr class="odd"><th class="strong" style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); font-weight: normal; line-height: 24px; padding: 0px 15px;">Ukuran (L x W x H/ cm)</th><td style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;">Ukuran Produk</td></tr>
<tr class="even" style="background-color: #fafafa;"><th class="strong" style="border: 1px solid rgb(242, 242, 242); font-weight: normal; line-height: 24px; padding: 0px 15px;">Berat (kg)</th><td style="border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;">Berat Produk</td></tr>
<tr class="odd"><th class="strong" style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); font-weight: normal; line-height: 24px; padding: 0px 15px;">Warna</th><td style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;">Warna Produk</td></tr>
</tbody></table>
<br />
<br />
</div>

Keterangan :
  • Ganti URL gambar produk pada tulisan yang saya beri warna Biru
  • Silahkan anda edit Harga,stok dan lain-lain di bagian tabel di bawah gambar produk.
  • Jika semua sudah selesai,klik PUBLIKASIKAN.

4. Pengaturan halaman.

Silahkan anda membuat halaman terima kasih agar pada saat formulir pop-up selesai di isi oleh pembeli bisa di redirect ke halaman terima kasih. Caranya :
  • Pilih opsi page ( halaman ) 
  • klik Laman Baru > pilih Laman kosong.
  • Untuk judul silahkan isi dengan Terima Kasih.
  • Nah untuk kata-katanya sendiri bisa anda isi sesuai keinginan.
Nah itulah cara setting template toko online untuk anda yang memang tertarik memakai template karya saya ini.Sekian template toko online blospot gratis 2013 dan semoga template di atas berguna untuk anda.
Jika masih bingung dengan cara setting, editing, posting dan lain-lain, anda bisa langsung berkunjung ke blog yang desain template masgus market DI SINI. atau jika anda ingin bertanya kepada saya, silahkan tinggalkan komentar, jika bisa dijawab, sesegera mungkin akan kami balas.

Itulah cara membuat web toko online gratis di blogger.com, dengan menggunakan template masgus market, dan sebelum menulis artikel ini saya sendiri sudah mencoba membuatnya, ini hasilnya http://tokoonline2016.blogspot.com/


«
Next
Newer Post
»
Previous
Older Post