MEMBUAT TOKO ONLINE MENGGUNAKAN BLOGSPOT

Versi 2.0 (2014)

TUTORIAL

MEMBUAT TOKO ONLINE MENGGUNAKAN BLOGSPOT

Pusat Pelatihan Internet Marketing | ISPARMO

Membuat Toko Online Gratis Menggunakan Blogspot

TUTORIAL MEMBUAT TOKO ONLINE MENGGUNAKAN BLOGSPOT

A. Alasan pemilihan Blogger / Blogspot Gratis. Dengan satu akun email Gmail bisa membuat blog sampai dengan 100 buah. Mudah di integrasikan dengan layanan milik Google yang lainnya, seperti Google Webmaster Tool dan Google Analytics. Mudah memodifikasi template / theme nya karena bisa di edit. Juga bisa menggunakan template dari eksternal Blogspot.

B. Membuat Blogger 1. Kunjungi www.blogger.com 2. Lakukan Sign In dengan account Gmail yang telah dibuat sebelumnya

3. Isikan data-data yang diminta berupa :

Pusat Pelatihan Internet Marketing | ISPARMO | + 62 812 108 3060

Hal. 2


Display name

: nama yang akan muncul saat posting artikel

Jangan lupa untuk memberikan tanda ceklist pada : I accept the Terms of Service, lalu klik tombol CONTINUE. 4. Isikan data-data Judul

: Judul blog yang akan muncuk pada bagian paling atas (header). Pengisian data ini harus mengandung Keyword hasil riset.

Alamat

: alamat / url blog. Pengisian alamat ini mungkin tidak sekali jadi (harus cobacoba) karena bisa jadi sudah diambil orang lain. Pengisian data ini harus mengandung Keyword hasil riset.


Hal. 3


Grosir Jilbab Murah maygrosirjilbab

Pilih Template sesuai selera, lalu klik tombol Buat blog! Jika alamat blog sudah dipakai orang, akan muncul peringatan seperti di bawah ini, klik OK dan cari alamat lain.

5. Jika berhasil maka akan muncul komentar : Blog Anda telah dibuat! Segera lakukan posting artikel, agar blog yang telah dibuat tidak dianggap sebagai blog spam, sehingga bisa di suspend (non aktif) sementara.


Hal. 4


Pada beberapa kasus, saat pemilik blog melakukan login ke dalam www.blogger.com, Google akan meminta kita melakukan verifikasi seperti di bawah ini :

Verifikasi bisa dilakukan dengan 2 cara, yaitu menggunakan SMS (Text Message) atau telepon (Voice Call). Agar lebih cepat, pilih Voice Call. Kita akan mendapatkan telepon otomatis yang menginformasikan 6 digit kode verifikasi.


Hal. 5

Membuat Toko Online Gratis Menggunakan Blogspot C. Membangun Toko Online Menggunakan Blogspot / Blogger Setelah membuat Blogger / Blogspot maka selanjutnya kita akan membangun sebuah Toko Online berbasis Blogspot (gratisan). Berikut adalah contohnya : http://maygrosirjilbab.blogspot.com

Secara mudahnya, Toko Online Gratis berbasis Blogspot ini sebenarnya hanya memodifikasi Template. Template ini dibuat sedemikian rupa dan semirip mungkin dengan aplikasi toko online berbasis web seperti : Prestashop, Cubecart dll. Memang fasilitas toko online Blogspot ini tidak selengkap toko online berbasis web tersebut, tapi secara tampilan tidak kalah dengan yang berbayar. Pusat Pelatihan Internet Marketing | ISPARMO | + 62 812 108 3060

Hal. 6

Membuat Toko Online Gratis Menggunakan Blogspot Berikut adalah langkah-langkah membangun Toko Online berbasis Blogspot : I. Mengganti Template 1. Download file template toko online di http://isparmo.web.id/2014/08/11/download-template-toko-online-menggunakanblogspot/

2. Buka file template yaitu, template_tokoonline-Blogspot.xml, menggunakan file editor, misalnya Notepad.

3. Lakukan select all : CTRL + A dan copy : CTRL + C 4. Buka dasboard Blogger 5. Pilih menu Template


Hal. 7


6. Lalu klik Edit HTML -> klik Proceed 7. Pada halaman Template > Edit HTML, beri ceklist pada Expand Widget Template 8. Kemudian pilih semua (select all = CTRL A) kode HTML yang ada di dalamnya, lalu hapus (delete, klik tombol DEL) 9. Kembali ke langkah 3, lakukan Copy pada kode HTML template template_tokoonline-Blogspot.xml dan Paste pada jendela Template.


Hal. 8


10. Klik Save Template 11. Akan muncul peringatan, Warning: Your new template… maka klik Delete widgets. Lalu kunjungi blog dan lihat perubahan yang terjadi.

II. Membuat Posting Produk Setelah mengganti template, maka langkah selanjutnya adalah melakukan posting produk ke dalam toko online. Langkah-langkah memposting produk : 1. Buka dashboard Blogspot, lalu klik Posts


Hal. 9


2. Pada jendela Post, klik tombol HTML

Lalu Copy Paste kode di bawah ini : <span class="item_price">Rp 1.000.000,00 dan ganti angka rupiah yang dicetak biru dengan harga produk Anda. 3. Lalu klik tombol Compose 4. Untuk menyisipkan gambar, klik tombol Image, dibawah tombol Save. Buatlah gambar produk dengan perbandingan ukuran 4 : 3 (4 lebar, 3 tinggi).

5. Jika gambar diambil dari hardisk komputer, klik tombol Upload -> Choose files. Lalu tunggu proses upload. Sebaiknya file gambar tidak lebih dari 1 MB agar tidak terlalu berat saat uploading dan proses loading web toko online. Pusat Pelatihan Internet Marketing | ISPARMO | + 62 812 108 3060

Hal. 10

Membuat Toko Online Gratis Menggunakan Blogspot 6. Setelah gambar diupload, klik pada gambar, lalu klik Add selected

7. Pada jendela Post, secara otomatis akan menampilkan gambar yang telah diupload tadi. Tambahkan deskripsi produk sejelas mungkin. 8. Setiap produk sebaiknya diberikan Kategori (Label) untuk mengelompokkan Produk. Hal ini untuk memudahkan konsumen mencari produk berdasarkan kategori. Misalnya, kategori Produk Muslimah terdiri atas Jilbab dan Pasmina. Menu untuk memberi Label ini ada di sebelah kanan jendela posting. Isilah kolam label ini sesuai kategori / pengelompokkan produk.

Lalu klik Done


Hal. 11


9. Setelah posting produk selesai, klik Publish. Lalu cek perubahan yang terjadi.


Hal. 12

Membuat Toko Online Gratis Menggunakan Blogspot III. Membuat Form Order Form order berisi data-data pembeli untuk keperluan pengiriman barang. Menu form order ada pada menu Page (di bawah header) dan di bawah gambar produk.

Jika menu atau tombol tersebut di klik maka akan terbuka Page baru yang berisi perintah untuk mengisi data-data pembeli. Data dari Form Order ini akan tersimpan secara online di server Google (Google Drive), sebab form ini dibuat menggunakan Google Docs. Data order ini disimpan dalam bentuk Spreadsheet (Ms Excel).


Hal. 13

Membuat Toko Online Gratis Menggunakan Blogspot Bentuk Page Form Order :

Untuk membuat Form Order ini ada 2 tahapan : a) Membuat Form Online di Google Docs b) Membuat Page FormOrder dir Blogspot A. Membuat Form Online di Google Docs 1. Buka http://docs.google.com 2. Login gunakan user dan password Gmail 3. Klik menu CREATE, klik Form


Hal. 14

Membuat Toko Online Gratis Menggunakan Blogspot 4. Pada jendela Form, isikan judul Form pada isian Untitled form, misalnya : Form Pemesanan.

5. Untuk mengisi label Form, misalnya, label pertama adalah kolom Nama Lengkap. Arahkan mouse pada Sample Question , klik pada gambar pensil di sebelah kanan (perintah untuk Edit) dan isilah : Question Title : nama label, misalnya Nama Lengkap Help Text

: berisi petunjuk cara pengisian. Bisa dikosongkan

Question Type: pilih format isian, misalnya Text, isinya hanya 1 baris Beri ceklist pada Make this required question, jika data ini wajib di isi. Lalu klik Done. 6. Untuk label form berikutnya, misalnya Barang yang dipesan Arahkan mouse pada Sample Question 2, klik pada gambar pensil di sebelah kanan (perintah untuk Edit) dan isilah : Question Title : nama label, misalnya Barang yang dipesan, jumlah Help Text

: berisi petunjuk cara pengisian.

Question Type: pilih format isian, misalnya Paragraph text, isinya bisa lebih dari 1 baris Beri ceklist pada Make this required question, jika data ini wajib di isi. Lalu klik Done.


Hal. 15


7. Untuk menambahkan label form berikutnya, arahkan mouse pada label form yang terbawah, lalu klik gambar persegi empat dobel (perintah untuk Duplicate). Lalu lakukan editing seperti langkah 5 dan 6 di atas.

8. Setelah form lengkap, klik tombol Save (pojok kanan atas)


Hal. 16

Membuat Toko Online Gratis Menggunakan Blogspot 9. Selanjutnya membuat Konfirmasi. Yaitu, komentar atau ucapan yang muncul setalah konsumen mengisi Form Order dan meng-klik tombol Submit maka akan muncul halaman konfirmasi, misalnya seperti ini :

Caranya pada jendela Form, klik menu More actions, klik Edit confirmation

Kemudian ketiklah kalimat ucapan terima kasih dan informasi lain yang dibutuhkan untuk proses order berikutnya.


Hal. 17

Membuat Toko Online Gratis Menggunakan Blogspot B. Membuat Page Form Order di Blogspot Langkah berikutnya adalah menempelkan Form Order Google Docs ini ke Toko Online Blogspot yang telah kita buat. Langkahnya : 1. Pada jendela Form, klik menu More actions, lalul klik Embed. 2. Lakukan Copy sebaris kode HTML yang ada dalam kotak Embed.

3. Buka dasboard Blogspot, klik menu Pages

4. Klik menu New page, lalu klik Blank page

5. Pada halaman editor Page, klik tombol HTML, paste kode HTML dari kotak Embed pada langkah 2.


Hal. 18


6. Lalu klik Publish. 7. Lalu kunjungi Toko Online lalu klik menu (page Form Order), lihat perubahan yang terjadi

C. Memodifikasi Tombol ORDER

Tombol Order pada template Toko Online jika di klik akan mengarah pada halaman Order milik saya yaitu http://keripikistana.blogspot.com/p/formorder.html. Untuk mengubahnya agar mengarah ke halaman / page Toko Online sendiri berikut langkahnya : 1. Login ke Blogger dan masuk ke dasboard Blogspot 2. Klik menu Template -> klik Edit HTML -> klik Proceed 3. Pada jandela Template -> Edit HTML, beri tanda ceklist pada Expand Widget Template. 4. Lakukan pencarian kode HTML : ‘order’ Caranya dengan klik tombol F3 lalu tekan ENTER. Komputer akan mengarahkan ke kode yang mengandung kata ‘order’ tersebut. Kode lengkapnya adalah sebagai berikut : Pusat Pelatihan Internet Marketing | ISPARMO | + 62 812 108 3060

Hal. 19


Pada kode HTML tersebut terdapat kode yang merupakan alamat URL page (Form Order) toko online (pada contoh ini diberi warna merah bata). Alamat ini harus diganti dengan alamat page yang sudah dibuat pada langkah B. Membuat Page Form Order di Blogspot. Untuk mengetahui alamat URL page Form Order, kunjungi Toko Online dan klik menu Form Order. Copy URL yang ada di address bar internet browser.

Kemudian ganti URL yang ada di halaman kode HTML di atas dengan URL page Form Order milik sendiri ini. Pusat Pelatihan Internet Marketing | ISPARMO | + 62 812 108 3060

Hal. 20


D. Memodifikasi Menu Kita akan melakukan modifikasi menu-menu yang ada di bawah Home dan Form Order, sebaut saja MENU PAGE.

Misalnya, menu-menu page tersebut akan diganti menjadi Home, Produk Muslimah, Produk Muslim, Testimoni.

Maka langkahnya : 1. Login ke Blogger dan masuk ke dasboard Blogspot 2. Klik menu Template -> klik Edit HTML -> klik Proceed 3. Pada jandela Template -> Edit HTML, beri tanda ceklist pada Expand Widget Template. 4. Cari kode HTML : Menu 1. Caranya, tekan tombol F3, masukkan ke kolom pencarian : Menu 1

5. Gantilah kalimat yang ada di antara tanda > < Misalnya, >Menu 1< dengan >Produk Muslimah< 6. Ganti juga menu-menu page yang lain dan sesuaikan dengan produk Anda. Pusat Pelatihan Internet Marketing | ISPARMO | + 62 812 108 3060

Hal. 21


7. Menu-menu page yang telah diganti pada langkah seblumnya masih dalam kondisi tidak aktif. Artinya saat menu tersebut diklik belum mengarahkan ke Kategori Produk yang dimaksud. Untuk mengaktifkan menu yang telah dibuat, syaratnya, saat membuat posting produk sudah diberi Label, misalnya, saya mempunyai 3 kategori :

Jadi ketika saya klik menu Produk Muslimah -> Jilbab, hanya akan menampilkan produk dengan Label : Jilbab.

Kalau kita klik menu (di side bar) PRODUK -> Jilbab, maka alamat yang akan muncul di internet browser adalah : http://maygrosirjilbab.blogspot.com/search/label/Jilbab Pusat Pelatihan Internet Marketing | ISPARMO | + 62 812 108 3060

Hal. 22


Alamat inilah yang kita masukkan ke menu Edit HTML pada langkah ke 6 : Lakukan copy dan paste pada baris kode HTML :
Jilbab

menjadi :

Jilbab

8. Lakukan hal yang serupa pada menu-menu yang lain, dan sesuaikan dengan alamat Label atau Kategori yang sesuai.


Hal. 23

Membuat Toko Online Gratis Menggunakan Blogspot E. Mengoptimasi Toko Online Optimasi bertujuan agar web/blog toko online bisa berada di halaman 1 Google. Istilah kerennya adalah SEO (Search Engine Optimization). Pada Toko Online yang telah kita buat ini, langkah untuk melakukan optimasi ada 2 : I. Memasukkan keyword / kata kunci II. Mempromokan Toko Online Mari kita mulai satu persatu : I.

Memasukkan Keyword / Kata Kunci

Keyword yang dimasukkan harus berdasarkan riset yang dilakukan menggunakan Google Keywords Tools dan atau Google Trends. Cara memasukkan keyword ini ada 2 cara, pertama melalui menu Setting -> Basic, kedua, melalui Metatag pada kode HTML penyusun toko online. Cara pertama, melalui menu Settings : 1. Login ke toko online melalui www.blogger.com 2. Masukkan username dan password Gmail 3. Pada dashboard, klik Settings -> Basic 4. Isilah pada bagian Title dan Description, klik Edit, lalu isi dengan kalimat atau kata yang mengandung keyword :

5. Lalu klik Save changes


Hal. 24

Membuat Toko Online Gratis Menggunakan Blogspot Cara kedua, memasukkan Metatag pada kode HTML : Metatag adalah salah satu komponen dalam sebuah website atau blog yang mempunyai peran yang penting dalam teknik OPTIMASI / SEO. Metatag ini berada di dalam rangkaian kode HTML. 1. Login ke toko online melalui www.blogger.com 2. Masukkan username dan password Gmail 3. Pada dashboard, klik Template -> Edit HTML -> Proceed

4. Gantilah (Replace) kode HTML yang ditandai dengan kotak berwarna merah bata di atas, yaitu kode HTML mulai dari :

hingga :

<meta content='Indonesia' name='geo.placename'/> ganti dengan :


Hal. 25

Membuat Toko Online Gratis Menggunakan Blogspot <meta content='Kalimat yang mengandung KATA KUNCI / KEYWORD' name='description'/> <meta content='keyword1, keyword2....' name='keywords'/> <data:blog.pageName/> | <data:blog.title/> <data:blog.pageTitle/> Keyword1 | Keyword2 | Keyword3...

Keterangan : Ganti kalimat/kata yang berwarna ungu dengan data yang disesuaikan dengan toko online masing-masing.

II. Mempromokan Toko Online Toko online (alamat web / URL nya) yang telah kita buat harus dipromokan ke media media online lain, seperti Social Media (misal, Facebook, Twitter), Website lain, Forum, Milist dll. Caranya : Promo ke social media dengan mencantumkan alamat Toko Online di bagian signature comment, misalnya pada Facebook :

Jangan pernah melakukan promo dengan Hard Sale, artinya melakukan update status yang isinya hanya promo barang dagangan. Sebab jika ini dilakukan, Friends (teman-teman) FB bisa mem-block-ing akun kita. Hal ini juga bisa dilakukan saat mengirim email, dan memberikan komentar di milist atau forum.


Hal. 26

Membuat Toko Online Gratis Menggunakan Blogspot Pada website / blog lain dengan memberikan komentar yang positif,dan mengisi data-data komentar dengan keywords dan alamat toko online. Usahakan cari website atau yang sejenis dengan barang yang kita jual di toko online kita :

Demikian pembahasan Membangun Toko Online (Gratisan) selangkah demi selangkah. Untuk materi lebih lanjut mengenai SEO Toko Online ini (teknik agar masuk halaman 1 Google) silahkan ikuti workshop-workshop SEO bersama saya. Semoga bermanfaat.

---------------------- # # # # ---------------------

Untuk informasi dan jadwal Pelatihan Internet Marketing : http://isparmo.web.id/info-pelatihan/

ISPARMO Hp. 0812 108 3060, 021-989 07652 Email : [email protected] FB : www.facebook.com/isparmo PIN BB : 75FE2721


Hal. 27

MEMBUAT TOKO ONLINE MENGGUNAKAN BLOGSPOT

Recommend Documents