MEMBUAT TOKO ONLINE MENGGUNAKAN BLOGSPOT

Transkripsi

1 Versi 2.0 (2014) TUTORIAL MEMBUAT TOKO ONLINE MENGGUNAKAN BLOGSPOT Pusat Pelatihan Internet Marketing ISPARMO

2 TUTORIAL MEMBUAT TOKO ONLINE MENGGUNAKAN BLOGSPOT A. Alasan pemilihan Blogger / Blogspot Gratis. Dengan satu akun 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 2. Lakukan Sign In dengan account Gmail yang telah dibuat sebelumnya 3. Isikan data-data yang diminta berupa : Pusat Pelatihan Internet Marketing ISPARMO Hal. 2

3 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 Alamat : Judul blog yang akan muncuk pada bagian paling atas (header). Pengisian data ini harus mengandung Keyword hasil riset. : 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. Pusat Pelatihan Internet Marketing ISPARMO Hal. 3

4 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. Pusat Pelatihan Internet Marketing ISPARMO Hal. 4

5 Pada beberapa kasus, saat pemilik blog melakukan login ke dalam 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. Pusat Pelatihan Internet Marketing ISPARMO Hal. 5

6 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 : 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 Hal. 6

7 Berikut adalah langkah-langkah membangun Toko Online berbasis Blogspot : I. Mengganti Template 1. Download file template toko online di 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 Pusat Pelatihan Internet Marketing ISPARMO Hal. 7

8 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. Pusat Pelatihan Internet Marketing ISPARMO Hal. 8

9 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 Pusat Pelatihan Internet Marketing ISPARMO Hal. 9

10 2. Pada jendela Post, klik tombol HTML Lalu Copy Paste kode di bawah ini : <span class="item_price">rp ,00</span> 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 Hal. 10

11 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 Pusat Pelatihan Internet Marketing ISPARMO Hal. 11

12 9. Setelah posting produk selesai, klik Publish. Lalu cek perubahan yang terjadi. Pusat Pelatihan Internet Marketing ISPARMO Hal. 12

13 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). Pusat Pelatihan Internet Marketing ISPARMO Hal. 13

14 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 2. Login gunakan user dan password Gmail 3. Klik menu CREATE, klik Form Pusat Pelatihan Internet Marketing ISPARMO Hal. 14

15 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. Pusat Pelatihan Internet Marketing ISPARMO Hal. 15

16 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) Pusat Pelatihan Internet Marketing ISPARMO Hal. 16

17 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. Pusat Pelatihan Internet Marketing ISPARMO Hal. 17

18 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. Pusat Pelatihan Internet Marketing ISPARMO Hal. 18

19 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 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 : <input class='order' onclick='window.location=&apos; form-order.html&apos;' type='button' value='order'/> Pusat Pelatihan Internet Marketing ISPARMO Hal. 19

20 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 Hal. 20

21 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 Hal. 21

22 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 : Pusat Pelatihan Internet Marketing ISPARMO Hal. 22

23 Alamat inilah yang kita masukkan ke menu Edit HTML pada langkah ke 6 : Lakukan copy dan paste pada baris kode HTML : <li><a href='/'>jilbab</a></li> menjadi : <li><a href=' 8. Lakukan hal yang serupa pada menu-menu yang lain, dan sesuaikan dengan alamat Label atau Kategori yang sesuai. Pusat Pelatihan Internet Marketing ISPARMO Hal. 23

24 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 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 Pusat Pelatihan Internet Marketing ISPARMO Hal. 24

25 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 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 : <b:include data='blog' name='all-head-content'/> hingga : <meta content='indonesia' name='geo.placename'/> ganti dengan : Pusat Pelatihan Internet Marketing ISPARMO Hal. 25

26 <b:include data='blog' name='all-head-content'/> <b:if cond='data:blog.url == " <meta content='kalimat yang mengandung KATA KUNCI / KEYWORD' name='description'/> <meta content='keyword1, keyword2...' name='keywords'/> </b:if> <b:if cond='data:blog.pagetype == "item"'> <title><data:blog.pagename/> <data:blog.title/></title> <b:else/> <title><data:blog.pagetitle/> Keyword1 Keyword2 Keyword3... </title> </b:if> 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 , dan memberikan komentar di milist atau forum. Pusat Pelatihan Internet Marketing ISPARMO Hal. 26

27 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 : I S P A R M O Hp , mail@isparmo.com FB : PIN BB : 75FE2721 Pusat Pelatihan Internet Marketing ISPARMO Hal. 27