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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj82snFi-rDOHoTl__H_ZAkmWQuEaE5IMt4iLlYduvH5rK-oFpLMApsQP46e_Sk0HkvI7XHO-YwhPaRHWaQOop0sQWR_BRL72PLwJ2Q7T7cxMX4U-Z0NVJ1ZaxaQ1iMMsokOHzBMCaGXnM/s1600/gshock_banner_2.jpg" alt="" /></a>
<a href="http://www.idblogsite.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HsWWU83NxcvuTFucrFunCyEfIjhTDeZzE8SSzM8pW3X-bb2XcpMiP-UoVvVkhH3KirTMCNrpqnk0nZPhhNQoiDJ7XznniJ6sqjy4s8ibL1R2CE3OZ69Hz4mEQjISNB24CgoLpl6yEIw/s1600/banner-(1).jpg" alt="" title="Selamat Datang di toko kami" /></a>
<a href="http://www.idblogsite.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ythwDntT840ARZGvGczOD-FoAMJVM8M01vEus0i9Hv0eVnclAdLAEeZohxM4uaP0fZ6yUOUUZ1Z-8n8PSgnPR447oDPpnhhXSvA7vBfTo03cOX-DLmxjizIWPqICgMzuIo5ANqzDTyc/s1600/ban.jpg" alt="" /></a>
<a href="http://www.idblogsite.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLajer3-EYTDG6fVYxk3nlmshLbExNqHcoNY_7WEsgDTmp0oaL2ol49sAq0mlyJbz4RCtWLDR2HwxAQjqXRBx-uLjjF3M-ypvF76x4Qf5o6iMO4BhUn599Da3I59Fa4Npi99XSIFNqfo/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTqFIO0vhbw59Xo0uNqCay2b7DAPf_HyyCeaRZj5PqgQ5D2ygYziY7t8HAj16-4wvLrGKaOWLN3iqgzO8VECT3GFqliAciJcnfG1E69QT4Yb8S9mL2sGTuL2SiZaBJ1gJsS8tzc6yMdo/s1600/nike.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTqFIO0vhbw59Xo0uNqCay2b7DAPf_HyyCeaRZj5PqgQ5D2ygYziY7t8HAj16-4wvLrGKaOWLN3iqgzO8VECT3GFqliAciJcnfG1E69QT4Yb8S9mL2sGTuL2SiZaBJ1gJsS8tzc6yMdo/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/


Popular posts from this blog

Syahadah Qiro'ati

Image
Syahadah Qiroati; Penghargaan atas sebuah Kesungguhan Ini adalah sebuah catatanku saat masih kuliah dulu, tidak ada maksud untuk menyombongkan diri, tidak pula pamer terhadap gelar tertentu. Sekitar tahun 2003, saya mulai mengajar di Madrasah Diniyah Ismaliyah Seturan (Madis). Saat itu status saya masih mahasiswa S1 di UIN Sunan Kalijaga Yogyaakrta, seperti yang pernah saya tulis sebelumnya, bahwa semasa kuliah saya tinggal di Masjid Al-Jihad seturan, Catur tunggal Depok, Sleman, sebagai 'orang masjid', membantu mengajar di Madis, boleh dibilang sebagai sebuah 'kewajiban'. MADIS sendiri menurut saya sama dengan Taman Pendidikan Al-Qur'an (TPA) yang ada di Jogja pada umumnya, sebab kegiatan dan jam belajarnya pun sama, ada belajar mambaca Al-Qur'an, hafalan surat pendek, menulis huruf arab, materi-materi keislaman, mewarnai dan kegiatan-kegiatan lainnya, dan jam masuk dan pulangnya pun sama dengan TPA pada umumnya, yaitu mulai pukul 16.00 - menj
Read more

Proposal Renovasi Tempat Wudlu

Image
Contoh Proposal Renovasi Tempat Wudlu    RENOVASI PEMBANGUNAN TEMPAT WUDHU/KAMAR MANDI MASJID BAITUSSALAM Muqaddimah Masjid dengan umat Muslim merupakan satu kesatuan yang tidak dapat dipisahkan. Kemakmuran masjid dengan aktivitas ibadah kepada Allah SWT maupun mempererat ukhuwah Islamiyah merupakan suatu ciri keberhasilan umat Muslim. Masjid Baitussalam Dusun I Sidoarum mempunyai berbagai kegiatan rutin maupun insidental yang bertujuan untuk peningkatan ketaqwaan umat kepada Allah SWT, membina generasi penerus (anak-anak dan remaja), mempererat ukhuwah Islamiyah dan membantu saudara-saudara sesama muslim. Bentuk kegiatan yang telah dilakukan adalah pengajian umum rutin setiap malam Jum’at Pahing, pengajian remaja dan ibu-ibu, peringatan hari besar Islam, sosial kemasyarakatan (perawatan jenazah, bantuan sosial, dll), serta pelaksanaan Taman Pendidikan Al Qur’an. Tempat wudhu merupakan salah satu sarana utama masjid yang ditujukan untuk para jama’ah. Wudhu merupakan
Read more

Mading Remaja Masjid

Image
Mading Remaja Masjid Baitussalam mading remaja masjid Mading (Majalah Dinding) merupakan sebuah kreatifitas untuk mengekspresikan sebuah ide atau gagasan yang dituangkan lewat sebuah tulisan / gambar yang terpampang di area Mading. Dalam rangka menyambut Ramadhan 1435 H. remaja masjid Baitussalam telah menyiapkan Mading sebagai wadah para remaja untuk dapat berpartisipasi dalam mengisi Mading tersebut. Mading yang dibuat kali ini cukup unik, Misalnya gambar yang sudah umum beredar di masyarakat mengenai logo dan merk sebuah perusahaan, tulisannya diganti dengan kata-kata yang menggelitik, misalnya logo dan tulisan mie sed*p diganti menjadi bismillah setiaap mau makan. Proses penempelan materi dan pembuatan mading kali ini membutuhkan waktu sekitar 3 jam, ada sekitar 15 remaja putra dan putri turut serta dalam pembuatan mading ini, mereka terlihat cukup antusias dan bersemangat, walau ini adalah pertama kalinya mereka membuat mading di Masjid Baitussalam, tetapi has
Read more