Waktu & Tempat:
Dinas Koperasi & UMKM Prov. Jatim,
Jl. Raya Juanda, Surabaya
Kamis, 10 April 2014
Irmasari Hafidz Jurusan Sistem Informasi
Fakultas Teknologi Informasi
Institut Teknologi Sepuluh Nopember (ITS)
Jl. Raya ITS, Kampus ITS |Ruang TC205, Surabaya
Arief Bahari ariefbahari.com
Pelatihan Media Online & Website – Dinas
Koperasi & UMKM, Provinsi Jawa Timur
2 | P a g e
Daftar Isi
Daftar Isi ................................................................................................................................................................ 2
Pendahuluan .......................................................................................................................................................... 3
1 Media Online ........................................................................................................................................................ 3
STUDI KASUS 1: AMBLE | Amble Footwear .................................................................................................. 5
2 Blog Wordpress ................................................................................................................................................ 8
2.1 Jenis Akun Wordpress (WP) .................................................................................................................... 8
2.2 Syarat Penggunaan Wordpress ............................................................................................................ 8
3 Langkah-langkah Blog Wordpress? ............................................................................................................. 9
3.1 Instalasi ....................................................................................................................................................... 10
3.2 Dashboard ................................................................................................................................................. 14
3.3 Comments .................................................................................................................................................. 16
3.4 Pages........................................................................................................................................................... 16
3.5 Posts ........................................................................................................................................................... 18
3.6 Widget ........................................................................................................................................................ 20
Referensi .............................................................................................................................................................. 22
Tentang Penulis .................................................................................................................................................. 22
3 | P a g e
Pendahuluan
Tutorial Pelatihan membuat website ini terbagi menjadi 2 bagian:
bagian (1) teori tentang Media Online yang banyak digunakan untuk
promosi dan marketing sebuah produk dan
bagian (2) yaitu Tutorial Website Sederhana.
Pada bagian (1) akan dibahas beberapa definisi dasar tentang apa itu website
atau situs, serta beberapa macam contoh studi kasus tentang website.
Selanjutnya bagian (2) praktek akan dibahas mengenai pembuatan website
sederhana dengan menggunakan situs CMS yaitu Wordpress.
1 Media Online
Akun Twitter? Facebook? Instagram? Website? Yang mana yang harus saya
miliki?
Perkembangan teknologi dan media online yang begitu cepat di era digital
menuntut adanya inovasi dari para pembuat produk dan servis/ jasa. Mereka
dituntut untuk berlomba-lomba menarik sebanyak mungkin konsumen dan
serta meningkatkan penjualan produk.
Dari segi teknologi, perkembangan terbaru smartphones dan tablet
memungkinkan para produsen dan perusahaan untuk mengunggah produk dan
jasa di dunia internet secara cepat, mudah dan dengan biaya yang sangat
minimal. Untuk menjawab pertanyaan diatas, selain website yang bisa
digunakan sebagai sarana pemasaran, akun media sosial seperti Twitter,
Facebook dan Instagram, Youtube serta Pinterest sebenarnya sangat cukup
membantu memasarkan produk dan jasa serta membantu memperluas untuk
meraih jangkauan konsumen yang lebih besar.
Website merupakan alat utama sebuah perusahaan/ organisasi untuk dapat
berkomunikasi, sebagai situs utama perusahaan yang akan dijadikan rujukan
oleh para customer untuk menggali banyak informasi tentang produk dan jasa
yang ditawarkan. Kesimpulan yang bisa diambil, selain website – berbagai
akun media sosial yang telah disebutkan tadi merupakan alat yang saat ini
tidak bisa lepas dari peran marketing dari sebuah organisasi atau perusahaan.
4 | P a g e
Menurut Kiang et. al (2000), terdapat tiga fungsi utama dari internet
marketing, antara lain:
As a communication channel
Berfungsi sebagai alat pertukaran informasi antara penjual dan pembeli. Tiga fungsi khususnya yaitu:
1. Sebagai alat untuk mengakses, menyusun
dan menyampaikan informasi; 2. Untuk meningkatakn interaksi dan
pengalaman pribadi yang dialami oleh
pengguna (citra pengguna); 3. Untuk mengumpulkan informasi/feedback
pembeli (customer), via survey dan polling untuk pengenalan dan pengembangan produk baru, membangun hubungan dan
personalisasi dengan pelanggan
As a transaction channel: sales activites
Berfungsi sebagai alat yang mempermudah kegiatan penjualan. Empat fungsi khususnya yaitu:
1. Untuk meningkatkan visibilitas dimana
pelanggan berada dan meningkatkan cakupan
pelanggan; 2. Untuk meningkatkan pendapatan melalui
program cross-selling (penawaran produk lain);
3. Untuk merekam transakasi bisnis, dengan
mengurangi kompleksitas kegiatan bisnis, mengurangi penggunaan kertas dan biaya
transaksi lain; 4. Untuk mengkostumisasi promosi dan
penjualan terhadap pelanggan/ konsumen
secara individual.
As a distribution channel: Physical exchange of
products/services
Berfungsi sebagai alat bantu pertukaran fisik produk & jasa. Dua fungsi utamanya yaitu:
1. Untuk mengurangi biaya inventori, biaya
gudang, biaya peralatan dan sewa gedung;
2. Untuk mengurangi mata rantai pasok sehingga dapat mengurangi biaya
operasional.
5 | P a g e
STUDI KASUS 1: AMBLE | Amble Footwear
STUDI KASUS
AMBLE FOOTWEAR Website : http://www.amblefootwear.com/ Twitter : https://twitter.com/amblefootwear Facebook : https://www.facebook.com/amblefootwear Instagram : https://www.instagram.com/amble
7 | P a g e
AMBLE FOOTWEAR
Amble Footwear adalah toko online yang menjual produknya hanya melalui pemesanan online dari web mereka. Akun media sosial seperti akun Facebook, Twitter, dan Instagram adalah media yang membantu mereka dalam memasarkan produk, secara cepat dan biaya yang minimal.
8 | P a g e
2 Blog Wordpress
2.1 Jenis Akun Wordpress (WP) Dalam penggunaan website yang dapat dikustomisasi yaitu Wordpress, terdapat dua
jenis akun yaitu situs gratis dan berbayar, perbedaan mendasar dari dua jenis akun
tersebut adalah:
1. Akun Gratis: Akun ini akan memiliki tambahan tulisan Wordpress pada link kita,
contoh: http://gudangsepatu88.wordpress.com.
(+) Tidak memerlukan biaya apapun untuk memiliki akun tipe ini, cukup
memiliki alamat email aktif saja.
(-) Kapasitas data pada website pada tipe ini terbatas, hanya 3 GB (atau 3000
MB).
2. Akun Berbayar: Akun ini memiliki nama link yang akan disesuaikan sesuai
dengan kemauan kita dan tidak memiliki tambahan tulisan Wordpress pada
link, contoh: http://gudangsepatu88.com.
(+) Kapasitas data untuk website kita bisa disesuaikan dengan kebutuhan.
(-) Terdapat biaya tahunan yang harus dibayar oleh pemilik akun.
2.2 Syarat Penggunaan Wordpress Terdapat dua syarat yang harus dimiliki sebelum bisa memiliki domain pada situs
Wordpress.com yaitu memiliki akun email dan koneksi internet:
1. Akun Email
Pengguna situs Wordpress tidak berbayar (maupun berbayar) harus memiliki
akun email aktif (Yahoo, Gmail, Live, dll) yang digunakan sebagai ID untuk
masuk ke situs Wordpress serta melakukan update terbaru. Jika belum
memiliki email, silahkan mendaftar terlebih dahulu.
2. Koneksi Internet
Dibutuhkan koneksi internet yang cukup untuk dapat melakukan update dan
mengkases situs Wordpress. Anda dapat menggunakan modem portable
dengan koneksi layanan internet dari berbagai provider telekomunikasi, baik
CDMA (SmatFren, Telkom Flexi, dll) atau GSM (Telkomsel, Indosat, XL, dll).
JENIS AKUN WP:1. Gratis2. Berbayar
SYARAT WP:1. Email2. Koneksi Internet
9 | P a g e
3 Langkah-langkah Blog Wordpress? Terdapat beberapa langkah-langkah dasar untuk membuat blog dengan
menggunakan Wordpress, 6 langkah tersebut adalah:
1. Instalasi
2. Pengenalan Dashboard Wordpress
3. Moderasi Comments
4. Membuat Pages
5. Membuat Posts
6. Tentang Widget
1:Instalasi
2: Dashboard
3:Comments
4: Pages
5: Post
6: Widget
10 | P a g e
3.1 Instalasi Terdapat 3 langkah penting yang berhubungan dengan instalasi blog Wordpress yaitu
melakukan pendaftaran blog baru (sign up) di http://wordpress.com dengan nama
yang anda inginkan, contoh: http://gudangsepatu88.wordpress.com.
3 langkah utama tersebut adalah: mendaftarkan domain, mengisi profil, serta
memilih tema wordpress yang akan dipakai. Syarat untuk dapat melakukan
pendaftaran yaitu minimal user harus memiliki akun email aktif (Yahoo, Gmail,
Hotmail, dll).
Langkah-langkah Link & Keterangan
1. DAFTAR DOMAIN:
Mendaftarkan Domain Blog
Wordpress
https://signup.wordpress.com/signup/ https://id.wordpress.com/signup/
Isian: Alamat Email
Nama Pengguna Password/Kata Sandi Alamat Blog: Nama alamat yang diinginkan
2. ISI BIO: Isilah
biografi singkat
tentang
perusahaan
Mengisikan Biografi pada perusahaan/organisasi, terdapat 3 isian yang harus ditulis yaitu apa judul yang diinginkan, apakah anda/organisasi anda memiliki slogan, bahasa yang
diinginkan untuk dipakai (pilih Bahasa Indonesia).
11 | P a g e
Isian: Judul Blog anda
Slogan Blog Bahasa
Jika melakukan fungsi Edit pada Judul dan Slogan Blog, bisa menuju ke:
Dashboard >> Appearance >> Customize:
Lalu akan muncul halaman baru dengan fungsi-fungsi di
kanan yang sesuai dengan kebutuhan: Custom Design: fungsi yang digunakan untuk akun
wordpress premium jika ingin menambahkan fungsi Javascript pada website/ blog wordpress anda
Colors: memilih tema warna yang ingin dipakai pada web
12 | P a g e
Headers: untuk mengganti/ menambahkan/
menghilangkan gambar header website
Menus: terdapat 2 jenis, Main Menu & Social Menu
Main Menu menu yang muncul diatas/sebagai header website. Contoh pada website studi kasus adalah: Men
Shoes/ Testimonial/ Contact Us
Social Menu menu social, yang muncul dibawah/sebagai footer website, bisa lebih dari satu, diedit melalui menu:
Dashboard>> Appearance>> Menu>> Create new menu
Front: halaman depan yg ingin ditampilkan, terdapat 2 jenis, Latest Post dan Static Page.
Latest Post: menampilkan update/post terbaru yang dimiliki
Static Page: kita memilih 1 post yang ingin selalu
ditampilkan, misal di halaman depan kita, misal selalu menampilkan halaman Kontak Kami (Contact Us), bisa diubah sewaktu-waktu sesuai keinginan.
Site Title: digunakan untuk editing judul website/blog kita,
serta slogan yang ingin ditampilkan di depan.
Area Social Menu (bawah)
Area Main Menu (atas)
13 | P a g e
Theme Options: pilihan untuk tampilan awal website
3. PILIH TEMA:
memilih tema wordpress
Pemilihan theme atau tema wordpress dapat diakses melalui
link: http://www.wordpress/themes Atau melalui menu: Dashboard>> Appearance >> Themes
Editing Site Title
14 | P a g e
3.2 Dashboard Dashboard adalah menu utama pada halaman Administrasi Area, di bagian kiri
terdapat semua fungsi utama dashboard, total terdapat 13 fungsi utama yang dapat
langsung dilihat dibawah ini:
Fungsi-fungsi Dashboard:
Store Posts
Media Links
Pages Comments Feedback
Appearance Users
Tools Settings
Langkah-langkah Link & Keterangan
1. Home Home: Halaman dashboard dari wordpress anda, contohnya adalah: https://gudangsepatu88.wordpress.com/wp-admin/index.php
2. Store: Halaman yang dapat mengubah tipe blog wordpress
menjadi akun berbayar atau premium, salah satu
15 | P a g e
perbedaan mendasarnya adalah, menghilangkan kata
wordpress pada link pengguna. Sebagai contoh pada studi kasus gudangsepatu88, halaman ini bisa diakses di:
https://gudangsepatu88.wordpress.com/wp-admin/paid-upgrades.php *)gudangsepatu88 diganti dengan nama
website atau blog anda.
3. Media: Fungsi ini digunakan untuk menambahkan media baik berupa:
Gambar (.jpg .png) Audio & Video (.mp3 .mp4)
Select Files, memilih file dari
komputer
16 | P a g e
3.3 Comments Fungsi Comments digunakan untuk moderasi comments yang masuk pada posting
dan pages kita dari user lain. Kita dapat melihat Comments akan muncul pada Pages
dan Posting apa, serta dapat melakukan fungsi hapus pada komentar yang tidak kita
inginkan.
3.4 Pages Pages adalah fungsi yang akan muncul di menu utama website/blog kita. Berbeda
dengan Category, Pages berfungsi sebagai halaman tunggal yang akan mempunyai
fungsi tertentu seperti:
Home: halaman depan website
Contact Us: penjelasan tentang organisasi/perusahaan/produk/jasa yang kita jual
Testimonial: Berisi testimonial
Langkah-langkah Link & Keterangan
1. Membuat Pages
baru
Membuat fungsi utama baru dibagian atas website atau
blog utama kita. Kita dapat menambahkan halaman Kontak, Testimonial disini.
Fungsi ini diakses melalui: Dashboard>> Pages>> Add New
17 | P a g e
2. Maintenance
Pages Kita dapat melakukan editing terhadap Pages yang sudah kita miliki, cukup klik pada Page yang akan diedit, lalu
lakukan editing.
Fungsi:
Edit |Quick Edit |Trash |View
Pada contoh website AMBLE FOOTWEAR,
kategori MEN (parents) memiliki kategori
lagi (child) yaitu Accesories, Footwear,
Shoelace dan Bags.
Fungsi ini memungkin
Pages dapat disusun
berdasarkan Parents dan
Child. Jika ingin sebuah
Pages berada di bawah
kategori (X) tertentu,
maka pilih Parents>>
Kategori X.
Jika ingin menjadi fungsi
utama, pilih no parents.
Klik Trash untuk
menghapus
18 | P a g e
3.5 Posts 1. Membuat Posting Baru
Membuat post baru, semisal anda mempunyai tambahan produk baru, bisa melakukan penambahan post baru,
melalui:
Dashboard>> Posts>> Add New
Judul Posting Judul Posting Menambah
kan
Gambar,
Polling &
Form
Kontak
Editor WYSIG ―What
you see is what you
get‖ (fungsi
menyerupai MS Word)
Halaman Edit
Page
19 | P a g e
2. Membuat Category Baru
Posts bisa dikategorikan dengan melakukan diferensiasi pada Category pada post tersebut. Dalam studi kasus
http://gudangsepatu88.wordpress.com memiliki 2 Category:
Men Shoes & Women Shoes
Category Men Shoes akan memunculkan semua Posts yang memiliki tags ―men shoes‖, begitu pula
dengan tags ―woman shoes‖. Cara menambahkan Category, dapat dilakukan melalui:
Dashboard>> Posts>> Categories
Setiap Posts dapat dibedakan berdasarkan
Category, jangan lupa beri centang untuk
Category yg benar.
Menambahkan/mengurangi Category ada
pada + Add New Category, atau pada
menu Dashboard>> Posts>> Category
Menu editing untuk
menambahkan,
mengganti, mengurangi
Category
20 | P a g e
3.6 Widget Widget adalah fungsi-fungsi tambahan yang bisa ditampilkan di halaman website kita,
seperti link akun Facebook, Calendar, dan links lain. Terdapat 2 macam letak, di
samping dan di bawah, bergantung pada tema yang kita pilih.
Klik pada category yang
diinginkan untuk melakukan
editing atau bahkan menghapus
category
21 | P a g e
Widget: Facebook Like Box
Fungsi ini akan menampilkan &
mempromosikan FB page kita
di website, serta menambah
Likes pada Page yg kita buat.
22 | P a g e
Referensi Kiang, Melody Y., T. S. Raghu, and Kevin Huei-Min Shang. "Marketing on the
Internet—who can benefit from an online marketing approach?." Decision Support
Systems 27.4 (2000): 383-393.
Tentang Penulis
Penulis: Irmasari Hafidz, S.Kom, M.Sc
Penulis adalah dosen tetap pada Jurusan Sistem Informasi, Fakultas Teknologi
Infomasi ITS, Surabaya. Menyelesaikan pendidikan sarjana Sistem Informasi di ITS
(Sarjana Komputer) tahun 2007 dan pasca sarjana Business Information Technology
di Universiteit Twente, Belanda (Master of Science) tahun 2011. Selain mengajar,
bergabung secara aktif di berbagai kegiatan EcoCampus ITS, mendirikan organisasi
non-profit berlisensi dari TED.com (United States) yaitu TEDxITS
(http://tedx.its.ac.id) serta menjadi konsutan IT untuk beberapa project IT di
berbagai organisasi dan lembaga pemerintah. Penulis dapat dihubungi secara online
pada akun twitter @ir_hafidz atau email di irma(at)is.its.ac.id.
Co-Penulis: Arief Bahari, S.Sn
Penulis adalah Sarjana lulusan Desain Produk, Fakultas Teknologi Sipil dan
Perencanaan ITS, Surabaya. Setelah lulus ia meneruskan karirnya sebagai designer
grafis freelance hingga saat ini dan telah terlibat dalam berbagai macam proyek
selama 5 tahun terakhir. Penulis dapat dihubungi secara online pada akun twitter
@ariefbah atau email di ariefbahari(at)gmail.com.