Masukkan Email Anda untuk...
GRATIS Update Konten Ekslusif!!

Tutorial Cara Membuat Toko Online di Blogger Gratis, Super Lengkap!

Diposkan pada 28 October 2012 oleh Syamsul Alam. Print artikel atau beri komentar.

Meski sudah saya tunjukkan kemarin dengan cukup jelas kelemahan membuat toko online di blogger, tetap saja ada yang memaksa saya untuk membuat tutorial cara membuat toko online di blogger.

Okay deh, karena anda memaksa…

Membuat toko online di Blogger itu cukup mudah, tidak perlu pakai plugins, anda hanya perlu meng-install tema (template) blogger.

Proses listing produk juga relatif mudah. Tentu tidak sesimpel proses listing produk di WooCommerce yang super simpel, tapi tetap cukup mudah karena yang diperlukan hanyalah memasukkan detail produk dalam template HTML yang telah disediakan.

Tanpa pakai banyak bicara, langsung saja deh…

Tutorial Cara Membuat Toko Online di Blogger

Untuk proses pembuatan toko online di blogger atau blogspot ini, akan saya bagi dalam 3 bagian, pertama adalah proses peng-install-an template blogger (blogspot), kedua adalah proses listing produk (menampilkan produk dan detilnya seperti harga dan lain-lain ke dalam toko online), dan ketiga adalah proses sistem pembayaran.

Persiapan: Buat Google Account dan Login Blogger.com

Tentu saja anda harus login dengan membuat akun Blogger terlebih dahulu jika anda ingin membuat toko online di blogger!

Anda bisa dengan mudah membuat akun di Blogger dengan mengikuti video tutorial ini: Video Cara Membuat Akun di Google Account.

Setelahnya, buat blog di Blogger. Lihat tutorialnya di sini: Cara Membuat Blog di Blogger.

Sudah? Lanjut ke langkah selanjutnya…

#1 Meng-Install Template Toko Online Blogger

Anda bisa mencari template blogger gratis yang memang dikhususkan untuk toko online. Di tahap ini, saya asumsikan blog anda sudah jadi dan siap ubah menjadi toko online.

Note: Tutorial ini menggunakan setting bahasa inggris karena saya rasa bahasa Indonesia terdengar aneh untuk tutorial.

Sekarang di Dashboard Blogger anda, klik nama blog anda yang baru saja anda buat.

cara membuat toko online di blogger klik nama blog picture

Setelahnya, lihat bagian bawah, di sidebar. Cari tulisan Template dengan ikon kuas cat. *Maaf tidak ada panah, saya lupa nambahin.

cara membuat toko online di blogger template picture

Kemudian, klik di bagian kanan atas, Backup/Restore.

cara membuat toko online backup and restore picture

Sampai tahap ini, anda akan melakukan proses upload blogger template. Nah, tentu anda harus punya template toko online nya dulu donk…

Jika anda belum punya template toko online blogger yang bagus, kenalan saya, Rifki Aria Gumelar telah mendesain sebuah template toko online yang cantik dan ciamik, dengan fitur yang cukup lengkap dan canggih untuk kategori toko online blogspot gratisan.

Anda bisa download di website nya Om Agus Ramadhani (yang membantu mempopulerkan theme ini) secara langsung: Blogger Store v2

cara membuat toko online di blogger store v2 picture

Atau download di sini: Blogger Store v2 Mirror (server saya).

Setelah itu, ekstrak file ZIP yang baru saja anda download, cari file dengan ekstensi XML (bloggerstore-v2.xml). *Jangan lupa baca read more nya.

Kembali ke dashboard blogger anda, jendela seperti gambar di bawah akan terbuka setelah anda klik Backup/Restore.

cara membuat toko online dengan blogger instal theme picture

Klik Browse dan cari file bernama bloggerstore-v2.xml tersebut, klik Upload.

Jika anda melakukannya dengan benar, anda akan melihat template anda sudah terganti dengan template toko online baru anda yang ciamik. Klik View Site di bagian atas untuk melihat blog (toko online) baru anda.

#2 Menambahkan Produk ke Toko Online Blogger Anda

Okay, template sudah ter-install. Tapi akan terasa ‘hampa’ alias kosongan karena memang belum kita isi apa-apa…

Sekarang waktunya untuk menambahkan produk di toko online Blogger baru kita.

Beruntung bagi anda, sangat mudah untuk menambahkan produk di toko online ini. Klik saja tombol New Post di dashboard anda.

cara membuat toko online di blogger klik add post picture

Di halaman Post ini, ganti format penulisan ke HTML.

Cara Membuat Toko Online di Blogger html picture

Kemudian tambahkan produk dalam template HTML yang sudah di sediakan.

Jika anda malas melihat file TEMPLATE POST.txt yang ada di file ZIP yang baru saja anda download, salin saja kode di bawah ini sebagai template HTML produk baru anda.

<div class="item_image">
<img border="0" class="item_thumb" src="image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Descriptions... </div>

Kemudian masukkan data mengenai produk anda sesuai tempat yang seharusnya.

Contoh:

<div class="item_image">
<img border="0" class="item_thumb" src="link ke gambar anda "/>
<span class="item_price">$10.00</span>
</div>
<div class="item_Description">
Tas punggung pink cantik dengan kualitas terbaik, simple dan plain, cocok untuk tas sekolah anak, bla-bla-bla...</div>

Ubah “link ke gambar anda” dengan link beneran yang mengarah ke gambar produk anda. Upload gambar ke Blogger seperti biasa dan salin URL gambar anda ke bagian ini.

“$10.00″ ubah dengan harga produk anda.

“Tas punggung pink cantik dengan kualitas terbaik, simple dan plain, cocok untuk tas sekolah anak, bla-bla-bla…” ubah dengan deskripsi mengenai produk anda.

Selesai? Kini berikan Label, label “Backpack” saya gunakan dalam contoh kasus saya. Kemudian klik “Publish“!

Jika semuanya berjalan lancar, seharusnya anda akan melihat hal yang kurang lebih seperti ini.

cara membuat toko online di blogger final picture

Hm… terlihat agak sepi yah…

Tentu saja, karena masih satu produk yang ditambahkan ke toko online anda. Anda harus tambahkan lebih banyak produk lagi agar toko online anda tampak lebih bagus.

cara membuat toko online di blogger real final picture

Hm… jauh lebih baik.

Saya serahkan proses kustomisasi sepenuhnya pada anda. Ini alasan kenapa saya malas berurusan dengan blogger lagi. Sangat-sangat repot dan tangan harus kotor dengan kode-kode yang saya tidak mengerti. Hahahahaha….

#3 Proses Pembayaran

Ada kelemahan dari toko online Blogger, pertama adalah mata uang tergantung dari mata uang yang didukung oleh PayPal. Benar, toko online kita di atas menggunakan PayPal sebagai proses pembayaran. Yang artinya tidak support mata uang rupiah untuk sementara ini.

Bisakah jika kita ingin menjual produk dengan mata uang rupiah? Bisa. Tapi tak ada proses checkout untuk anda. Dan setahu saya, konsekuensinya adalah keranjang belanja di atas kanan itu bakalan tak ada gunanya.

Proses order dilakukan secara manual melalui transfer bank, beri tahu bagaimana cara agar pengunjung anda bisa melakukan order terhadap produk anda. Misal order melalui email atau SMS.

Untuk ide proses pembayaran anda bisa baca post saya yang ini atau lihat video saya dimana saya menunjukkan pada anda bagaimana saya membuat informasi pemesanan yang sangat jelas di sidebar toko online saya: Video Tips & Trik Toko Online Professional.

Untuk proses pengaturan jika anda ingin menggunakan fasilitas pembayaran melalui PayPal, silakan merujuk ke dokumentasi dari mas Rifki Aria Gumelar di blognya sendiri: http://javatemplates.com/blog/installing-and-customize-blogger-store-v2/

Dan saya rasa, cukup post ini… Saya yakin sekarang anda sudah tahu cara langkah demi langkah membuat toko online di Blogger.

Jika anda ada pertanyaan mengenai hal ini, jangan tanya saya. Saya tidak tahu…

Saya hanya menulis tutorial ini dan jujur saya tidak tahu banyak mengenai kustomisasi situs Blogger. Saya lebih nyaman menggunakan WordPress dan WooCommerce untuk membuat toko online.

Jika anda ingin membuat toko online yang tanpa repot, link di atas akan membawa anda ke e-Course gratis dari saya yang akan memandu anda bagaimana cara membuat toko online profesional menggunakan WordPress.

Sepuluh video gratis tentang hampir semua yang anda perlukan untuk membangun toko online profesional anda menunggu anda di sana… Serius, klik di sini: http://www.syamsulalam.net/ecourse/toko-online

Dan… akhirnya terima kasih karena sudah membaca hingga sini.

Jika anda suka dengan tutorial ini, atau anda berpikir bahwa keluarga, kenalan, atau teman anda mungkin mendapat manfaat dari post ini, beri tahu saya dengan me-LIKE halaman ini dengan tombol di samping dan di bawah.

Saya akan sangat menghargainya.

Seperti biasa, salam pintar!

Print Friendly

Terima kasih karena sudah mampir di blog ini. Saya suka anda karena anda telah mengunjungi blog ini! Dan jika karena suatu alasan anda juga suka dengan saya (atau blog saya), anda dapat memberi tahu saya dengan meng-klik tombol "LIKE" di samping... Thanks!

Tentang

Saya Syamsul Alam. Blogger, internet marketer, dan pelajar jadi satu. Seperti yang lain, saya ingin terkenal, jadi rockstar. Tapi saya tidak punya bakat jadi rockstar. Untuk itulah saya menulis, biar terkenal (bercanda). Anda bisa menemui saya di Facebook, Google+, atau Twitter saya.

Suka Artikel ini? Dapatkan Update GRATIS via Email!

*Masukkan email anda di form di atas. Masukkan CAPTCHA agar saya tahu anda bukan robot. Dan ingat untuk cek inbox anda untuk verifikasi. :D

Suka Video Tutorial Kami? Dapatkan Update Video Baru GRATIS via Email!!

Masukkan Email Anda

*Masukkan email anda di form di atas. Masukkan CAPTCHA agar saya tahu anda bukan robot. Dan ingat untuk cek inbox anda untuk verifikasi. :D

Tags: ,

45 Komentar untuk “Tutorial Cara Membuat Toko Online di Blogger Gratis, Super Lengkap!” Suka dengan Post ini? Ada Pertanyaan? Ayo Komentar!

*Ada kejutan SUPER menarik untuk anda yang baru PERTAMA KALI komentar di blog ini! Komentar sekarang juga dan anda akan dapatkan kejutannya SEGERA setelah anda selesai berkomentar...

  1. Bung Sanjaya October 28, 2012 at 4:10 PM #

    wah mantap mas tutorialnya,,,

    • Syamsul Alam October 28, 2012 at 5:39 PM #

      thanks mas Sanjaya.

      Salam senyum :D

      • M Jamil Rahman December 4, 2012 at 10:11 PM #

        maksih ya mas atas pembahasanya. dikit2 sya ngerti cara kerjanya.

      • kie fadila June 26, 2013 at 9:14 PM #

        mas kenapa ya slide Featured product web saya tidak muncul? padahal saya sudah mengaktifkan slider nya? mohon di bantu ya mas…

  2. Bimakuru November 1, 2012 at 2:13 PM #

    makasih sharing tipsnya om…
    saya masih binggun mau jualan apa nich :p

    • Syamsul Alam November 4, 2012 at 11:46 AM #

      Saya bakal bikin post nya deh gimana cara nentuin produk untuk dijual di toko online. :D Stay tune!

  3. Riko November 10, 2012 at 7:01 PM #

    permisi om, ane udah upload gambar produknya ke blogger, dan kopi linknya ke tempatnya seperti diatas
    tapi gambarnya koq tidak menyesuaikan ya ??
    mohon pencerahannya om

    • Syamsul Alam November 11, 2012 at 7:55 AM #

      Saya kan sudah bilang untuk tidak tanya saya. Hahaha… saya tidak tahu cara bikin toko online di Blogger, ini tutorial ada cuman biar sekedar ada. :D

  4. Sawid Sutisna November 29, 2012 at 12:11 AM #

    Tutorialnya mantap dan luar biasa mas,baru kali ini saya temukan tutorial gratisan benar benar fowerful,dari gratisanya aja kita sudah bisa membuat toko online, saya rencana mau yang premium biar lebih mantap lagi, untuk transfernya mohon no.rekeningnya.

    • Syamsul Alam November 29, 2012 at 4:41 AM #

      Eits, jangan transfer apa-apa dulu ke saya, produk masih belum jadi. Silakan tunggu di waiting list dulu. :D

  5. ismet kafozos December 2, 2012 at 3:41 PM #

    Assalamualaikum mas bro, gmn bisa bantu saya ngga bikin blog gratis lengkap dengan produk perusahaan ukm saya, saya belum punya website sebenarnya… bisa bantu ngga mas bro,.. masih gelap soalnya dari tutorial tadi… trims

    • Syamsul Alam December 2, 2012 at 6:04 PM #

      walaikumsalam mas bro, saya ga bisa bantu kalau dengan blogspot atau blogger, bukan keahlian saya. Coba deh lihat tutorial saya yang http://www.syamsulalam.net/ecourse/toko-online dimana saya bicara tentang cara bikin toko online untuk naruh produk perusahaan ukm mas ismet. Good luck yah… :D

  6. Khaeruddin December 2, 2012 at 10:55 PM #

    mantap nich tp masih bingung ngisi menunya,biasa pake wordpress,blm bisa pake blogspot,ijin nyimak y buat belajar

    • Syamsul Alam December 3, 2012 at 6:00 AM #

      Justru malah bagus kan kalau pakai WordPress :D Malah lebih gampang dan powerful.

  7. muhd akbar December 10, 2012 at 1:41 PM #

    tema recommended untuk yang ingin membuat toko online lewat blog gratisan, jadi hemat biaya.
    tapi sayangnya untuk setiap postingan baru harus secara HTML, jadi sulit juga buat pemula. Namun, dari semuanya ini sangat membantu. Terima kasih!

  8. hyden06 December 16, 2012 at 3:05 PM #

    Wah ini sudah komplit Gan…..jadi pengen buat nih…..karena melihat tutorialnya yg detail….
    terima kasih Gan….

  9. kaos batik December 18, 2012 at 6:38 PM #

    Berkat tutorial Agan…..Kini Ane udah bisa buat toko online dengan blogspot…….meskipun masih terlihat kurang bagus karena ane masih pemula….tapi Ane akan segera mempelajari cara membuat toko online dengan WP…biar lebih powerful…..
    terima kasih

  10. yufik December 24, 2012 at 11:44 AM #

    saya juga masih kesulitan untuk membuat pembayaran secara instan di toko online demoyangshop.com milik saya rencananya sih agar bisa menggunakan bank lokal. padahal sudah banyak bank lokal yang sudah menggunakan internet banking.
    awalnya mau gabungin PHP dengan blogspot, tapi masih juga kesulitan.
    salam kenal gan.

  11. madu hutan Asli January 7, 2013 at 5:26 PM #

    thanks gan, ane uda buat toko online ini, pesan yaaa gan

  12. siti January 16, 2013 at 2:31 PM #

    mantep gan tutorialnya
    kebetulan lagi mau bikin & mau nyoba pake blogspot dulu sebelum pake wp :)

  13. achxin January 24, 2013 at 6:49 PM #

    mas syamsul,aku mau nanya kalo toko online sama dreamwever hubungannya apa?bisa gak buat toko online lewat dreamwever,.?kalo bisa mohon segera tutorialnya ya?terimakasih,semoga Tuhan membalas semua kebaikan anda,..

    • Syamsul Alam January 25, 2013 at 2:39 AM #

      Dreamweaver setahu saya adalah software untuk bikin situs HTML. Mungkin bisa untuk bikin toko online tapi setahu saya akan sangat sulit.

      Untuk para pemula paling gampang ya menggunakan CMS seperti wordpress, tinggal klik-klik-klik…

  14. Shofia January 28, 2013 at 3:13 AM #

    Tutorial yang singkat, padat, dan jelas! :D
    Sebenarnya, saya sering lihat Template blogger store ini. Bahkan, sejak awal dirilis dulu. Tapi, buat saya, sepertinya template Toko Online blogger dengan sistem pembayaran PayPal kurang cocok untuk blogger dan pengusaha Toko Online di Indonesia. Karena, sistem pembayarannya yang masih menggunakan Dollar Paypal, tentunya tidak semua orang Indo mempunyainya. Kalaulah punya, yang verified amat sangat sedikit.

    Uniknya, ada seorang masterweb di luar negeri sono, yang saya lupa namanya, yang mengganti sistem PayPal diatas, dengan sistem Email Order. Tapi lagi-lagi, kelemahannya adalah pembeli wajib mengingat produk yang mau dibeli, dan mencantumkannya dalam message. Yah, seperti kirim email biasa gitu lah.

    Akhirnya, saya sendiri-pun tidak jadi menggunakan template toko Online ini untuk blogger. Dan, Alhamdulillah, baru bulan ini ane nemu Template Toko Online blogger yang paling cocok buat orang Indo. Saya sudah memakainya, dan benar-benar mudah. Template ini bikinan maskolis.com. Proses belanja sama persis dengan BloggerStore, tinggal add to cart, beli dst. Setelah itu tinggal klik checkout, dan akan muncul Pop-Up pembayaran yang berakhir dengan ucapan terimakasih.
    Uniknya, template ini sudah lengkap dengan AUTO REPLY dan SHOPPING RESUME. So, pembeli akan secara otomatis dapat email mengenai barang belanjaan. Dan web admin otomatis dan email yang berisi Notifikasi pembelian. Keren dah.. Mungkin, bisa juga dipasang disini, mengenai Tutorial Toko Online Blogger 2013! hehehe…sorry kepanjangan.

    • Syamsul Alam January 28, 2013 at 5:58 PM #

      LIKE This… bakal saya update klo saya ada waktu. Thanks!

  15. imam tohari February 3, 2013 at 7:42 PM #

    trim gan ternyata agan baik hati telah memberi ilmu yang mudah dimengerti.

  16. anya February 15, 2013 at 11:34 AM #

    Udah jadi udah di Up load templatenya… tapi ganti tulisan procduct categorinya dan sample page itu gimana ya?

  17. Kangdoel February 25, 2013 at 5:25 AM #

    Tutorialnya cukup lengkap gan. Jadi menambah referensi saya untuk membuat toko online di blogspot. Saya memang sedang membuat toko online menggunakan blogspot, karena penasaran beberapa temen blogger saya menggunakannya dan lumayan menghasilkan.

  18. Indo Fashion Import February 28, 2013 at 10:31 PM #

    nice info mas bro..
    semoga dapat membantu saudara” kita yang masih kebingungan untuk membuat toko online dengan blogspot..

  19. fendy February 28, 2013 at 11:15 PM #

    mas knapa woocommerse saya terapkajm di web saya ga bisa?gmana cara menerapkanya dgn benar?padahal saya mengikuti langkat video dgn bnar.tlg bls

  20. wildanrahmatullah March 8, 2013 at 11:43 AM #

    Maksih banyak mas

  21. tokoonlinewj27 March 15, 2013 at 5:16 PM #

    tks infonya, sangat ispiratif, kl template toko saya diganti dengan template baru, apa bisa menghilangkan fitur-fitur seperti facebook, dll.

  22. Sepatu Murah March 18, 2013 at 10:14 AM #

    Bos, terimakasih ats infonya, saya mau tanya kalau mau pasang lis produk blog dalam pos gimana caranya ya?terimakasih

  23. Angga Nugraha April 10, 2013 at 2:45 PM #

    Keren mas samsul terus berkereasi. salam penggemar mas !!
    kalau download tamplate nya di mana ya ?

  24. Muhammad Unais April 17, 2013 at 6:05 PM #

    Mas, saya mo tanya. Seandainya kita beli domain langsung di wordpress.com yang harganya 18 dollar, itu tersedia menu plugin gak?

    • Syamsul Alam April 19, 2013 at 11:12 AM #

      tidak. untuk kostumisasi tidak bisa dengan wordpress.com

  25. kursus web April 27, 2013 at 11:52 PM #

    Pakai widget apa yang support metode bayar transfer bank? makasih share ilmunya mas.

  26. Android Indonesia May 6, 2013 at 11:39 AM #

    Lagi pas tutornya, saya lagi mencoba untuk membagun toko online. Terimakasih sharingnya mas.

  27. refan May 15, 2013 at 9:51 PM #

    mas,,mau tanya nih… kok pas saya coba posting baru di blog pake template ini,pas saya preview kenapa gambarnya ngga keluar terus ya? broken gitu gambarnya. Mohon pencerahannya mas.. Thx..

  28. Toko Buku Motivasi May 23, 2013 at 8:05 PM #

    Mantap. Tutorial yang lengkap.

    Btw, ae juga rekomendasikan untuk cek webitenya mas kolis.

    Template toko online nya keren-keren.

  29. Aldric July 7, 2013 at 9:47 PM #

    Sangat membantu mas ,tp masih bingung maklum orang gunung yang ingin maju,salut deh buat mas syamsul alam nirwana.

  30. tio July 15, 2013 at 4:49 PM #

    Salam kenal mas Syamsul Alam, ijin download templatenya. lg belajar buat toko online dari yg sederhana dulu. makasih banyak mas share ilmunya. moga makin sukses.

    salam

  31. mega July 25, 2013 at 8:17 AM #

    gan kalo buat oL shop pake wordpress gimana caranya?

Trackbacks/Pingbacks

  1. Kelemahan Membuat Toko Online di Blogger (Blogspot)? - October 29, 2012

    [...] Dan meskipun saya harus setuju bahwa dengan blogger anda tidak harus membayar biaya domain dan hosting tahunan, anda juga harus tahu bahwa dengan WordPress (plus WooCommerce + WooThemes), segala hal bisa menjadi sangat mudah. Update: Meskipun saya tidak terlalu suka untuk membuat toko online di Blogger, saya tetap buatkan tutorialnya untuk anda yang ingin punya toko online gratisan. Klik di sini: Cara Membuat Toko Online di Blogger » [...]

  2. Ingin Belajar Cara Membuat Toko Online lewat Video? - October 29, 2012

    [...] Untuk anda yang lebih suka toko online gratisan di blogger yang merepotkan, ini tutorialnya: Tutorial Cara Membuat Toko Online di Blogger. var dd_offset_from_content = 55; var dd_top_offset_from_content = 50;Karena Anda Menikmati Post [...]

  3. Cara Bisnis Online (Tiga Trik Ampuh Meng-Online kan Bisnis Anda) - November 22, 2012

    [...] Jika anda sudah punya produk sendiri, dan ingin menggunakan blogger sebagai tempat untuk membuat toko online anda, atau menggunakannya sebagai sarana mempromosikan bisnis online anda, saya sudah buatkan post tutorial untuk anda di sini: Cara Membuat Toko Online di Blogger [...]

X

BARU: Cara Saya Rank Halaman Satu di Google! Klik di sini »

Print Friendly
Tak ada tags untuk post ini.
¤
More in Tutorial
Cara Menambahkan Rupiah di WooCommerce (IDR – Rp – Mata Uang Indonesia)
Close