CARA MEMBUAT

TOKO ONLINE
MENGGUNAKAN BLOGGER

AHMAD MUHAJIRUL FAQIH

 PENDAHULUAN

Bila anda sudah mastah apalagi sudah bisa membuat toko online sendiri jangan dibaca deh ebook
ini hehe. Bukan apa-apa karena ini emang buat newbie yang khusus ingin belajar membuat toko
online tanpa mengeluarkan budget yang terlalu besar.

Oowh iya bagi kawan-kawan yang ingin belajar banyak mengenai teknologi, programming,
wordpress atau lainnya bisa masuk ke channel telegram saya yaitu https://t.me/newbietech.

Kita mulai ya apa sih yang harus kita persiapkan untuk membuat toko online?. Tentu saja adalah
laptop (ini untuk memudahkan teman-teman dalam membuatnya) terus koneksi internet dan
tentunya paket tutorial dari saya hahaha. Lanjuuut???

Tentunya sebagai pebisnis online sangat penting sekali memiliki toko online. Toko online ini
membantu anda lebih mengenalkan produk anda kepada customer. Namun, masalahnya harga
toko online di Indonesia ini masih lumayan mahal, untuk fitur yang sederhana saja kisaran antara
500 ribu sampai 1juta. Woooow kan? Tapi tenang kini anda akan dengan mudah belajar membuat
toko online hanya menggunakan blogger.

2
https://t.me/newbieTech
 TAHAPAN MEMBUAT TOKO ONLINE BLOGGER

Ada beberapa tahap mudah dalam membuat toko online dengan blogger dan berikut adalah
beberapa tahapannya.

1. Melakukan pembuatan akun blogger

2. Membuat blog baru
3. Menginstall tema
4. Memodifikasi dasar tema & blog
5. Menambah produk
6. Menambah halaman
7. Menambah & mengubah menu

3
https://t.me/newbieTech
 MELAKUKAN PEMBUATAN AKUN BLOGGER

Untuk membuat toko online dengan menggunakan blogger tentu saja pertama yang harus kita
buka adalah blogger.com. Silahkan login dulu menggunakan akun gmail anda.

Setelah login biasanya akan muncul tampilan seperti diatas. Silahkan anda klik tombol Buat Profil
Google +. Ini biasanya muncul ketika anda belum mempunyai akun google plus.

4
https://t.me/newbieTech
Setelah selesai silahkan anda isi form sesuai dengan data anda. Kemudian silahkan klik Create
Profile.

Kalau sudah bakalan muncul untuk memilih foto profil. Silahkan anda pilih atau Skip saja bila
nggak ingin menggunakan foto profil. Setelah selesai langsung aja klik tombol lanjutkan ke
blogger.

5
https://t.me/newbieTech
 MEMBUAT BLOG BARU

Siiiip. Mulai dari sini kita akan masuk ke ranah yang lebih teknis namun sangat mudah tentunya.
Silahkan anda klik Buat Blog Baru untuk memulai membuat toko online anda.

Akan muncul tampilan seperti gambar dibawah ini. Ditahap ini silahkan anda isi judul dari toko
anda (nama toko) dan alamat dari toko anda (alamat web). Pastikan juga alamatnya tersedia.
Sedangkan untuk tema anda pilih saja terserah, soalnya nanti kita bakal ganti tema tersebut.

6
https://t.me/newbieTech
Jika kita sudah melakukannya silahkan klik tombol Buat Blog dan tunggu prosesnya. Jika muncul
popup seperti gambar dibawah ini abaikan saja dengan klik tombol Lain Kali.

Kita close aja pesan dibawah ini dengan melakukan klik icon X. Biar ga ganggu kita aja sih hehehe.
Sampai disini blog kita sebenarnya sudah aktif.

7
https://t.me/newbieTech
 MENGINSTALL TEMA

Kali ini kita akan lakukan installasi tema ke blog kita. Caranya simple banget, silahkan kawan-
kawan masuk ke menu Tema.

Pilih tombol Backup/Pulihkan (pojok kanan atas). Lalu masukkan tema yang sudah saya kasih
(tema modifikasi dari tema gratisan) dan klik tombol Upload.

Jika berhasil maka tampilan akan berubah seperti gambar dibawah ini.

8
https://t.me/newbieTech
Untuk tampilan mobile-nya silahkan kawan-kawan klik icon gear.

Lalu kawan-kawan pilih pilihan tidak .. bla bla bla dan klik tombol Simpan.

9
https://t.me/newbieTech
Maka tampilan mobile nya akan berubah seperti gambar dibawah ini.

Langkah installasi tema sudah selesai.

10
https://t.me/newbieTech
 MEMODIFIKASI DASAR TEMA & BLOG

Langsung mulai ya. Silahkan masuk pada menu Setelan pastikan anda berada pada sub menu
Dasar.

Pada form deskripsi silahkan edit sesuai dengan deskripsi toko anda (gak wajib). Ini biasanya akan
ditampilkan saat kita share link pada sosial media atau lainnya.

Selanjutnya silahkan masuk pada menu Postingan, Komentar dan Berbagi seperti gambar
dibawah ini.

11
https://t.me/newbieTech
Ganti angka 7 menjadi 12 lalu klik Simpan Setelan.

Tahap selanjutnya silahkan teman-teman masuk ke menu Tema lagi dan pilih tombol Edit HTML.

12
https://t.me/newbieTech
Silahkan anda scroll kebawah sampai mentok pada kotak script yang tersedia.

Selanjutnya ganti nomor yang tertera dengan nomor whatsapp toko anda. Lalu klik tombol
Simpan Tema.

13
https://t.me/newbieTech
Untuk modifikasi dasar tema dan blog kita sudah siap.

14
https://t.me/newbieTech
 MENAMBAH PRODUK

Setelah semuanya sudah dilakukan, tugas kita selanjutnya adalah menambahkan produk. Kita
akan manambahkan produk pada menu Postingan lalu klik tombol Entri Baru.

Yang perlu di perhatikan pada proses ini adalah saat menambah judul pastikan anda juga
memberikan harga. Contohnya seperti gambar dibawah ini.

Selanjutnya isikan label sesuai dengan jenis produk (label ini nantinya akan berguna sebagai
kategori dari produk anda) bisa ditentukan berdasarkan warna, bahan atau lainnya.

15
https://t.me/newbieTech
Anda juga bisa membuat satu produk mempunyai 2 label dengan memisahkannya menggunakan
koma.

Selanjutnya anda tambahkan gambar dari produk anda dengan melakukan klik tombol yang
ditunjuk arah panah dibawah ini.

16
https://t.me/newbieTech
Silahkan upload gambar anda, lalu klik gambar anda sampai ada kotak birunya dan pilih tombol
Add Selected.

Jika sudah maka gambar produk akan tampil seperti gambar dibawah ini.

17
https://t.me/newbieTech
Selanjutnya anda tinggal menambahkan deskripsi produk anda. Usahakan dalam menambahkan
deskripsi agak panjang. Jadi tampilan toko onlinenya nanti bisa rapi.

Jika sudah silahkan klik tombol Publikasikan. Bila muncul popup seperti gambar dibawah ini anda
bisa memilih untuk share jika ingin mempublikasikan produk anda di akun google plus.

18
https://t.me/newbieTech
Selanjutnya untuk mengecek apakah produk sudah berhasil atau belum kita klik tombol Lihat
Blog.

Bila berhasil akan muncul tampilan seperti gambar dibawah ini.

19
https://t.me/newbieTech
Silahkan lanjutkan upload produknya dulu ya Usahakan semua kategori yang anda inginkan
sudah ada produknya sebelum lanjut ke tahap berikutnya. Siiip?

20
https://t.me/newbieTech
 MENAMBAH HALAMAN

Di toko online ini saya menambahkan 3 halaman tambahan. Anda bisa saja menambahkan
halaman lain lagi. Namun anda harus memodifikasi dibagian kodenya (dibahas di tahap
berikutnya). Untuk memulai menambah halaman silahkan anda klik menu Laman lalu pilih Buat
halaman baru.

Untuk yang pertama kita akan membuat halaman cara pembelian. Untuk contoh kontennya anda
bisa ambil di paket tutorial yang saya sertakan.

21
https://t.me/newbieTech
Setelah selesai, anda klik tombol Publikasikan. Silahkan anda tambah 2 halaman lainnya (tentang
saya/kami dan kontak) sehingga bakal ada tiga halaman seperti gambar dibawah ini.

Sampai disini kita sudah berhasil membuat halaman pelengkap. Untuk selanjutnya silahkan anda
istirahat sejenak karena kita akan berurusan dengan kode-kode sederhana. Refreshing
duluhehe

22
https://t.me/newbieTech
 MENAMBAH & MENGUBAH MENU

Membuat toko online dengan blogger ini bisa dibilang ribet-ribet susah. Karena apa? Blogger
tidak secustom cms wordpress. Jadi untuk merubah beberapa hal perlu kita lakukan di codenya.
Contohnya ya pada kasus yang akan kita kerjakan ini. Yang pertama akan kita lakukan adalah kita
akan mengubah link menu terlebih dahulu. Silahkan teman-teman masuk ke menu Tema lalu klik
tombol Edit HTML. Anda akan mendapati kode-kode dari tema yang telah kita masukkan.

Untuk mengganti link menu, kita klik bagian dalam kotak kode (terserah bagian mana) lalu tekan
Ctrl+F searching dengan keyword Menu utama.

23
https://t.me/newbieTech
Harusnya setelah menekan Enter anda akan menemukan baris script dibawah ini.

Untuk mengganti link menu cara pembelian, tentang saya, dan kontak silahkan anda buka menu
laman. Namun kali ini anda buka menjadi tab baru.

24
https://t.me/newbieTech
Akan terbuka tab baru, yang akan pertama kita ganti adalah halaman Cara Pembelian. Silahkan
klik link Lihat karena kita akan melakukan copy pada linknya.

Jika sudah terbuka silahkan anda copy url dari halaman tersebut.

25
https://t.me/newbieTech
Kemudian kembali lagi ke tab pertama (tab yang membuka menu Tema) lalu silahkan anda paste
link anda di baris kode Cara Pembelian. Contohnya seperti gambar dibawah ini.

Lakukan pada ketiga menu, hasilnya adalah seperti dibawah ini.

26
https://t.me/newbieTech
Anda bisa mengganti teks yang tampil, misalnya kata Tentang Saya diganti menjadi Tentang
Kami.

Bagaimana kalau kita mau membuat menu baru? Mudah saja anda tinggal copy code dibawah ini

<li><a href='#'>Nama Menu</a></li>

Ganti tanda # dengan link anda dan sesuaikan nama menunya. Selanjutnya pastekan kode
dibawah kontak (tergantung penempatan). Agar ga bingung lihat gambar dibawah ini (tapi disini
saya gak akan menambahkan menu baru).

27
https://t.me/newbieTech
Setelah selesai silahkan anda klik tombol Simpan Tema. Lalu lihatlah blog anda. Harusnya ketika
kita klik menu-menu tersebut sekarang sudah bisa memasuki halaman. Siiiip.

Kita lanjut yaaa kali ini kita akan memodifikasi menu untuk kategori produk kita. Masih berada
pada halaman kode tema, kali ini silahkan anda kembali tekan Ctrl+F lalu searching dengan
keyword mulai kategori. Setelah menekan enter, harusnya anda menjumpai kode seperti gambar
dibawah ini.

28
https://t.me/newbieTech
Di toko ini saya memiliki 2 kategori yaitu berdasarkan warna (memiliki sub kuning, hitam dan
putih) dan gender (pria dan wanita). Untuk mengganti/ menambahnya perhatikan kode bagian
dibawah ini.

Pada gambar diatas sudah saya tunjukkan mana baris kategori induk dan sub kategori. Yang perlu
kita ganti linknya, hanya pada sub kategori saja. Untuk linknya sendiri formatnya adalah seperti
ini https://namatoko.blogspot.co.id/search/label/NamaLabel?&amp;max-results=12

29
https://t.me/newbieTech
Yang perlu diperhatikan adalah namatoko dan nama label anda. Jadi silahkan disesuaikan. Agar
nggak bingung bisa dilihat pada gambar dibawah ini.

Untuk menambah kategori induk dan sub kategori anda bisa tambahkan kode dibawah ini.

<li class='has-sub'><a href='#'><span>Kategori Induk</span></a>

<ul class='expand'>

<li><a href='#'>Sub Kategori I</a></li>

<li><a href='#'>Sub Kategori II</a></li>

</ul>

</li>

Silahkan anda copy paste kode diatas pada kode tema.

30
https://t.me/newbieTech
Sesuaikan juga link dan teksnya.

Oke sampai disini sebenarnya sudah siap. Tapi kita akan melakukan setting tambahan untuk
optimalkan SEO pada tema kita. Silahkan anda tekan Ctrl+F dengan keyword YOUR
DESCRIPTION HERE. Maka akan ditemukan baris kode seperti dibawah ini.

31
https://t.me/newbieTech
Silahkan ganti

YOUR DESCRIPTION HERE dengan deskripsi toko anda.

YOUR KEYWORD HERE dengan keyword web anda.

YOURFBAPPID dengan ID aplikasi facebook anda (jika nggak punya ga masalah, gak harus)

YOURFBID dengan ID facebook anda (bisa menggunakan https://findmyfbid.com/ tinggal

pastekan alamat profile facebook anda). Tapi ini juga gak wajib ya

32
https://t.me/newbieTech
Selanjutnya scroll ke paling atas dan edit bagian https://plus.google.com/YOURGOOGLEPLUS
menjadi alamat profil google plus anda.

Untuk melihatnya anda dapat membuka https://plus.google.com/ lalu klik menu profile.
Contoh yang sudah diedit seperti gambar dibawah ini.

Jangan lupa klik Simpan Tema. Okeee.. toko anda siap digunakan.

33
https://t.me/newbieTech
 34
https://t.me/newbieTech
 PENUTUP

Semua tahapan tutorial telah kita lakukan, saya minta maaf jika ada salah kata ataupun kalimat
yang agak membingungkan hehe. Karena saya sendiripun masih belajar menulis. Jika ada masalah
atau kurang bisa memahami tulisan saya bisa japri langsung ya, kontak saya ada dibawah.
Insyaallah jika saya bisa saya akan membantu. Terimakasih telah membaca ebook ini sampai
selesai, semoga bermanfaat.

35
https://t.me/newbieTech
 AHMAD MUHAJIRUL FAQIH

Newbie yang menekuni bidang web programming,

desain grafis, pembuatan video dan mulai tertarik
mempelajari internet marketing.

http://muhajirulfaqih.blogspot.com facebook.com/faqih.code

muhajirulfaqih@gmail.com 0858-7939-3616

36
https://t.me/newbieTech