1

Bismillah

Mohon doa dari bapak/ibu sekalian, saya pengen punya

pesantren dan usaha yang memiliki ribuan cabang. Pengen
manfaat buat orang banyak dan bisa membiayai dakwah
semata-mata mengharap ridho Allah Swt. Aamiin

DAFTAR ISI
BAB 1 SEPUTAR WEBSITE ................................................................................ 7
1.1 Pengertian Webstite ....................................................................................... 7
1.2 Kenapa harus memiliki website? ................................................................... 9
1.2.1 Sarana Menyalurkan Ide/Gagasan .......................................................... 9
1.2.2 Sarana Memasarkan Produk/Jasa.......................................................... 10
1.2.3 Sarana Memperkenalkan Diri/Perusahaan/Instansi/Daerah tempat dia
tinggal ............................................................................................................ 10
BAB 2 CARA PEMESANAN WEBSITE .......................................................... 15
2.1 Domain dan Hosting .................................................................................... 15
2.2 Layanan Penyedia Hosting dan Domain ..................................................... 16
2.3 Domosquare................................................................................................. 17
2.4 Memulai Pemesanan Hosting dan Domain ................................................. 18
BAB 3 INSTALL WORDPRESS ......................................................................... 31
3.1 Cek E-mail ................................................................................................... 30
3.2 Informasi Akun & Login Cpanel Hosting. .................................................. 34
3.3 Cpanel .......................................................................................................... 36
BAB 4 PENGATURAN DASHBOARD.............................................................. 46
4.1 Dashboard .................................................................................................... 46
4.2 Themes ........................................................................................................ 46
4.3 Apa sih bedanya wordpress.com dengan wordpress.org? ........................... 52
BAB 5 INSTALL PLUGIN .................................................................................. 59
3

5.1 Plugin........................................................................................................... 59
5.1.1 Plugin All In One SEO pack ................................................................. 60
5.1.2 Google XML Sitemaps ......................................................................... 64
5.1.3 Social Sharing ....................................................................................... 67
BAB 6 SETTINGS ................................................................................................ 70
6.1 Settings ........................................................................................................ 70
6.2 General Settings .......................................................................................... 70
6.3 Writing Settings ........................................................................................... 75
6.4 Reading ........................................................................................................ 79
6.5 Discussion ................................................................................................... 80
6.6 Media ........................................................................................................... 80
6.7 Permalinks ................................................................................................... 82
6.8 Setting Plugin .............................................................................................. 86
6.8.1 Google XML Sitemaps ......................................................................... 87
6.8.2 Social Sharing ....................................................................................... 88
6.8.3 All In One SEO Pack ............................................................................ 90
BAB 7 PENGISIAN ARTIKEL ........................................................................... 96
7.1 Post .............................................................................................................. 96
7.2 Bold ............................................................................................................. 99
7.3 Italic ............................................................................................................. 99
7.4 Strikethrough ............................................................................................. 100
7.5 Bullets ....................................................................................................... 103
7.6 Numbering ................................................................................................. 103

7.7 Quote ......................................................................................................... 104

7.8 Horizontal Line .......................................................................................... 105
7.9 Align Paragraf ........................................................................................... 105
7.10 Insert/Edit Link ........................................................................................ 106
7.11 Remove Link ........................................................................................... 108
7.12 Insert Read More ..................................................................................... 108
7.13 Distraction-Free Writing Mode ............................................................... 109
7.14 Heading Teks ........................................................................................... 110
7.15 Underline ................................................................................................. 111
7.16 Justify ...................................................................................................... 112
7.17 Text Color................................................................................................ 113
7.18 Paste As Text ........................................................................................... 114
7.19 Clear Formatting...................................................................................... 114
7.20 Special Character ..................................................................................... 115
7.21 Decrease Indent and Increase Indent ....................................................... 116
7.22 Undo and Redo ........................................................................................ 116
7.23 Keyboard Shortcuts ................................................................................. 117
7.24 Visual....................................................................................................... 121
7.25 Mode Text / Kode HTML ....................................................................... 122
7.26 Cara memasukkan gambar / foto ............................................................. 123
7.27 Memasukkan Kata Kunci ........................................................................ 130
7.28 Membuat Kategori ................................................................................... 132
7.28.1 Sub Kategori ..................................................................................... 134

7.29 Memasukan foto di Featured Image ........................................................ 136

7.30 Save Draft ................................................................................................ 139
7.31 Publish ..................................................................................................... 140
7.32 Cara mengedit tulisan .............................................................................. 142
BAB 8 MEMBUAT HALAMAN ....................................................................... 144
8.1 Pages .......................................................................................................... 144
8.2 Edit Pages .................................................................................................. 148
BAB 9 PENGATURAN WIDGETS .................................................................. 150
9.1 Widgets ...................................................................................................... 151
9.2 Tampilan Widgets ..................................................................................... 152
BAB 10 PENGATURAN MENU ....................................................................... 159
10.1 Menu ........................................................................................................ 159
BAB 11 PENUTUP ............................................................................................ 164
DAFTAR PUSTAKA ......................................................................................... 165

BAB 1
SEPUTAR WEBSITE
Sebelum kita mulai praktek membuat website, sedikit akan saya
sampaikan pengertian singkat apa itu website dan kenapa kita harus punya
website? Saya jamin Insyaa Allah anda akan menemukan jawabannya dibuku ini.
1.1 Pengertian Webstite
Saya yakin anda sudah sering mendengar apa itu website, bahkan saya
yakin diantara anda telah menjadi langganan tetap pengunjung sebuah website
atau minimal pernah mengunjungi halaman sebuah website. Lalu apa sebenarnya
website itu? Website adalah sebuah layanan situs yang dapat diakses dengan cepat
oleh pengguna komputer, laptop, atau pun handphone yang terhubung dengan
internet.
Secara gampang nya jika anda sudah bisa terhubung dengan internet maka
anda sudah bisa mengunjungi sebuah website. Misal anda ingin mengunjungi
website makanan, maka anda tinggal mengetik www dan nama website yang anda
tuju, maka anda akan langsung diarahkan ke website makanan yang anda tuju itu.
Dan website itu menjadi representasi pemiliknya sebagai seorang penjual
makanan, hanya saja bedanya dia menjualkan makanan secara online tanpa tatap
muka langsung kepada calon pembeli.
Berikut saya kasih contoh website makanan khas jakarta, makanan khas
orang betawi yaitu kerak telor. Kerak telor yang biasanya hanya bisa dijumpai saat
moment tertentu saja, kini sudah bisa dijumpai banyak orang, bahkan yang
7

didaerah tanpa perlu datang ke Jakarta, bisa melihat makanan khas ini bahkan
memesannya. Dan inilah diantara kelebihan sebuah website. website yang
mungkin sebagian anda masih berfikir apa bisa? Dan ternyata bisa.
Contoh website makanan www.keraktelor.net

Gambar 1.1 contoh usaha website makanan khas

Secara tidak langsung pemiliknya sedang memasarkan jualan nya didalam
website. Jadi apa itu website? Website adalah kumpulan berbagai halamanhalaman yang saling berkaitan satu sama lain yang berisi beragam informasi
berupa artikel, gambar, video bahkan berkas-berkas yang kemudian dapat di akses
seluruh orang diseluruh dunia selama memiliki akses internet selama 24 jam
nonstop.

Bukan hanya produk saja yang bisa ditawarkan oleh dunia website, bahkan
jika anda punya banyak keahlian anda juga bisa berjualan keahlian anda disini,
tentunya keahlian yang positif ya, bukan keahlian yang negatif dan
menyengsarakan orang banyak.
Contoh nya Jika anda seorang yang ahli dibidang jasa perbaikan pompa
air, anda bisa membuat website seputar pompa air atau seputar perbaikan pompa
air, seperti website yang satu ini.
Contoh website seputar jasa www.servicepompaair.com

Gambar 1.2 contoh website dibidang Jasa pelayanan

Keren sekali bukan, kalau dahulu usaha jasa yang begini hanya ada
dipinggir jalan dengan kios dan toko, sekarang semua orang yang memiliki
kerusakan pompa air sudah tak sulit lagi datang ke pinggir jalan, mencari-cari

tukang pompa untuk memperbaiki pompa air nya yang rusak, cukup buka internet,
cari di google dan ternyata penyedia jasa sejenis banyak sekali. Gak percaya? Yuk
kita buktikan.
Cukup banyak bukan yang mencari jasa service pompa air. Sekali lagi ini
hanyalah sample saja.
Contoh banyak nya permintaan Jasa Service Pompa Air di Google

Gambar 1.3 contoh pencarian jasa pelayanan di Google

Sekarang semua serba mudah bukan? serba instan, Internet dan juga
website memanjakan itu semua. Sekarang biodata kita, dagangan kita, produk dan
jasa kita, ide-ide kebaikan kita, semua bisa diakses dengan kita memiliki website
bahkan tak jarang orang yang sukses didunia website yang penghasilannya sangat
fantastis sampai milyaran rupiah.

10

Sampai disini mudah-mudahan anda semakin semangat untuk terus

membaca buku ini dan semakin semakin ingin cepat-cepat memiliki website yang
manfaat.
1.2 Kenapa harus memiliki website?
Secara global kenapa harus punya website sudah saya jabarkan diatas,
namun mungkin diantara kita ada yang belum memahami dan mengetahui penting
nya mempunyai website? Apa hanya untuk gaya-gayaan saja? Ataukah ada
keuntungan kita memiliki website? Baik saya akan jawab keingintahuan anda
semua.
1.2.1 Sarana Menyalurkan Ide/Gagasan
Iya, saya menyakini bahwa anda pasti punya banyak sekali Ide-ide yang
bagus-bagus dan hebat-hebat, namun mungkin masih kebingungan bagaimana
cara memasarkan ide-ide tersebut? Nah, Website bisa menjadi jalan menyalurkan
ide-ide tersebut sehingga banyak orang bisa mengakses dan jika dirasa ide nya
bagus dan brilian serta manfaat untuk orang banyak orang akan banyak yang copy
paste / meniru dan ini akan menjadi amal jariah dan tambahan pahala loh, keren
banget bukan?
Berikut contoh sample website ide gagasan pribadi
www.yuleko.com

11

Gambar 1.4 contoh website penyaluran ide pribadi untuk bisnis

1.2.2 Sarana Memasarkan Produk/Jasa
Kemungkinan pembuatan buku ini adalah dititik beratkan dipoint ini,
dimana saya pribadi ingin anda bisa memiliki penghasilan sendiri melalui website
ini. Moga dengan kita mempelajari cara membuat website ini bisa jadi salah satu
jalannya. Untuk contoh website Produk dan jasa tidak perlu saya kasih contoh lagi
ya, udah ada diatas hehehe.
1.2.3 Sarana Memperkenalkan Diri/Perusahaan/Instansi/Daerah tempat dia
tinggal
Bayangkan kita bisa memperkenalkan diri kita secara massif di website
kita, bahkan kita bisa memperkenalkan usaha kita, nama perusahaan kita
(Company profile), lembaga kita, misalnya kita punya Taman Kanak kanak,

12

lembaga bimbel, bahkan sekolah kita, juga tak kalah penting nya kita juga bisa
memperkenalkan daerah tempat kita tinggal.
Berikut saya kasih anda sample website yang mungkin bagi sebagian
orang tidak penting tapi ternyata memiliki website memiliki dampak yang cukup
signifikan.
www.tqtassyukur.com

Gambar 1.5 Contoh website Taman Pendidikan Alquran

Dan Masih banyak lagi Kelebihan website, diantaranya ;
-

Website mampu Online 24 Jam nonstop

Tidak terbatas ruang dan waktu

Terakses diseluruh dunia oleh seluruh orang pengguna internet

Biaya sewa dan pembuatan sangat murah, berbeda dengan sewa kios
dipinggir jalan dan ini bisa jadi alternative untuk anak muda yang ingin

13

usaha namun modal sangat terbatas. Bahkan hanya dengan ratusan ribu
saja anda sudah bisa berbisnis.
-

Alat promosi yang sangat murah

Alat komunikasi antar penjual dan pembeli dan sebaliknya

Jadi jalan pertemuan rekan baru

Memberi informasi update seputar peristiwa maupun moment-moment

penting lainnya

Penampung aspirasi, kritik atau saran

Jadi sarana pembentuk komunitas, komunitas kebaikan loh ya

Untuk sementara 3 Point besar nya saja yang saya kasih deskripsi ya,

semoga jadi penyemangat kita-kita semua untuk terus maju, sukses, taqwa dan
penuh manfaat. Aamiin.
Sampai disini dulu ya pembahasan Bab 1. Sekarang anda bisa rehat dulu
sebelum lanjut di Bab 2.

14

BAB 2
CARA PEMESANAN WEBSITE
2.1 Domain dan Hosting
Domain pengertian gampang nya adalah alamat dari sebuah website.
Sedangkan Hosting adalah Tempat menyimpan data-data yang ada, seperti teks,
gambar, video dan lain sebagainya. Kalau diibaratkan Seperti sebuah rumah atau
toko, Domain itu adalah alamatnya, dan Hosting adalah rumah atau toko nya.
Domain dan Hosting layaknya dua sisi mata uang, yang satu sama lain tak
bisa dipisahkan. Domain sangat diperlukan sebuah website. Domain fungsi nya
untuk mengakses sebuah website di Internet. Jika alamatnya tidak ada maka bisa
dipastikan orang tidak bisa mengakses apa yang kita sampaikan.
Hosting jika diibaratkan sebagai rumah atau toko. Tanpa hosting website
tidak akan bisa online, dan tidak bisa juga di akses orang. Moga penjelasan
singkat ini dapat membantu anda dalam memahami nya.
Berikut contoh alamat domain.

15

Misal www.toko-flanel.com

Gambar 2.1 Contoh alamat Domain

2.2 Layanan Penyedia Hosting dan Domain
Untuk layanan penyedia hosting dan domain sangat banyak sekali. Anda
cukup searching di google layanan penyedia hosting dan domain maka akan
muncul banyak sekali penyedia layanan tersebut.
Contoh hasil searching layanan penyedia Hosting dan Domain di Google.

16

Daftar 2.2 contoh layanan penyedia Hosting dan Domain

2.3 Domosquare
Ya, untuk kebutuhan praktek tutorial dalam buku ini, saya ambil contoh
jasa penyedia layanan Hosting dan Domain Domosquare.com. Namun jika anda
sudah ada layanan penyedia hosting domain yang lain yang lebih anda sukai
silahkan, dalam tutorial ini saya bermaksud hanya mempermudah anda untuk
proses praktek kita membuat website.

17

2.4 Memulai Pemesanan Hosting dan Domain

Yuk langsung saja kita kunjungi website resmi Domosquare.com
Kunjungi >> www.domosquare.com

Gambar 2.3 Tampilan Home Domosquare.com

Saya akan mengarahkan anda untuk mendapatkan layanan hosting yang

sudah include (termasuk) dengan Domain nya. Tentunya ini agar anda
mendapatkan hosting dan domain dengan harga yang paling murah.

18

Hanya Rp. 150.000/tahun yang anda keluarkan, tentunya sangat terjangkau

sekali. Ini sangat jauh lebih murah dibandingkan dengan harga sewa toko/ruko
dipinggir jalan.
Sekarang silahkan klik Hosting >> Hosting Free (Gratis) Domain.

Gambar 2.4 Pemilihan Hosting Gratis Domain

Kemudian pilih Freedom 100 >> Beli.

19

Anda juga bisa memilih pilihan yang disediakan tentunya disesuaikan dengan
kondisi keuangan anda. Namun dalam hal ini kami mengarahkan dengan harga
yang paling murah dan sangat cocok untuk pemula.

Gambar 2.5 Contoh Hosting Freedom 100

Kemudian >> Pilih Lokasi Hosting, dalam hal ini saya Pilih >> USA
karena saya nantinya akan mengajarkan anda untuk memaksimalkan SEO (Search
Engine Optimitation) yaitu memaksimalkan potensi mesin pencari Google.
Klik >> USA

20

Gambar 2.6 pemilihan Lokasi Hosting

Setelah itu tempatkan kursor di bagian kotak Register a new domain
Tuliskan Nama Domain yang sudah anda targetkan atau yang sudah anda siapkan
sebelumnya.

Misalnya

saya

ingin

memesan

domain

www.anakmudajagobikinwebsite.com masukan di kolom Tulis Nama Domain.

Untuk nama domain tidak usah menulis lagi www, tapi langsung saja tulis
nama domain yang anda kehendaki sesuai selera atau targetan yang sudah anda
buat. Kemudian dibagian arah panah Kolom (.com) silahkan di Klik dan pilih
sesuai selera. Disitu banyak sekali pilihan ada mulai dari (.com. net, .biz. .org dll).

Setelah itu Klik >> Check.

Gambar 2.7 contoh pengisian Nama Domain yang dikehendaki

Jika domain yang kita order belum ada yang menggunakan / membeli nya,
maka akan tertulis Congratulations, (nama domain yang anda pesan) is
available!.

21

Seperti contoh dibawah ini.

Gambar 2.8 Contoh nama domain yang bisa dibeli

Namun, jika domain yang anda pesan sudah digunakan orang atau dibeli
orang lain, maka akan ada pemberitahuan Sorry (nama domain yang anda
pesan) is already taken. Dan anda harus mencari alternatif domain yang lain.
Ini alasan mengapa saya saran kan anda untuk memiliki nama domain
yang ingin dipesan harus lebih dari 1, sebagai alternatif jikalau domain yang anda
maksud sudah dibeli orang lain.

22

Silahkan cari domain lainnya dan pastikan sampai anda mendapatkan

domain yang masih tersedia.

Gambar 2.9 Contoh domain yang sudah dibeli orang

Saya anggap anda sudah mendapatkan nama domain yang cocok untuk
anda. Kemudian kita lihat lagi Gambar 2.9 Contoh nama domain yang bisa dibeli
Kemudian klik >> Continue
Jika sudah anda akan dibawa ke Step berikutnya.
Step berikutnya adalah Atur Pemesanan yang berisi deskripsi singkat
detail pesanan anda. Jika anda diawal order FREEDOM 100MB maka oromatis
detail pemesanan akan berisi FREEDOM 100MB dst.

23

Kemudian Klik Continue

Gambar 2.10 Contoh Detail Pemesanan

Setelah itu anda akan diarahkan di Halaman Konfigurasi Domain.

Klik >> Continue

24

Gambar 2.11 Halaman konfigurasi Domain

Kemudian anda akan diarahkan di halaman Review and Checkout.
Disini akan di review atau di ulang pesanan anda yang sebelumnya atau
yang sudah anda lakukan. Dan anda bisa berlanjut ke Step berikutnya.

25

Langsung saja klik >> Checkout (continue shopping).

Gambar 2.12 Halaman Review pesanan

Langkah selanjutnya anda akan dibawa ke halaman pengisian Checkout
Form Data diri untuk registrasi.
Silahkan masukan data-data anda untuk kebutuhan verifikasi layanan
Domosquare.com.
Untuk pengisian Personal Information
-

Fist Name, nama depan anda

Last Nama, nama belakang

Email address, mohon diisi dengan email yang masih Valid / Masih aktif

Phone Number, mohon juga diisi dengan No Handphone yang masih aktif

*Jika email yang dimasukan adalah e-mail yang sudah tidak aktif, kita akan
kesulitan untuk pengaktifan dan login di Member Domosquare. Jadi mohon
perhatikan point ini.

26

*Point ini sangat penting dalam rangka verifikasi data dan info tagihan dan
pemberitahuan
Untuk Billing Address.
-

Company Name (optional), isi nama perusahaan anda / usaha anda, jika
belum ada dikosongkan saja, namun saya menganjurkan anda untuk
mengisi Nama perusahaan anda meskipun belum ada, moga jadi bagian
dari Doa. suatu saat moga benar-benar kita punya perusahaan yang besar.
Aamiin. (hanya saran loh ya).

Street Address, silahkan diisi dengan alamat perusahaan anda sekarang

atau bisa juga dengan alamat anda tinggal.

Street Address 2, isi jika anda mempunyai lebih dari 1 alamat

City, kota tempat anda tinggal

State, Provinsi tempat anda tinggal

Postcode, kode pos tempat anda tinggal

Gambar 2.13 Halaman pengisian form data diri

27

Lalu scrool kursor kebagian bawah, dan lanjutkan pengisian data yang ada.

Gambar 2.14 Halaman Pengisian form Data Diri

Kemudian Silahkan lengkapi Informasi tambahan
-

Panggilan, panggilan untuk anda bpk/ibu/sdra/sdri/ dll.

Kategori apakah anda, silahkan isi pengguna biasa/perusahaan

No Tujuan Notifikasi SMS, isi no yang valid yang anda gunakan

Yahoo Messenger ID, silahkan isi jika memang ada

Domain Registrant Information, pilih item Gunakan kontak diatas

Password, isi dengan password yang mudah ada ingat, namun sulit ditebak
orang lain, bisa juga gunakan kombinasi huruf dan angka

Konfirmasi password, pengulangan password diatas

Kemudian scrool ke bawah lagi

28

Untuk pengisian Payment Details, silahkan pilih untuk BANK atau

PayPal yang anda gunakan untuk melakukan pembayaran.
Kasih centang untuk kolom saya telah membaca dan menyetujui
ketentuan layanan (TOS)
Selanjutnya klik Selesaikan Pesanan

Gambar 2.15 Halaman pengisian form data diri

Setelah itu anda akan di arahkan ke halaman Tagihan Invoice
Invoice Tagihan dengan label Belum Lunas. Invoice ini berisi kolom
keterangan :
-

Transfer bank

Nomor Invoice

3 digit terakhir angka unik jika ingin transfer via ATM

Invoice tertuju kepada

Penerima Invoice

29

Item invoice

Keterangan pemesanan

Jangka waktu pemesanan Domain

Total Tagihan

Gambar 2.16 Contoh Invoice Tagihan

30

Gambar 2.17 Contoh invoice tagihan

Alhamdulillah sampai disini selesai sudah proses pemesanan website.

Sekarang kita masuk ke Bab 3, anda boleh istirahat terlebih dahulu sambil minum
teh atau secangkir kopi.

31

BAB 3
INSTALL WORDPRESS

3.1 Cek E-mail

Pada bab 3 ini kita akan membahas secara detail cara menginstall website
setelah kita melakukan pemesanan hosting dan domain.
Langkah berikutnya adalah silahkan anda buka e-mail anda yang sudah
anda daftarkan pada form pengisian yang sudah kita lakukan pada bab yang lalu.
Jika e-mail yang dimasukan valid / masih aktif, insyaa Allah data akan masuk,
namun jika e-mail yang dimasukan sudah tidak aktif, maka anda perlu daftar
ulang, karena semua data dikirim ke e-mail yang anda daftarkan.
Sekarang mulai cek e-mail anda >> Buka pesan dari Domsoquare.com,
disitu tertera nomor tagihan, jumlah tagihan, batas pembayaran dan hal-hal
mengenai domain dan hosting yang kita pesan.
Cek e-mail dari Domosquare

32

Gambar 3.1 contoh e-mail tagihan dari Domosquare

Jika anda sudah melakukan proses pembayaran, maka kita akan terima
#Invoice pembayaran Lunas seperti ini.

Gambar 3.2 contoh e-mail dari Domosquare setelah melakukan pembayaran

33

Setelah itu cek Pesan berikutnya dari Domosquare.com, pastikan anda

sudah mendapat Informasi Akun & Login Cpanel Hosting.
3.2 Informasi Akun & Login Cpanel Hosting.
Informasi Akun & Login Cpanel Hosting adalah informasi terkait
password dan username yang nantinya akan kita gunakan untuk bisa masuk
kedalam menu Cpanel.

Gambar 3.3 cek email informasi Akun & Login cPanel Hosting
Klik informasi Akun & Login Cpanel Hosting yang dikirim oleh
Domosquare >> Silahkan anda bisa login ke Cpanel melalui link yang diberikan,
Silahkan di Klik Saja link yang sudah diberikan lewat email anda.
Adapun

link

yang

diberikan

sepertu

berikut

>>

(Namawebsiteanda.com/cpanel).
PERHATIAN :

jangan memberi tahu Username dan Password karena itu

sifatnya rahasia, jangan beritahukan ke pihak mana pun.

34

Gambar 3.4 contoh detail login cPanel yang sifat nya rahasia sekali
Perlu saya tegaskan e-mail ini PENTING sekali untuk disimpan, jangan
sampai hilang dan sifatnya sangat rahasia. Jangan sembarang memberikan info
seputar Cpanel anda kepada orang lain. Karena ini ibarat kata jantungnya dari
website anda.
Yang perlu anda simpan baik-baik adalah Detail Login Cpanel anda.
Username dan password yang diberikan adalah acak dari system, jadi
silahkan dihafal atau minimal anda punya buku khusus untuk menulisnya, agar
sewaktu-waktu terlupa anda bisa melihatnya.

35

3.3 Cpanel
Sebelumnya kita sudah membicarakan Cpanel, namun apakah Cpanel itu?
Cpanel adalah web hosting control panel yang paling populer di dunia. Fasilitas
ini memudahkan pemilik account hosting untuk mengatur seluruh fasilitas web
hosting

yang

dimilikinya.

Silahkan

masuk

ke

Cpanel

melalui

link

www.namawebsiteanda.com/cpanel
Masukan

Username dan Password yang sudah dikirim pihak

domosquare ke alamat email anda.

Setelah itu Klik >> Login.

Gambar 3.5 login cPanel

36

Disinilah kenapa saya menekan kan kepada anda untuk senantiasa menjaga
kerahasiaan username dan password untuk Cpanel anda, ibarat kasarnya Cpanel
adalah nyawa kita, jika nyawa sudah tidak ada maka kehidupan website kita pun
tiada.

37

Gambar 3.6 Contoh tampilan cPanel

Masih bagian dari konten yang ada di Cpanel,
Silahkan perhatikan tanda panah yang saya buat, anda cari Scripts Wordpress >>
gambar logo nya menyerupai huruf W. kemudian di klik logo tersebut.

Gambar 3.7 Contoh tampilan cPanel

38

Atau terkadang mungkin tidak anda temukan, mungkin sewaktu-waktu

tidak ketemu (namun tetap kita harus teliti) karena memang konten sudah
disediakan, kita tinggal memilih saja.
Tapi jika mungkin suatu waktu Scripts WordPress tampak tidak ada.
Silahkan klik >> Softaculous Apps Installer

Gambar 3.8 Softaculous Apps Installer

Kemudian cari >> Logo wordpress yang menyerupai huruf W itu. Biasanya
wordpress ada di bagian paling atas, seperti gambar dibawah ini.

Gambar 3.9 Cari logo Wordpress

39

Baik anda temukan scripts Wordpress di Tampilan awal Cpanel atau di

Softaculous Apps Installer.
Nanti anda pun akan diarah kan ke Menu Install Wordpress.
Setelah itu Klik >> Install

Gambar 3.10 Contoh Menu Install Wordpress

Kemudian anda akan masuk di Software Setup

Gambar 3.11 Install Wordpress Software Setup

40

Choose Protocol, otomatis tersedia pilihan ( http:// ) biarkan saja seperti

itu

Choose Domain, otomatis tersedia nama website yang anda sudah order.
Biarkan saja seperti itu

In Directory, akan ada tulisan ( wp ), Nah Tulisan ( wp ) ini harus

dihapus
Setelah itu kita akan masuk ke Site Settings
Untuk Site Settings ini biarkan saja sebagaimana mesti nya, karena nanti

pembahasannya akan saya paparkan di bab selanjutnya.

Site Name, Otomatis terisi ( My Blog)
Site Description, My Wordpress Blog
Setelah itu Scrool kursor kebawah, lanjutkan pengisian nya

Gambar 3.12 Proses Install Wordpress

41

Silahkan disimpan baik-baik Admin Account ini, karena ini nanti akan kita
gunakan terus di menu Dashboard yang akan kita bahas setelah bab ini.

Admin Username

: Otomatis diberikan username standar

Admin Password

: Otomatis diberikan password standard

Silahkan Username & Password di ganti sesuai dengan keinginan anda dan
jangan lupa Simpan Username & Password ini baik-baik, ini digunakan
untuk masuk ke menu Dashboard di Bab selanjutnya.
Admin E-mail
:
Biasanya kita diberikan email
professional
Kemudian kita masuk ke Choose Language
Select Language untuk pilihan bahasa, di bagian Select Language anda
bisa memilih bahasa yang ingin di gunakan, bisa Indonesia. Silahkan sesuaikan
dengan yang rekan-rekan kehendaki. Namun biar seragam dengan tutorial kami,
silahkan pilih Language default saja (English).
Select Theme
Theme / Template Wordpress adalah Desain jadi atau desain siap pakai
untuk template kita. Jadi kita tidak perlu susah-susah buat template karena semua
sudah disiapkan oleh Wordpress. Tersedia banyak themes gratisan yang
disediakan.
Silahkan pilih sesuai yang diinginkan. Jika ingin memilih bisa klik tanda
panah seperti di gambar. Kemudian sebelum kita meng-Klik Install, jangan lupa
anda menuliskan alamat email di menu Email Installation Detail To.
Email installation Detail to Ini berfungsi, jika sewaktu-waktu kita lupa
username dan password, maka kita bisa mencari di e-mail yang kita masukan.

42

Setelah itu Klik >> INSTALL

Gambar 3.13 proses pemilihan themes dan bagian akhir Installasi Wordpress
Tunggu kira-kira tak lebih dari 1 menit, website yang anda install akan aktif.
Namun untuk hal ini tergantung sinyal jaringan anda. Semakin kuat jaringan
semakin cepat proses install selesai dan sebaliknya.

Gambar 3.14 Proses Installasi Wordpress sedang berlangsung

43

Jika

sudah

maka

teman-teman

akan

mendapatkan

keterangan

Congratulations, The Software Was Installed Successfully.

Wordpress

has

been

successfullu

installed

at

http://namawesbsiteanda.com sangat mudah sekali melakukan proses penginstallan website berbasis Wordpress ini. Cukup anda mengikuti rangkaian yang
sudah saya buat dan website anda pun siap digunakan. Alhamdulillah.
Sekarang teman-teman bisa mengunjungi website teman-teman. Silahkan
klik nama website teman-teman sekarang. Misal yang saya buat untuk tutorial
pembuatan website berbasis wordpress ini .www.anakmudajagobikinwebsite.com

Gambar 3.15 proses installasi website berbasis Wordpress berhasil

Kunjungi nama website anda, silahkan buka browser anda dan klik nama
website yang anda sudah install, kita ingin memastikan bahwa website anda sudah
online dan bisa diakses di seluruh dunia (www.anakmudajagobikinwebsite.com).

Gambar 3.16 kunjungi website anda

44

Ini dia tampilan perdana website kita. Alhamdulillah, sampai disini

website yang sudah anda install sudah online dan bisa di akses diseluruh dunia.
Keren bukan. Tentu nya anda bisa puas dengan hasil kerja anda sendiri, sehingga
website anda bisa diakses secara luas.
Siapkan energi anda, karena setelah ini kita akan memasuki babak yang
lebih seru lagi. Silahkan anda bisa rehat terlebih dahulu. Nanti kita lanjut lagi di
bab selanjutnya.

Gambar 3.17 Tampilan website kita yang sudah online

45

BAB 4
PENGATURAN DASHBOARD
4.1 Dashboard
Dashboard website secara gampang nya adalah pusat kelola sebuah
website atau pusat pengaturan sebuah website. Baik sekarang kita akan mulai
mengoperasikan dashboard kita.
Ketik www.namawebsiteanda.com/wp-admin >> Enter
Contoh nama website saya www.anakmudajagobikinwebsite.com/wp-admin

Gambar 4.1 masuk dashboard

Lalu akan muncul seperti dibawah ini

Gambar 4.2 Login Masuk Dashboard

46

Username, diisi dengan username yang ada di admin account

Password, diisi dengan password yang kita masukan saat penginstallan,

silahkan dicek di bab sebelumnya.
Jika anda lupa atau bingung, anda bisa melihat materi sebelumnya di Bab

3.3 Admin Account, disitu ada bahasan tentang Username dan Password untuk
masuk ke menu Dashboard ini.
Silahkan centang kolom remember me, agar kita ndak perlu memasukan
lagi username dan password saat ingin masuk ke menu Dashboard lagi.
Kemudian klik >> Login untuk masuk ke Dashboard

Gambar 4.3 Tampilan Dashboard

47

Inilah tampilan Dashboard pertama kali kita login dan disinilah bagian
dalam dari sebuah website yang anda akan kelola sebentar lagi. Selamat memulai
petualangan perdana anda membuat website. Sampai sini anda sudah bisa
memulai melakukan aktivitas di Dashboard anda.
4.2 Themes
Mungkin ada diantara anda yang kurang puas dengan tampilan themes
yang ada, ini wajar karena setiap kita memiliki selera yang berbeda-beda. Nah
terusin bacanya ya, karena sebentar lagi kami akan membantu anda untuk
mengganti tampilan website anda.
Seperti yang sudah dijelaskan dihalaman sebelumnya, bahwa Theme /
Template Wordpress adalah Desain jadi atau desain siap pakai untuk template
kita. Jadi kita tidak perlu susah-susah membuat template lagi karena semua sudah
disiapkan oleh Wordpress. Ini adalah salah satu dari sekian kelebihan Wordpress,
yaitu tersedia banyak themes gratisan yang bisa gunakan. Berikut tampilan
website kita sebelum dirubah

Gambar 4.4 Tampilan website online kita

48

Mari sekarang kita mulai untuk merubahnya dan pastinya akan menjadi
hal yang menyenangkan untuk anda.
Untuk merubahnya silahkan cari menu Appearance >> Themes

Gambar 4.5 Tools Themes

Akan banyak sekali tampilan yang diberikan oleh Wordpress, silahkan
anda pilih sesuai dengan yang anda suka. Jika anda ingin melihat tampilan real
dari sebuah Themes agar anda semakin Mantap, anda bisa memilih Live Preview.
Live Preview adalah portofolio website secara online yang bisa anda lihat
sebelum mengambil keputusan untuk menguatkan selera anda terhadap pilihan
Themes untuk website anda.
Jika dirasa dah cocok silahkan klik tombol Activate. Dalam hal ini kami
mencontohkan memilih Themes Twenty Fifteen. Perlu dipahami bahwa setiap
themes memiliki pengaturan yang berbeda satu sama lain.

49

Themes Twenty Fifteen. Klik >> Activate

Gambar 4.6 pilihan themes yang tersedia di wordpress

Themes Twenty Fifteen telah aktif dan anda bisa melihat tampilan website
Twenty Fifteen.

Gambar 4.7 Themes Twenty Fifteen

50

Dan hasil dari themes Twenty Fifteen yang sudah diaktifkan dapat dilihat,
untuk melihat hasilnya anda sudah bisa me-refresh dengan cara ketik kembali
nama website yang anda buat. Contoh www.anakmudajagobikinwebsite.com

Gambar 4.8 Tampilan Themes Twenty Fifteen yang dipilih

Kemudian jika anda masih ingin merubah tampilan themes website anda
karena dirasa kurang pas, anda bisa mengulang kembali alurnya.
Klik menu Apperance >> Themes >> lalu klik Add New

Gambar 4.9 pemilihan themes yang sesuai selera

51

Sekali lagi kami sampaikan tersedia sangat banyak themes gratisan dari
wordpress yang bisa anda gunakan untuk tampilan website anda. Mungkin dari
sekian banyak pilihan itu ada yang menarik hati anda untuk memilihnya hehehe.
Yuk lanjut lagi.

Gambar 4.10 Themes yang tersedia

Sampai disini banyak sekali Themes-themes gratisan yang disuguhi oleh
wordpress, dan anda dijamin tidak akan bosen dengan tampilan website anda,
karena anda sesuka hati bisa mengganti themes tampilan website anda.
Namun tetap ada beberapa yang harus diperhatikan oleh kita, yaitu tidak
terlalu sering menggonta-ganti themes, karena setiap pergantian themes ikut
mempengaruhi pengaturan yang ada. Setiap themes yang dipilih punya
kekurangan dan kelebihan masing-masing dan kita harus mempelajari lagi setiap
themes yang kita inginkan. Paling tidak untuk mengganti sebuah themes 3-6 bulan
sekali, namun karena ini proses pembelajaran maka bisa dimaklum kan. Hehehe.

52

Yuk kita mulai bertualang mencari themes dengan model lain, mengingat
begitu banyak tersedia themes-themes gratisan di Google yang mungkin sesuai
dengan yang anda harapkan. Yupzz kembali akan kami berikan caranya.
Silahkan kunjungi Google atau mesin pencari lainnya, Klik >>
Google.com

Gambar 4.11 alternatif mencari themes lain

Ketik free themes wordpress atau free download themes wordpress
atau themes wordpress gratisan.
Dalam hal ini saya mencontohkan ketik >> free themes wordpress >>
Enter

53

Gambar 4.12 pencarian themes wordpress

Silahkan dipilih sesuai selera anda, dalam hal ini saya memilih langsung
dari website penyedia yaitu www.wordpress.org/themes
4.3 Apa sih bedanya wordpress.com dengan wordpress.org?
Wordpress.com adalah website resmi wordpress yang memberikan
layanan subdomain gratisan untuk membuat blog berbasis Wordpress. Namun
tetap untuk menggunakan subdomain wordpress yang gratisan terdapat
keterbatasan di banding dengan layanan wordpress berbayar.
Wordpress.org adalah website resmi Wordpress yang menyediakan
perangkat lunak CMS Wordpress. Untuk menggunakan nya kita masih harus
mendownload dan penginstallan.

54

Nah sekarang udah tau kan bedanya wordpress.com dan wordpress.org,

moga anda sudah gak bingung lagi.

Gambar 4.13 tampilan wordpress.org

Dan ini tampilannya, sekarang anda bisa memilih, lagi-lagi sesuai selera,
dalam hal ini saya memilih >> Themes Corbusier. Kemudian klik menu
Download.
Sampai disini simpan hasil download kita di folder yang mudah kita ingat.
Misal saya menyimpan data di Folder D >> Download >> Themes.
Maka nanti pada saat saya meng-upload themes saya akan mengambil data dari
Folder D >> Download >> Themes.
Jika sudah didownload, anda bisa meng-upload themes yang sudah anda
miliki itu.
Langkah nya masih sama, yaitu masuk ke menu Appereance >> Themes

55

Klik >> Upload Theme seperti gambar dibawah ini.

Gambar 4.14 cara upload Themes

Kemudian klik menu Choose File >> lalu cari folder tempat menyimpan
data themes anda di PC / laptop anda.

Gambar 4.15 input themes yang sudah di download

Kemudian jika sudah data nya (seperti gambar 4.16) tampak di samping
Choose file terdapat Corbusier.1.3.zip >> silahkan langsung klik Install now

56

Gambar 4.16 proses input themes yang sudah di download

Terakhir akan tampak tampilan seperti ini, dan langsung klik >> Activate.

Gambar 4.17 proses Installasi themes website

Tunggu beberapa saat, mungkin sedikit makan waktu untuk Loading,
tergantung sinyal dan jaringan internet anda. Jika sudah selesai ketik nama
website anda di Tab baru atau Refresh website anda. Lihat hasilnya, tampilan
themes anda akan berubah.

57

Tampilan website kita saat ini sudah berubah.

Gambar 4.18 Tampilan website kita sudah berubah

Sampai disini pembahasan tentang Themes selesai, jika ada masalah yang
sulit anda pahami silahkan jangan sungkan-sungkan menghubungi saya. Dengan
senang hati saya akan membantu anda.

58

BAB 5
INSTALL PLUGIN
5.1 Plugin
Sebelum kita install plugin, mari kita cari tahu terlebih dahulu apa itu
Plugin? Plugin adalah fitur Wordpress atau sebuah software yang dirancang
sedemikian canggih dan mempunyai fungsi tertentu untuk sebuah website
berbasis Wordpress. Jadi plugin wordpress adalah sebuah fitur tambahan yang
difasilitasi wordpress, ada yang gratisan namun ada juga yang berbayar. Anda
bisa menggunakan sesuai kebutuhan dan tentunya mempengaruhi dari kwalitas
sebuah website. Sekali lagi saya tegaskan tentunya disesuaikan dengan kebutuhan
website kita.
Apa itu Install Plugin? Secara sederhana nya Install plugin adalah proses
pemasangan atau proses meng-aktifkan sebuah plugin agar fungsi dari sebuah
plugin yang dipasang dapat dimanfaatkan.
Apa manfaat plugin? Secara jelas diawal bab ini, dijelaskan bahwa fungsi
atau manfaat dari sebuah plugin adalah untuk meningkatkan kwalitas website
wordpress kita. Dengan kata lain plugin meningkatkan fungsi tertentu yang
bekerja untuk meningkatkan website kita.

59

5.1.1 Plugin All In One SEO pack

All In One SEO Pack adalah sebuah plugin dari WordPress yang
menyesuaikan pengaturan mesin pencari untuk setiap artikel yang ditarget dalam
kata kunci tertentu. Untuk plugin All In One SEO Pack ini ada 2 versi, versi
gratisan dan juga versi berbayar. Dalam buku ini kita akan membahas penggunaan
plugin All In One SEO Pack versi gratisan.
Apa sih beda nya plugin All In One SEO Pack yang Gratisan dengan
yang berbayar, jelas berbeda ya, untuk plugin All In One SEO Pack yang gratisan
kita akan melakukan input kata kunci secara manual, namun untuk yang berbayar
anda sudah tinggal duduk manis saja, karena plugin sudah menyesuaikan dengan
apa yang disukai mesin pencari.
Lantas anda mungkin bertanya, apa sih fungsi plugin All In One SEO
Pack ini? jadi plugin ini berfungsi untuk meningkatkan posisi kita di mesin
pencari terutama mesin pencari google, agar artikel kita atau produk yang kita
pasarkan di sukai mesin pencari google. Gampang nya biar website kita bisa
masuk halaman terbaik di google.

60

Langsung aja kita praktek lagi Klik Plugins >> Add New

Gambar 5.1 install plugin

Silahkan amati tulisan All in one SEO pack yang saya lingkari, kotak itu
semula kosong, jadi silahkan anda tulis dikotak tersebut All In One Seo Pack.
Setelah ditulis kemudian tekan >> Enter

Gambar 5.2 plugin All In One SEO Pack

61

Kemudian akan ada tampilan seperti ini, Silahkan anda klik >> Install
Now

Gambar 5.3 Install Plugin All In One SEO Pack

Namun apabila anda ingin mempelajari Plugin ini terlebih dahulu silahkan
klik >> More Details (tapi saya tidak menyertakan pembahasannya di buku ini).
Sebagai info plugin ini termasuk salah satu plugin yang sangat digemari banyak
orang terutama para pelaku SEO, karena plugin ini sangat membantu
mempengaruhi posisi website kita di mesin pencari google.
Anda mungkin bertanya lagi itu SEO? Akan saja jelaskan sedikit nanti di
bab Selanjutnya. Namun ada juga yang menggunakan selain plugin ini, namun

62

sekali lagi ini tergantung kebiasaan dan kesukaan terhadap plugin. Kalau saya
karena dari awal sudah menggunakan plugin ini, jadi saya pun membuat tutorial
dalam buku ini untuk anda plugin All In One SEO Pack.
Setelah proses install plugin selesai, proses selanjutnya adalah Aktivasi
plugin. Nanti akan muncul seperti gambar di bawah ini.
kemudian klik >> Active Plugin

Gambar 5.4 Activate plugin All In One SEO Pack

Dan Plugin All In One Seo Pack yang anda Install pun telah aktif.

Gambar 5.5 Proses aktivasi plugin selesai

Plugin ini telah terinstall, namun tetap harus di isi agar proses website kita
di sukai mesin pencari google terwujud.

63

Plugin All In One SEO Pack telah terpasang di Dashboard website kita.
Jika anda ingin memastikannya, silahkan Klik menu >> Plugins dan terlihat
plugin All In One Seo Pack ada di antara plugin-plugin yang ada di Dashboard
anda.

Gambar 5.6 List Plugin yang telah di aktivasi

5.1.2 Google XML Sitemaps
Apa itu Plugin Google XML Sitemaps? Plugin Google XML Sitemaps
adalah sebuah plugin yang membantu menavigasi halaman di situs Web Anda.
Singkatnya, sebuah Google XML Sitemaps merupakan sarana untuk membiarkan
mesin pencari, tahu tentang semua halaman yang ada di website Anda, dan juga
untuk menunjukkan link di situs Anda yang paling penting. Meskipun tidak
dirancang khusus untuk membantu meningkatkan SEO (search engine
optimization) peringkat mesin pencari, sitemap XML akan memungkinkan mesin
pencari untuk menjelajah situs Anda lebih baik.
Hal ini penting karena memastikan semua halaman di situs Web Anda
diindeks sesuatu yang sangat penting bagi situs-situs baru, website yang belum
membangun banyak backlink.

64

Apa fungsinya? Fungsi plugin Google XML Sitemaps singkatnya agar

mesin pencari mudah mencari tahu keberadaan website kita. Ibaratnya dengan
plugin Google XML Sitemaps menjadi peta penunjuk arah mesin pencari untuk
mengunjungi dan mengetahui website kita.
Kembali Klik >> Plugins >> Add New

Gambar 5.7 plugin

Ketik di Kotak Kanan Atas >> Google XML Sitemaps kemudian tekan >> Enter

Gambar 5.8 Plugin Google XML Sitemaps

65

Kemudian akan ada tampilan seperti ini, Silahkan anda klik >> Install
Now

Gambar 5.9 Plugin Google XML Sitemaps

Selanjutnya Klik >> Activate Plugin

Gambar 5.10 Activate Plugin Google XML Sitemaps

66

Plugin Google XML Sitemaps pun telah terinstall.

Gambar 5.11 Plugin Google XML Sitemaps telah terinstall

5.1.3 Social Sharing
Sekarang kita ingin meng-install plugin Social Sharing. Sebelumnya kita
perlu mengenal terlebih dahulu plugin Social Sharing. Apa itu Social Sharing?
Plugin Social Sharing adalah sebuah plugin berbagi sosial dengan mudah, dengan
kata lain plugin Social Sharing ini membantu anda atau pengunjung website yang
ingin membagikan kiriman anda / postingan / produk anda ke jejaring sosial yang
pengunjung anda miliki. Seperti Media sosial Facebook, twitter, Google Plus dll.
Memang untuk plugin ini disediakan fasilitas Gratisan dan berbayar,
namun jangan khawatir untuk fasilitas yang gratisannya saja sudah sangat
mencukupi sekali, maka saya plugin berbagi sosial ini cocok untuk kita pasang di
Dashboard kita.
Klik menu Plugins >> Add New
Kemudian tulis Social Sharing di kotak kanan bagian atas

67

Gambar 5.12 mencari plugin Social Sharing

Selanjutnya Klik >> Install Now

Gambar 5.13 Install Plugin Social Sharing

68

Klik >> Activate Plugin

Gambar 5.14 Aktivasi Plugin Social Sharing

Dan plugin pun terinstall.

69

BAB 6
SETTINGS
6.1 Settings
Setelah kita menyelesaikan pemasangan Plugins, sekarang kita masuk ke
menu Settings atau pengaturan.
Menu Setting atau pengaturan adalah menu yang mengatur setiap bagian
content wordpress. Pada bagian ini kita akan membahas cara menggunakan dan
mengoptimalkan fitur settings. Kita akan membahas mulai dari General setting,
writing setting, reading dll.
Sebelum kita masuk ke menu-menu yang lainnya, sudah sepatutnya kita
mengatur menu-menu dasar yang akan berpengaruh terhadap website kita dan
juga SEO yang bisa mencari perhatian mesin pencari terhadap website kita.
Sehingga website kita diminati untuk terus dikunjungi mesin pencari.
Sesuai apa yang saya janjikan sebelumnya, saya akan menjelaskan apa itu
Search Engine Optimization atau yang lebih dikenal dengan SEO. Search Engine
Optimization adalah tehnik atau proses optimasi mesin pencari agar website kita
disukai mesin pencari dan direkomendasikan ditempat pencarian terbaik. Jadi
intinya kita menggunakan tehnik ini agar website kita bisa nangkring dihalaman
pertama mesin pencari (google, yahoo, bing dan sejenisnya), namun dalam hal ini
diharapkan website kita bisa masuk dihalaman pertama google. Namun tetap tidak
ada yang instan, semua butuh proses.

70

Saya ijin dalam Bab ini agak sedikit melebar pembahasannya ke materi
SEO, karena memang bab ini ada kaitannya dengan materi SEO. Sedikit akan
saya paparkan seperti apa manfaat SEO.
Misal, anda mau mencari toko penjual berbagai macam kreasi kerajinan
flanel, kemudian anda membuka Search Engine Google.
Buka browser Google >> kemudian ketik Toko Flanel

Gambar 6.1 fungsi Optimasi mesin pencari SEO

71

Nah sengaja saya lingkari yang urutan kedua, karena itu website buatan
saya hehehe. Untuk pencarian kata kunci Toko Flanel website saya urutan
kedua dihalaman pertama google. Nah ini contoh gampang nya fungsi dari SEO
Search engine optimization.
6.2 General Settings
General Settings adalah pengelolaan pengaturan website secara umum.
Mulai dari pengaturan title, Tagline, alamat email, format tanggal dll.
Langsung kita Pilih menu Settings >> General

Gambar 6.2 Menu General Settings

72

Lalu anda akan di arahkan ke General Settings seperti tampak pada

gambar 6.3

Gambar 6.3 pengisian General Settings

Untuk pengisian di menu General Settings ini, yang harus diisi
diantaranya ;
1. Site Title , judul Website yang akan tampil di bagian atas website kita
( Misal : Anak Muda jago Bikin Website)
2. Tagline, berisi tentang tagline untuk website kita / sub judul, misal
tagline nya (Energik, manfaat dan penuh keberkahan)
3. Wordpress

address

(URL),

khusus

(www.namawebsiteanda.com)

dalam

ini

otomatis
hal

tertulis
ini

www.anakmudajagobikinwebsite.com
4. Site Address (URL), ini pun otomatis terisi dan jangan diutak-atik
biarkan sebagaimana mestinya

73

5. Email Address, ini adalah alamat email admin website. Pastikan

menggunakan alamat email yang masih aktif agar nanti jika ada
pemberitahuan, update dsb, akan diberitahu di email ini
6. Membership, ini adalah fitur untuk keanggotaan website kita /
pembentukan komunitas
7. Date format, format yang diinginkan untuk pengaturan tanggal, pilih
sesuai keinginan
8. Time Format, format yang diinginkan untuk pengaturan jam / waktu
9. Week starts On, format hari ingin dimulai dari hari apa
10. Site language, pemilihan bahasa, silahkan disesuaikan dengan
keinginan, saran saya biarkan secara Default saja (English united
states) tapi mau pilih yang lain tdk masalah sesuai selera.
Terakhir jika dirasa semua sudah sesuai dengan selera anda.
Selanjutnya Klik >> Save Changes

Gambar 6.4 pengisian menu General Settings

74

6.3 Writing Settings

Writing Settings adalah menu pengaturan yang berkaitan dengan
pembuatan tulisan di website yang sedang kita kelola.
Cari menu Settings >> Writing

Gambar 6.5 Menu Writing Settings

Tampilan Writing Settings

Gambar 6.6 Halaman Menu Writing Setting

75

Menu Writing Setting

-

Default Post Category, mengatur artikel atau postingan secara default ke

bagian uncategorized atau pilih kategori yang diinginkan sebagai default.

Default Post Format, pilih menu standard

Update Services, berfungsi ketika kita mempublikasikan postingan atau

artikel baru , maka WordPress secara otomatis akan memberitahu layanan
update

website

kita.

Biasanya

hanya

disiapkan

satu

link

(http://rpc.pingomatic.com).
Nah, dalam pembahasan writing settings ini, saya tambahkan beberapa
layanan PING (Paket Interbet Gopher). Silahkan anda tulis ulang secara detail ke
bagian update services atau anda bisa menghubungi saya via email, nanti akan
saya kirim copy-an nya via email.

http://rpc.pingomatic.com/

http://1470.net/api/ping

http://api.feedster.com/ping

http://api.moreover.com/ping

http://api.moreover.com/RPC2

http://api.my.yahoo.com/RPC2

http://api.my.yahoo.com/rss/ping

http://bitacoras.net/ping

http://blog.goo.ne.jp/XMLRPC

http://blogmatcher.com/u.php

http://blogsearch.google.com/ping/RPC2

76

http://bulkfeeds.net/rpc

http://coreblog.org/ping/

http://mod-pubsub.org/kn_apps/blogchatt

http://ping.amagle.com/

http://ping.bitacoras.com

http://ping.blo.gs/

http://ping.cocolog-nifty.com/xmlrpc

http://ping.feedburner.com

http://ping.rootblog.com/rpc.php

http://ping.syndic8.com/xmlrpc.php

http://ping.weblogalot.com/rpc.php

http://ping.weblogs.se/

http://pingoat.com/goat/RPC2

http://rcs.datashed.net/RPC2/

http://rpc.blogbuzzmachine.com/RPC2

http://rpc.blogcatalog.com/

http://rpc.blogrolling.com/pinger/

http://rpc.icerocket.com:10080/

http://rpc.newsgator.com/

http://rpc.pingomatic.com/

http://rpc.technorati.com/rpc/ping

http://rpc.weblogs.com/RPC2

http://topicexchange.com/RPC2

77

http://www.a2b.cc/setloc/bp.a2b

http://www.bitacoles.net/ping.php

http://www.blogdigger.com/RPC2

http://www.blogoole.com/ping/

http://www.blogoon.net/ping/

http://www.blogpeople.net/servlet/weblogUpdates

http://www.blogroots.com/tb_populi.blog?id=1

http://www.blogshares.com/rpc.php

http://www.blogsnow.com/ping

http://www.blogstreet.com/xrbin/xmlrpc.cgi

http://www.lasermemory.com/lsrpc/

http://www.mod-pubsub.org/kn_apps/blogchatter/ping.php

http://www.newsisfree.com/RPCCloud

http://www.newsisfree.com/xmlrpctest.php

http://www.popdex.com/addsite.php

http://www.snipsnap.org/RPC2

http://www.wasalive.com/ping/

http://www.weblogues.com/RPC/

http://xmlrpc.blogg.de/

http://xping.pubsub.com/ping/
Terakhir klik >> Save Changes

78

6.4 Reading
Reading settings adalah menu yang mengatur tentang tampilan tulisan
atau konten pada website.
Klik Menu Settings >> Reading

Gambar 6.7 Tampilan Reading Settings

-

Front Page Displays, biarkan diposisi your latest posts

Blog pages show at most, mengatur jumlah postingan yang ingin diatur
diawal (tulis saja 10)

Syndication feeds show the most recent, mengatur jumlah postingan dan
isi yang tertampil di RSS. (tulis saja 10 item ). RSS anda adalah
www.namawebsiteanda.com/feed

79

For each article in a feed show, pilih saja full text (artinya menampilkan
artikel secara keseluruhan/penuh) atau pilih summary (menampilkan
artikel secara sebagian/ringkasan).

Search Engine Visibility, biarkan saja tanpa tercentang, maksudnya kalau

di centang website kita tidak ingin di temukan mesin pencari.
Terakhir klik >> Save Changes

6.5 Discussion
Discussion Settings adalah menu yang mengatur tentang komentar yang
masuk.
Klik Settings >> Discussion

Gambar 6.8 settings Discussion

80

Tampilan halaman Discussion Settings

Gambar 6.9 Tampilan menu Discussion Settings

Untuk Discussion Settings biarkan saja sesuai tampilan default yang ada.
Intinya nanti anda membolehkan adanya komentar masuk dari pengunjung
website anda. Sebelum berkomentar pengunjung website anda harus mengisi
nama dan email. Dan setiap ada email yang masuk, akan ada pemberitahuan via
email.

81

Gambar 6.10 Tampilan menu Discussion Settings

Anda scrool kebawah, ini masih tampilan menu Discussion Settings,
dibagian bawah ada Default Avatar ini adalah icon gambar yang merupakan
avatar seseorang di Internet.
Centang kotak Show Avatar yang nantinya akan muncul avatar setiap
menulis komentar di website kita. Jika ada dari pengunjung anda yang tidak punya
icon avatar maka nanti akan menggunakan Default Avatar.
6.6 Media
Media Settings atau pengaturan Media lebih tepatnya berhubungan dengan
ukuran sebuah gambar yang akan ditampilkan di website kita.

82

Klik Settings >> Media

Gambar 6.11 Settings Media

Tampilan halaman Pengaturan Media

Gambar 6.12 Tampilan halaman Pengaturan Media

83

Biarkan saja default settingan Media seperti apa adanya. Namun disini
tetap saya ingin memberikan info, bahwa ada 3 macam pengaturan ukuran
gambar. Yaitu ;
Thumbnail size (ukuran thumbnail), Medium size (ukuran gambar sedang),
Large size (ukuran gambar besar).
Kemudian klik >> Save Changes
6.7 Permalinks
Permalink adalah format alamat sebuah website dari suatu postingan.
Mengatur permalink dengan benar bertujuan agar alamat website kita dapat
terindeks dengan mesin pencari secara mudah. Gampang nya agar website kita
dapat ditemukan oleh pengunjung kita melalui Search Engine atau mesin pencari.
Cara pengaturan menu permalink klik
Settings >> Permalinks

Gambar 6.13 pengaturan permalinks

84

Tampilan Menu Permalink Settings

Gambar 6.14 Tampilan Menu Permalink

Pada Menu Permalinks Setting, langsung saja anda pilih >> Post Name.
ini bertujuan agar website kita Search Engine Friendly. Agar website kita semakin
disukai oleh mesin pencari. Ketika memilih post name, maka link postingan akan
serupa dengan judul postingan yang kita buat.

85

Jika anda membuat judul Prestasi Pemuda Indonesia Di Kancah

Internasional,

maka

link

postingan

akan

seperti

ini

www.namawebsiteanda.com/prestasi-pemuda-indonesia-di-kancah-internasional
Nah, sangat simple bukan, setelah itu klik >> Save Changes.

Gambar 6.15 Contoh Tampilan permalink menggunakan post name

6.8 Setting Plugin
Kemudian kita masuk ke Menu Setting untuk setting menu Plugin yang
sudah kita install, rata-rata plugin yang sudah kita install masuk ke Menu Setting,
namun khusus plugin All In One SEO Pack dia ada di posisi paling atas, persis
dibawah Dashboard.

86

6.8.1 Google XML Sitemaps

Klik Menu Setting >> Google XML Sitemaps

Gambar 6.16 Menu Setting Plugin Google XML Sitemaps

Gambar 6.17 Google XML Sitemaps

Klik >> Update Options

87

6.8.2 Social Sharing

Untuk menu Social Sharing klik GetSocial posisi menu tepat dibawah
menu Settings.

Gambar 6.18 Tampilan Menu Social Sharing (GetSocial)

Klik >> Activate your account

Gambar 6.19 Proses aktivasi fungsi plugin Social Sharing

88

Setelah di klik Active your Account, maka akan muncul keterangan

Congratulations !

Gambar 6.20 aktivasi fungsi plugin Social Sharing berhasil

Selanjutnya anda silahkan memilih tampilan Social Sharing untuk website
anda, sesuai dengan selera, Ada banyak sekali pilihan yang disediakan.
Silahkan anda klik >> Horizontal Sharing Bar klik >> Install App

Gambar 6.21 pilihan tampilan plugin social sharing untuk website kita

89

Masih tampilan pengaturan plugin social sharing, silahkan scrool kursor

kebawah.

Gambar 6.22 penambahan tools Media sosial yang ingin ditampilkan

Untuk bagian pengaturan Networks di menu Social Sharing ini, silahkan
anda tambahkan untuk tombol media sosial yang ingin anda tampilkan nanti di
website anda. Jadi memudahkan pengunjung website anda jika mereka ingin
membagikan kiriman anda.
Jika sudah lanjutkan scrool kursor kebawah lagi

Gambar 6.23 aktivasi share label di menu Social sharing

90

Klik >> Share Label dari OFF menjadi ON

Gambar 6.24 Share label ON

Untuk Size anda bisa memilih sesuai selera, dalam hal ini pilih saja
Medium.
Shape & Responsive itu menu berbayar, Untuk Posision / letak nya anda
bisa pilih sesuai selera.
Jika sudah klik >> Save and Activate

Gambar 6.25 Proses akhir Save and Active plugin Social Sharing

91

6.8.3 All In One SEO Pack

Klik Menu All In One SEO Pack >> General

Gambar 6.26 All In One SEO Pack

Akan ada tampilan seperti ini,

Gambar 6.27 All In One SEO Pack Plugin Options

92

Silahkan scrool kebawah, untuk plugin All In One SEO pack memang agak
banyak, namun nanti akan kami bantu isi dimana letak-letak penting nya saja,
yang perlu anda ketahui.

Gambar 6.28 Pengaturan plugin All in One SEO Pack

Use Original Title itu di Klik >> Enabled, artinya diaktifkan. Fungsinya
agar title terdeteksi oleh mesin pencari Google.

Gambar 6.29 Pengaturan plugin All in One SEO Pack

93

Home Title, isi dengan Judul yang ingin ditargetkan di mesin pencari, bisa
juga nama website. Misal saya ingin yang ditargetkan adalah Anak Muda
Jago Website, maka Home title saya adalah Anak Muda Jago website.

Home Description, deskripsi / keterangan singkat website kita, jelas,

padat, sederhana dan dapat diterima banyak kalangan. Isi maks 160
karakter

Home Keywords (Comma Separated), isi dengan kata kunci yang ingin
dikejar, bisa lebih dari 1 kata kunci yang universal dan dipisahkan dengan
koma. Contoh (anak muda jago bikin website, pemuda Indonesia jago
website, pelatihan website untuk anak muda, dst dst) kalau bisa
usahakan tidak lebih dari 10 kata kunci tertarget.
3 point ini wajib diisi dengan tepat dan sesuai target kata kunci yang

ditarget, sehingga ketika para pencari menuliskan apa yang dia cari dimesin
pencari google. Website kita disukai google, dan google merekomendasikan
website kita.
Misal kita mengejar kata kunci Prestasi anak muda Indonesia, ketika ada
yang menulis kata kunci itu di mesin pencari google, google atau mesin pencari
yang sejenis merekomendasikan website kita. Menarik sekali bukan.

94

Jika sudah scrool ke bawah klik update Options

Gambar 6.30 Update Options Menu All In One SEO pack

95

BAB 7
PENGISIAN ARTIKEL
7.1 Post
Nah sekarang kita mulai memasukkan isi dari apa yang ingin kita
tampilkan. Disinilah letaknya kita untuk mempublikasikan produk yang ingin kita
pasarkan, ide-ide kebaikan yang ingin kita sampaikan bahkan disini tempat kita
memasarkan keahlian atau jasa yang kita miliki, seperti jasa service pompa air,
jasa perbaikan AC, jasa pembuatan website dll.
Sebelumnya kita perlu tau apa itu Menu Posts? Menu Posts adalah fitur
utama Wordpress dalam membuat berbagai postingan/artikel/konten website. Nah,
saya yakin anda adalah orang yang sering browsing di Internet, ketika anda
menemukan artikel di sebuah situs website, lalu anda membaca nya, apa yang
anda baca itulah disebut postingan. Saya akan kupas tuntas bagaimana cara
membuat postingan untuk anda. Berikut langkah awal dalam memasukan
postingan tersebut.
Yuk langsung aja kita mulai cara mem-posting sebuah tulisan/artikel.
Contoh postingan artikel yang sudah di publikasikan

96

Gambar 7.1 Contoh postingan artikel

Langkah awal silahkan cari menu Posts >> Add New

Gambar 7.2 proses awal pengisian Artikel

97

Tampilan awal Post

Gambar 7.3 tampilan awal menu Post

Kemudian Sebelum memulai perhatikan gambar dibawah ini, gambar yang
dilingkari Show/hide kitchen sink menyimpan Tools yang lain. Iya tombol ini
adalah tombol untuk menampilkan dan menyembunyikan menu tambahan di
menu fitur Post.
Silahkan langsung klik saja >> Show/hide kitchen sink

Gambar 7.4 menampilkan fitur tambahan di menu Post

98

Menu tambahan yang sudah ditampilkan.

Gambar 7.5 Fitur tambahan di menu post

Enter title here gampang nya adalah Judul yang mau kita berikan untuk
artikel kita atau Produk/jasa yang kita pasarkan.
Nah dibagian bawahnya adalah konten / isi artikel/produk yang ingin di
Publish atau dipasarkan ke khalayak ramai.
Untuk gambar yang dilingkari itu, sudah dijelaskan di paragraph atas
masih di Bab ini.

Gambar 7.6 membuat postingan baru

Enter Title Here / Judul dalam contoh ini saya mengisi Prestasi Pemuda
Indonesia di Kancah Internasional.

99

Kemudian sebelum masuk isi, silahkan anda amati tools-tools yang saya
beri kotak dibawah ini. Tools ini saya yakin sudah sangat familiar untuk anda, ya
Tools ini ada di Ms. Word di laptop atau PC anda. Tools ini yang sering anda
gunakan untuk menulis surat, menulis program, proposal, tugas sekolah, tugas
kuliah bahkan tugas kantor. Jadi sangat familiar untuk anda semua dan saya yakin
anda mampu mengoperasikannya.
Namun dalam hal ini akan saya jabarkan pula, meskipun saya optimis
sebagian anda sudah bisa mengoperasikannya, Tapi tetap saya akan membimbing
anda dan inilah kelebihan buku ini anda akan kami bimbing dari awal sampai
akhir.

Gambar 7.7 contoh pengisian artikel di menu Post

100

7.2 Bold
Fungsi Tools Bold untuk menebalkan huruf atau angka.
Anda lihat seperti huruf B, yang saya lingkari itu, itu fungsi nya untuk
menebalkan huruf
Cara nya >> Blok tulisan yang ingin ditebalkan, Kemudian Tekan Tools
Bold.

Gambar 7.8 cara menebalkan tulisan di menu post

7.3 Italic
Fungsi Italic adalah untuk memiringkan tulisan / membuat tulisan miring.
Cara nya >> Blok tulisan yang ingin dimiringkan, Kemudian Tekan Tools
Italic (Tools yang sudah kami bulatkan).

101

Gambar 7.9 Italic memiringkan tulisan

7.4 Strikethrough
Fungsi Tools Strikethrough untuk mencoret, ini sangat berguna sekali
untuk anda yang ingin membuat harga Diskon, untuk barang dan jasa yang anda
tawarkan sehingga tampilan jadi lebih menarik.
Cara nya >> Blok tulisan yang yang ingin dicoret, Kemudian Tekan
Tools Strikethrough (Tools yang sudah kami bulatkan).

Gambar 7.10 Tools untuk mencoret tulisan

102

7.5 Bullets
Fungsi Tools Bullets membuat titik dengan simbol bulatan membentuk
tulisan yang teratur.
Caranya : Letakkan kursor dikolom kosong, Kemudian Tekan Tools
Bullets (Tools yang sudah kami bulatkan).
Kemudian mulai ketikan teks dan >> Enter
Jika dirasa sudah cukup penggunaan tools Bullets, Enter 2 kali untuk
menghilangkan penggunaan Tools Bullets ini.

Gambar 7.11 Penggunaan Tools Bullets

7.6 Numbering
Fungsi nya hampir sama dengan fungsi tools Bullets hanya saja untuk
yang ini berisi angka yang berurutan dan otomatis berganti tiap dilakukan enter.
Caranya : Letakkan kursor dikolom kosong, Kemudian Tekan Tools
Numbering (Tools yang sudah kami bulatkan).
Kemudian mulai ketikan teks dan >> Enter

103

Jika dirasa sudah cukup penggunaan tools Numbering, Enter 2 kali untuk
menghilangkan penggunaan Tools Numbering ini.

Gambar 7.12 penggunaan Tools Numbering

7.7 Quote
Tools Quote adalah fitur kutipan yang akan membuat tulisan tampak lebih
dominan atau mencolok dibanding tulisan yang lain sehingga akan lebih menarik
perhatian pengunjung website anda.
Cara nya >> Blok tulisan yang akan diberi kutipan, kemudian klik >>
Quote yang sudah saya lingkari itu.

Gambar 7.13 penggunaan Tools Quote

104

7.8 Horizontal Line

Fungsi Tools Horizontal Line adalah membuat garis lurus panjang.
Caranya >> letakkan kursor ditempat yang ingin berikan garis panjang
kemudian klik >> Horizontal Line

Gambar 7.14 Penggunaan Tools Horizontal Line

7.9 Align Paragraf
Fungsi Align Paragraf adalah mengatur posisi garis tepi paragraph. Align
dibagi menjadi 3 bagian, Align Left, Align Center, dan Align Right.
-

Align Left

: menjadikan tulisan tertata teratur di posisi kiri

Align Center : menjadikan tulisan tertata teratur di posisi tengah

Align Right

: menjadikan tulisan tertata teratur di posisi kanan

Cara nya >> Blok tulisan yang ingin diberi Align paragraf, kemudian klik
Align yang kita inginkan, contoh klik >> Align Center , maka otomatis tulisan
akan berada ditepian tengah.

105

Gambar 7.15 Penggunaan Tools Align Paragraf

7.10 Insert/Edit Link
Insert/Edit Link berfungsi untuk menghubungkan artikel kita ke halaman
website yang lain atau ke halaman website yang di link kan.
Cara nya >> Blok teks yang akan diberi link, lalu klik >> Insert Link
yang diberi tanda bulat.

Gambar 7.16 Penggunaan Tools Insert Link

Enter the destination URL
-

URL,

Isi

URL

dengan

Link

yang

kita

ingin

tuju.

Misal

www.namawebsitetujuan.com
-

Link Text, judul URL yang ingin kita link kan. Misal, Makanan khas
jakarta

106

Untuk Open Link in A New Tab di centang saja, agar nanti jika link nya di
klik orang, maka akan membuka Tab baru.
Lalu klik >> Add Link

Gambar 7.17 cara memasukkan link tujuan

Jika sudah di link kan tulisan akan biru, dan jika sudah di klik tulisan akan
mengarah ke link yang sudah di tuju.

Gambar 7.18 Contoh Tulisan yang sudah di Link kan

.

107

7.11 Remove Link

Remove Link adalah tools untuk menghapus tulisan atau gambar yang
sudah di link kan. Ini adalah kebalikan dari Insert link.
Caranya sama dengan Insert Link, yaitu Blok tulisan yang ingin di remove
link (dihapus link), kemudian klik >> Remove Link.

Gambar 7.19 Contoh menghilangkan tulisan yang sudah di Link kan

7.12 Insert Read More
Tools Insert Read More Tag berfungsi untuk memotong tulisan. Dalam hal
ini nanti tulisan akan tampil hanya sebagian saja pada tampilan halaman awal
website. Tulisan baru akan tampil secara utuh jika pengunjung website meng-klik
menu Read more.
Selain fungsi diatas,kita juga bisa menggunakan tools Insert Read More
untuk membuat pembaca penasaran kelanjutan artikel yang kita buat, sehingga
jika mereka ingin membaca lanjutannya mereka harus meng-klik Read More.
Fungsi selanjutnya juga membantu tampilan website kita tampak rapi dan
seragam.
Caranya >> letakkan kursor ditempat yang ingin di potong, kemudian
klik >> Insert Read More

108

Gambar 7.20 Cara menggunakan tools Insert Read More

Lalu akan tampak seperti gambar dibawah ini.

Gambar 7.21 Contoh memotong tulisan dengan tools Insert Read More
7.13 Distraction-Free Writing Mode
Mungkin ada diantara anda ada juga yang merasa pusing atau terganggu
dengan tampilan tools yang banyak disamping kiri dan kanan menu post. Ternyata
Wordpress juga sudah menyiapkan solusinya. Distraction-Free Writing Mode.
Distraction-Free Writing Mode berfungsi untuk menampilkan tulisan
secara full screen, sehingga membantu kita untuk lebih focus dalam membuat
postingan.

109

Cara mengaktifkan agar menu post jadi full screen adalah dengan mengklik >> tools Distraction-Free Writing Mode

Gambar 7.22 menggunakan Tools Distraction-Free Writing Mode

Contoh setelah di klik tools Distraction-Free Writing Mode, tampilan kiri
kanan menu post menjadi hilang

Gambar 7.23 Tampilan Tools Distraction-Free Writing Mode

Untuk memunculkan kembali tampilan ke semula, klik >> Escape

7.14 Heading Teks

Heading Teks adalah format teks jadi yang bisa langsung digunakan dan
Size nya berbeda satu sama lain.
Caranya >> Blok tulisan lalu pilih >> Heading yang ingin digunakan

110

Gambar 7.24 Tampilan Heading Teks

7.15 Underline
Underline adalah tools yang berfungsi membuat tulisan bergaris bawah.
Adapun cara untuk memberi garis bawah pada tulisan >> Blok tulisan yang ingin
digaris bawahi
lalu klik >> Underline yang bentuknya menyerupai huruf U.

111

Gambar 7.25 Cara menggunakan Tools Underline

7.16 Justify
Justify berfungsi melakukan pengaturan alignment paragraf sehingga
menjadi rata kiri dan rata kanan. Hal ini menjadikan tulisan / artikel tampak lebih
rapih dan lebih nyaman dilihat.

Gambar 7.26 Cara menggunakan Tools Justify

112

7.17 Text Color

Text Color berfungsi memberikan warna pada tulisan sehingga tampak
lebih mencolok dan lebih menarik. Jika anda bermaksud untuk menjadikan sebuah
tulisan tertentu cepat terlihat, anda bisa menggunakan tools ini sebagai pilihan.
Caranya >> Blok tulisan atau teks yang ingin diwarnai, lalu pilih >>
Justify

Gambar 7.27 Cara menggunakan Text Color

Hasil dari penggunaan warna untuk tulisan dengan menggunakan tools
Text Color

Gambar 7.28 Contoh penggunaan Tools Text Color

113

7.18 Paste As Text

Paste As Text berfungsi menyalin dan menyisipkan teks dari situs lain.
Jika Anda menyisipkan teks tanpa terlebih dahulu mengklik tools Paste As Text.
Mungkin kadang kita ingin tak membuang-buang waktu untuk mengetik ulang
sesuatu yang ada dalam bentuk lengkap di tempat lain . Inilah sebabnya mengapa
menyalin dan menyisipkan teks sangat nyaman dan disinilah penting nya tools
Paste As Text.
Caranya >> klik terlebih dahulu tools Paste as Text, setelah itu >>
tempelkan teks yang sudah anda copy.

Gambar 7.29 Cara menggunakan Paste as Text

7.19 Clear Formatting
Clear Formatting berfungsi untuk menghapus semua pengaturan teks yang
telah dilakukan. Dengan Tools ini kita dapat mengembalikan teks yang semula
sudah terformat kembali seperti awal.
Caranya >> Blok tulisan yang akan di hapus format pengaturannya,
kemudian klik tools Clear Formatting.

Gambar 7.30 Cara menggunakan Tools Clear Formatting

114

7.20 Special Character

Special Character berfungsi menambahkan simbol atau karakter khusus
pada artikel kita. Karena mungkin sewaktu-waktu kita memerlukan sebuah simbol
untuk artikel yang kita buat, seperti simbol matematika, dan lain sebagainya.
Caranya >> letakkan kursor ditempat yang ingin disisipkan simbol
Kemudian klik >> Special Character >> setelah itu akan muncul simbolsimbol karakter
Klik >> simbol yang diinginkan.

Gambar 7.31 Cara menggunakan Tools Special Character

Simbol Special character

Gambar 7.32 Pilihan Simbol yang ada di menu Special Character

115

7.21 Decrease Indent and Increase Indent

Decrease Indent and Increase Indent berfungsi melakukan pengaturan
jarak teks atau tulisan dari tepi kiri atau kanan. Biasanya digunakan untuk
menunjukkan suatu paragraf yang dianggap penting, bisa juga agar tulisan terlihat
lebih menarik.
Caranya >> sisipkan tools Decrease Indent pada paragraf yang ingin di
atur jaraknya dari tepian, kemudian klik Tools Decrease Indent.
Perlu dipahami Decrease Indent adalah lawan dari Increase Indent.

Gambar 7.33 Tools Decrease Indent and Increase Indent

7.22 Undo and Redo
Tools Undo dan Redo gambarnya menyerupai arah kekiri dan kekanan.
Undo berfungsi untuk mengembalikan tulisan ke data sebelumnya, adapun fungsi
Redo adalah memunculkan kembali tulisan atau teks yang sudah dihapus atau
terhapus sebelumnya. Singkat kata Undo berfungsi untuk membatalkan perintah
terakhir yang sudah dilakukan, sedangkan Redo adalah membatalkan perintah
Undo.
Cara nya >> Anda tinggal meng-klik tombol Undo atau Redo

Gambar 7.34 Tools Undo and Redo

116

7.23 Keyboard Shortcuts

Keyboard Shortcuts gambar menyerupai tanda baca berbentuk tanda
Tanya. Keyboard Shortcuts atau boleh juga kita sebut jalan pintas ini berfungsi
untuk memudahkan dan mempercepat kinerja kita didalam membuat postingan
atau artikel. Tools ini jelas membantu anda menghemat waktu dan proses anda
membuat postingan jadi terasa lebih cepat. Misal ketika anda ingin memblok
seluruh tulisan, anda tidak perlu memblok tulisan dari paragraf awal sampai
paragraf akhir, mungkin kalau tulisan kita hanya 1 atau 2 halaman, bisa kita
manual nge-blok nya, tapi jika jumlah tulisan kita mencapai ratusan halaman? hal
ini bisa diringkas dengan anda menekan tombol >> Ctrl + A maka secara
otomatis semua tulisan akan ter-blok secara menyeluruh. Jadi terasa lebih ringan
kerjaan kita bukan?.

Gambar 7.35 Tools Keyboard Shortcuts

Gambar 7.36 fungsi tools Keyboard Shortcuts

117

Penggunaan Tools Keyboard Shortcuts diantaranya, ;

-

Ctrl + C

: Untuk meng-copy / menyalin

Ctrl + V

: Untuk paste / menempel

Ctrl + Z

: Untuk Undo

Ctrl + B

: Untuk Bold / Menebalkan tulisan

Ctrl + U

: Untuk membuat garis bawah dibawah tulisan

Ctrl + X

: Untuk memotong tulisan / cut

Ctrl + A

: Untuk select All blok tulisan secara keseluruhan

Ctrl + Y

: Untuk Redo

Ctrl + I

: Untuk Italic / memiringkan tulisan

Ctrl + K

: Untuk Insert link / menyisipkan link

Gambar 7.37 fungsi tools Keyboard Shortcuts

118

Shift + Alt + 1

: Untuk Heading 1

Shift + Alt + 2

: Untuk Heading 2

Shift + Alt + 3

: Untuk Heading 3

Shift + Alt + 4

: Untuk Heading 4

Shift + Alt + 5

: Untuk Heading 5

Shift + Alt + 6

: Untuk Heading 6

Shift + Alt + L

: Untuk Align Left

Shift + Alt + C

: Untuk Align center

Shift + Alt + R

: Untuk Align Right

Shift + Alt + J

: Untuk Justify

Shift + Alt + D

: Untuk Strikethrough

Shift + Alt + Q

: Untuk Blockquote

Shift + Alt + U

: Untuk Bulleted list

Shift + Alt + A

: Untuk insert/edit link

Shift + Alt + M

: Untuk Insert/edit image

Shift + Alt + O

: Untuk Numbered List

Shift + Alt + S

: Untuk remove link

Shift + Alt + T

: Untuk insert read more tag

119

Gambar 7.38 fungsi tools Keyboard Shortcuts

Cara nya >> Ketika memulai sebuah paragraf baru dengan salah satu
cara pintas format ini diikuti dengan spasi , format akan diterapkan secara
otomatis .
Tekan >> Backspace atau Escape untuk membatalkan .
Cara pintas format berikutnya diganti saat menekan >> Enter .
Tekan >> Escape atau tombol Undo untuk membatalkan .

120

Gambar 7.39 fungsi tools Keyboard Shortcuts

Fokus Pintasan
Cara nya >> Untuk memindahkan fokus ke tombol lainnya klik >> Tab
atau Tombol panah Untuk kembali fokus ke editor tekan >> Escape
7.24 Visual
Ada dua cara yang bisa digunakan untuk menulis sebuah postingan atau
artikel, pertama Visual dan yang kedua dengan kode HTML. Nah tools diatas
yang sudah kita bahas pada bab ini yang adalah cara Visual.
Dan secara default, wordpress akan mengarahkan anda ke mode atau cara
Visual saat masuk ke menu Post. Jadi anda tak perlu bingung.

121

Gambar 7.40 Tools mode Visual

7.25 Mode Text / Kode HTML
Untuk tools ini saya tidak akan membahasnya, namun anda tetap harus
tahu bahwa Wordpress memfasilitasi anda dalam melakukan pengisian dan
pengaturan dengan kode-kode HTML. Berikut contoh penggunaan kode HTML
atau mode Text yang ada bagian kanan atas.
Caranya >> klik tools Mode Text maka tulisan akan berubah menjadi
kode-kode Html.

Gambar 7.41 Tampilan tools Mode Text

122

7.26 Cara memasukkan gambar / foto

Anda tentunya sudah sering lihat, ketika membaca sebuah postingan atau
produk jualan sering kita jumpai pula gambar atau foto didalamnya. Nah kali ini
kita akan meneruskan panduan cara memasukkan gambar.

Gambar 7.42 contoh postingan disertai gambar

Sekarang kita lanjutkan cara memasukkan gambar atau foto kedalam menu
post diwebsite kita. Namun sebelum nya kita perlu menyiapkan gambar yang
ingin dimasukkan terlebih dahulu. Jika anda belum mempunyai gambar, anda bisa
searching di google (gambar yang sesuai dengan postingan anda).
Karena artikel saya mengenai, prestasi anak Indonesia, maka saya
searching di google prestasi anak Bangsa.

123

Gambar 7.43 contoh pencarian gambar di Google

Kemudian pilih gambar yang kira-kira cocok dengan artikel anda. Dalam
hal ini saya memilih gambar yang ada Anak bangsa dan ada Bendera Merah
Putihnya.
Klik >> Gambar yang dipilih, lalu klik >> Save Image As

Gambar 7.44 cara menyimpan gambar

124

Setelah itu simpan di folder biasa anda menyimpan data di laptop / PC

computer anda.
Misal Folder D >> Pictures >> Beri nama gambar >> Save

Gambar 7.45 cara menyimpan gambar di Laptop / PC Komputer

Jika sudah sekarang kita mulai memasukkan gambar di postingan kita.
Caranya >> Letakkan kursor ditempat gambar ingin dimasukkan,
kemudian klik >> Add Media

Gambar 7.46 cara sisipkan gambar di postingan

125

Kemudian klik >> Upload Files

Gambar 7.47 cara upload gambar di postingan

Kemudian klik >> Select Files

Gambar 7.48 cara upload gambar di postingan

Lalu anda akan diarahkan ke folder di PC atau laptop anda, cari folder
dimana anda menyimpan gambar yang ingin di upload di postingan anda.

126

Dalam hal ini saya menyimpan gambar di Folder D >> This PC >> Nama
Gambar (prestasi anak bangsa.jpg) >> Open

Gambar 7.49 mencari gambar di folder Komputer

Tunggu Proses loading selesai, kemudian akan muncul Attachment
Details

Gambar 7.50 proses loading gambar

127

Dibawah gambar ada beberapa hal yang harus kita isi. Dan ini berkaitan
dengan posisi artikel agar lebih disukai oleh mesin pencari google.
-

Title, diisi dengan Nama judul artikel kita

Caption, ini untuk menegaskan ketarangan gambar

Gambar 7.51 Pengisian Title Gambar

-

Alt Text, diisi dengan kata kunci yang ingin dituju, bisa lebih dari 1 kata
kunci (misal ; prestasi pemuda Indonesia, prestasi Rakyat Indonesia,
Pemuda Indonesia Berprestasi, dll.)

Description, deskripsi singkat tentang artikel yang kita buat, usahakan

menarik, padat, jelas dan dapat dipahami berbagai kalangan.

Alignment, letak posisi gambar (none, left, right, center)

128

Kemudian klik >> Insert Into Post

Gambar 7.52 pengisian kata kunci

Contoh nya seperti gambar berikut

Gambar 7.53 contoh pengisian gambar

129

Berikut gambar setelah di upload.

Gambar 7.54 hasil gambar setelah proses upload

7.27 Memasukkan Kata Kunci
Jika sudah seperti tampak gambar diatas ini, dan jika artikel yang anda
buat sudah cukup banyak, silahkan anda scrool kursor kebawah. Disitu anda akan
menjumpai All In One SEO Pack, nah ini plugin yang sudah kita download di bab
sebelumnya.
Khusus plugin ini memang akan terus ada setiap kita membuat postingan
baru, plugin ini seperti dijelaskan diawal berfungsi untuk menjadikan postingan
kita lebih disukai mesin pencari di Google. Jadi setiap kita membuat artikel baru,
jangan lupa untuk mengisi plugin All In One SEO Pack ini. Dan sekarang kita
akan mempelajari cara memasukkan kata kunci di menu plugin All In One SEO
Pack.

130

Berikut cara pengisian untuk plugin All In One SEO Pack di menu Post ini, ;
-

Title, isi dengan judul postingan

Description, deskripsi singkat tentang artikel yang kita buat, usahakan

menarik, padat, jelas dan dapat dipahami berbagai kalangan. Maksimal
160 karakter

Keywords (comma separated), diisi dengan kata kunci yang ingin dituju,
bisa lebih dari 1 kata kunci (misal ; prestasi pemuda Indonesia, prestasi
Rakyat Indonesia, Pemuda Indonesia Berprestasi, dll.) dibatasi dengan
koma dan spasi.

Gambar 7.55 cara pengisian plugin All In One SEO Pack di menu Post

131

7.28 Membuat Kategori

Setelah selesai pengisian All In One Seo Pack, sekarang kita beralih
kembali keatas, disamping Judul postingan, ada menu Categories.

Gambar 7.56 Tools Categories

Nah Categories ini gunanya untuk menentukan kategori postingan yang
kita buat. Setiap postingan baru yang kita buat, nanti akan kita klasifikasi untuk
masuk di kategori yang sudah kita buat.
Langkah berikutnya, kita akan membuat kategori untuk postinganpostingan kita nantinya. Cara membuat kategori, pertama klik >> +Add New
Category >> isi kategori yang kita kehendaki (dalam hal ini saya isi prestasi),
kemudian klik >> Add New Category yang dibagian bawah.

132

Gambar 7.57 cara pengisian Kategori

Semula dimenu kategori hanya ada Uncategorized, kini sudah ada kategori
Prestasi. Untuk membuat kategori yang lain, silahkan anda mengulangi dengan
kebutuhan jumlah kategori yang ada kehendaki.

Gambar 7.58 penambahan kategori

133

7.28.1 Sub Kategori

Nah, kalau kita ingin buat Sub Kategori bagaimana caranya?
Untuk membuat sub kategori pertama klik >> +Add New Category

Gambar 7.59 Pembuatan sub kategori

Tulis Sub Kategori di kotak pertama >> kemudian Cari Kategori yang
dimaksud dibagian Parent Category

Gambar 7.60 Pembuatan sub kategori

134

kemudian klik >> Add New Category.

Gambar 7.61 pembuatan sub kategori

Jika sudah klik add new category, akan tampak hasilnya seperti gambar
dibawah ini, sub kategori akan tampil lebih menjorok kedepan.

Gambar 7.62 Contoh Sub Kategori

135

7.29 Memasukan foto di Featured Image

Featured image adalah fitur tema WordPress yang memungkinkan
pengembang tema untuk menambahkan dukungan untuk menggunakan gambar
representatif untuk posting, halaman, atau jenis posting kustom lainnya.
Pengertian gampang nya, Featured Image adalah gambar utama yang ditampilkan
di homepages situs.
Jika anda sudah memahami cara memasukkan gambar yang kita bahas di
bagian lalu, maka ketika kita ingin memasukkan gambar di Set Featured Image
begitu mudah, karena memang proses nya semua sama, hanya saja gambar yang
kita masukkan di featured image ini akan tampil dihalaman depan.
Letak Set featured image ada dibawah categories.
Caranya langsung klik >> Set Featured Image

Gambar 7.63 Tools Set Featured Image

136

Kemudian klik >> Upload Files, kemudian klik >> Select Files

Gambar 7.64 Cara Upload Gambar

Kemudian >> cari gambar yang sudah anda simpan sebelumnya, klik >>
Gambar >> Open

Gambar 7.65 Setting Set Featured Image

137

Tunggu Proses loading selesai, kemudian akan muncul Attachment

Details

Gambar 7.66 Set Featured Image Attachment Details

Untuk Attachment Details sama seperti memasukkan gambar yang sudah
kita bahas sebelumnya, Anda mesti mengisi Title, Alt Text dan juga Description.
Mengapa harus diisi? Silahkan lihat point sebelumnya, sudah kita bahas secara
detail.
Jika sudah silahkan klik >> Set Featured Image

Gambar 7.67 contoh pengisian Set Featured Image

138

Setelah klik >> Set Featured Image, gambar akan muncul di tampilan
Featured Image. Namun jika dirasa gambar kurang cocok, WordPress
menyediakan Tools Remove Featured Image dibawah gambar.
Fungsi Remove Featured Image adalah menghapus Tampilan gambar yang
sudah di upload.

Gambar 7. 68 Remove Featured Image

7.30 Save Draft
WordPress menyediakan tools Save Draft disamping Tools Publish.
Namun apakah perbedaan tools Save Draft dengan Publish? Save Draft adalah
menyimpan artikel atau postingan yang sudah kita buat, namun tidak kita kirim.
Nah, sebelum kita benar-benar yakin untuk mem-publish tulisan kita ke public,
kita bisa menggunakan tools Save Draft ini agar data tidak hilang dan tersimpan
dengan baik di menu Post.

139

Gambar 7.69 Tools Save Draft

7.31 Publish
Jika anda sudah merasa yakin dengan artikel atau tulisan atau postingan
produk yang anda ingin pasarkan. Tinggal anda Publish, maka artikel anda sudah
bisa dilihat orang banyak. Publish adalah menerbitkan postingan sehingga bisa
dikonsumsi banyak orang.
Cara nya klik >> Publish

Gambar 7.70 Menu Publish

140

Setelah anda Publish tulisan anda, maka sampai disini artikel anda sudah
bisa diakses orang banyak diseluruh dunia selama 24 jam online. Sampai disini
saya ucapkan selamat anda sudah sukses membuat 1 artikel original buatan
anda sendiri.
Silahkan di kunjungi website anda, kemudian klik >> refresh

Gambar 7.71 website setelah di Update

Berikut hasil Publish artikel yang sudah saya buat.

Gambar 7.72 contoh postingan yang sudah di Publish

141

7.32 Cara mengedit tulisan

Untuk menu post ini masih belum selesai pembahasannya, masih ada 1
lagi kelebihan sebuah website. Kita mudah mengganti dan meng-edit sebuah
artikel atau postingan yang sudah kita publish. Terkadang ketika kita mempublish sebuah artikel tanpa disengaja terdapat kesalahan atau ketidaksesuaian,
dan mungkin anda bertanya bagaimana cara meng-Edit artikel tersebut?
Caranya silahkan anda klik >> Posts >> All Post >> pilih artikel yang
ingin di Edit
Klik >> Edit (letak nya dibawah judul artikel)

Gambar 7.73 cara meng-edit artikel di menu post

142

Anda akan dibawa ke menu Edit Post, tidak ada yang berbeda dengan
Add New Post kecuali tools Update, yang semula di menu Add New Post adalah
tools Publish.
Jika anda sudah selesai Edit Post, silahkan klik >> Update

Gambar 7.74 Tampilan Edit Post

Sampai disini selesai pembahasan kita di menu Post. Silahkan anda buat
artikel, postingan produk dan jasa yang anda tawarkan sebanyak-banyak nya,
sambil anda melancarkan tahapan-tahapan membuat postingan.

143

BAB 8
MEMBUAT HALAMAN
8.1 Pages
Menu Pages adalah membuat sebuah halaman didalam website yang
bersifat statis, berdiri sendiri serta jarang membutuhkan update yang terlalu
sering. Ini berbeda sekali dengan menu post yang terus di update. Menu Pages
digunakan untuk membuat halaman yang berisi info-info terbatas seperti Profile,
Kontak, dll.
Langsung saja kita membuat Pages untuk website kita
Klik Pages >> Add New

Gambar 8.1 Add New Page

144

Tampilan menu Page tidak jauh berbeda dari tampilan Post, hanya saja
ada beberapa tools yang ada di Post tapi tidak ada di Menu Page. Sehinga cara
pengisiannya pun tidak jauh berbeda.

Gambar 8.2 Tampilan menu pages di Dashboard

Enter Title Here,isi dengan Judul yang ingin anda buat
Dalam hal ini kita ingin membuat Pages Kontak Kami.

Gambar 8.3 Membuat Pages / Halaman Kontak kami

145

Kemudian untuk bagian isi / konten, silahkan diisi sesuai dengan

kebutuhan anda, dalam hal ini, karena saya ingin membuat halaman kontak kami,
maka isi nya seputar alamat dan nomor kontak yang bisa dihubungi.

Gambar 8.4 cara membuat halaman kontak kami

Setelah konten pages terisi, silahkan anda arahkan kursor kebagian bawah,
disitu ada menu plugin All in One SEO pack. Silahkan diisi sebagaimana anda
mengisi plugin All in One SEO pack di menu post yang sudah dijelaskan di bab
yang lalu.

Gambar 8.5 pengisian plugin All in One SEO pack di pages

146

Jika konten sudah diisi, anda bisa Save Draft untuk menyimpan data
pages anda sementara. Anda juga bisa memasukkan gambar di tools Set Featured
Image. Jika dirasa sudah OK, anda bisa klik >> Publish untuk menerbitkan menu
Pages Kontak kami.

Gambar 8.6 Tools Publish

147

Kini pages Kontak Kami di website anda sudah bisa diakses banyak orang.

Gambar 8.7 Menu Kontak Kami Berhasil Di Publish

Sampai disini pembahasan membuat new pages , silahkan anda buat pages
yang lain sesuai dengan kebutuhan anda.
8.2 Edit Pages
Sama seperti Post, adakala nya didalam membuat Pages terjadi kesalahan
atau ada perubahan yang harus dilakukan. Misalnya kantor kita pindah, sehingga
alamat kantor pun harus dirubah atau di update dengan alamat yang baru.

148

Caranya klik >> Pages >> All Pages

Gambar 8.8 Edit Pages

Setelah itu akan muncul tampilan All Pages (semua halaman) yang sudah
pernah dibuat.

Gambar 8.9 Edit Pages Kontak Kami

Jika sudah anda akan masuk ke menu Edit Post

149

Silahkan edit sesuai kebutuhan anda, ganti yang perlu ganti atau ubah. Jika
sudah selesai proses Edit Post, silahkan anda klik >> Update

Gambar 8.10 Update Edit Post

Setelah itu silahkan anda Refresh website anda, dan lihat perubahan yang
ada

Gambar 8.11 Tampilan page setelah di edit

150

BAB 9
PENGATURAN WIDGETS
9.1 Widgets
Apa itu widgets? Widgets adalah salah satu fasilitas yang diberikan oleh
WordPress, yaitu bagian content website yang bisa dirubah, dipasang dan dilepas
secara dinamis dan flexsible sesuai kebutuhan kita.
Berikut contoh tampilan widgets saat di publish.

Gambar 9.1 contoh tampilan Widgets saat dipublish

151

Yuk kita mulai masuk ke menu Widgets, klik >> Appearance >>
Widgets

Gambar 9.2 Masuk ke menu Widgets

9.2 Tampilan Widgets
Dalam hal ini ada terdapat 2 bagian di menu pengaturan Widgets. Bagian
sebelah kiri (Available widgets) adalah daftar widgets yang tersedia. Adapun yang
sebelah kanan adalah (Widget Area) yaitu Area widget yang akan ditampilkan ke
public.
Namun perlu saya jelaskan disini, bahwa menu widgets ini tergantung dari
themes atau tamplate website yang digunakan. Secara default atau bawaan ada

152

beberapa widgets yang telah terpasang, seperti search, recent posts, recent
comments, archives, categories, dan meta.

Gambar 9.3 Pengaturan Widgets area

Berikut menu widgets yang ada di Available Widgets (widgets yang
tersedia)

Gambar 9.4 Available Widgets

153

Gambar 9.5 proses memindahkan widget

Untuk meng-aktifkan widgets yang ada di bagian kiri (Available widgets)
caranya anda tinggal men-Drag (mengklik dan menarik) widgets yang ada ke
bagian Widget Area sebelah kanan.

154

Posisi widget sudah pindah dari widget penyedia ke bagian widget yang
terpasang

Gambar 9.6 Area widgets terpasang

Berikut Widgets yang bisa anda pindahkan, berikut akan saya jelaskan
fungsinya.
-

Widget Archive, berfungsi menampilkan postingan berdasarkan bulan

Widget Search, berfungsi untuk mencari postingan yang ada diwebsite

kita

Widget Calender, berfungsi untuk menampilkan kalender pada website

kita

Widget Categories, berfungsi untuk menampilkan kategori postingan pada

website kita

Widget Comments, berfungsi menampilkan daftar komentar yang ada

Widget Meta, berfungsi untuk membuat akses menu Login

155

Widget Recent Posts, berfungsi untuk menampilkan daftar postingan

teratas

Widget RSS, berfungsi untuk menampilkan update informasi terbaru dari

website lain dihalaman website kita.

Widget Text, berfungsi untuk menampilkan Teks atau kode HTML.

Widgets ini paling banyak digunakan, karena berfungsi juga untuk
membuat iklan atau promo lainnya dengan menggunakan kode HTML.
Setelah kita mengetahui fungsi widget secara satu persatu, sekarang kita

ulangi lagi hal demikian untuk memindahkan widget yang anda butuhkan.
Klik, Tarik dan geser ke area widget terpasang. Sekarang saya akan
memindahkan widget Text .
Geser Widgets Text ke >> Widget Area , dalam hal ini saya meletakkan
widget Text persis dibawah menu Search.

Gambar 9.7 proses pemindahan widgets

156

Kemudian Widget Text akan terbuka seperti ini, kotak Title diisi dengan
Judul yang ingin kita buat. Dalam hal ini Title saya isi dengan Office. Dan bagian
kotak Content diisi dengan kode HTML.
Setelah itu klik >> Save

Gambar 9.8 Widget Text

Sedikit tentang kode HTML
<center>

membuat teks ditengah </center>

<br>

membuat garis baru </b>

<b>

menebalkan huruf </b>

<i>

membuat tulisan jadi miring </i>

<u>

membuat garis bawah pada teks </u>

<s>

membuat tulisan tercoret </s>

157

Setelah menulis kode html, jangan lupa menutup kode dengan tanda garis
miring ( / ) agar kode html berfungsi.
Berikut hasil nya yang bisa dilihat dan diakses public.

Gambar 9.9 hasil widget Text

Tampilan di website kita secara full

Gambar 9.10 Berikut hasil tampilan widget Text

158

BAB 10
PENGATURAN MENU
10.1 Menu
Fitur menu berfungsi untuk membuat menu tambahan baru. Disini kita
bisa mengatur menu apa saja yang akan kita tampilkan. Penambahan menu bisa
berdasarkan Page yang sudah kita buat, link atau kategori yang ada.
Caranya klik >> Appearance >> Menus

Gambar 10.1 Tools Menus

159

Berikut tampilan menus :

Gambar 10.2 Tampilan pengaturan menus

Klik >> Menu yang ingin ditampilkan, dalam hal ini saya memilih kontak kami
di bagian Pages, lalu klik >> Add To Menu

Gambar 10.3 Cara melakukan Setting Menus

Menu Kontak Kami pun pindah ke >> Menu Structure, posisi Kontak
Kami kini berada tepat dibawah menu contact us.

160

Gambar 10.4 menambah menu baru kedalam menu Structure

Untuk urutan menu, bisa disesuaikan dengan keinginan anda.
Caranya >>Tarik setiap item ke dalam urutan yang Anda sukai. Dalam
contoh yang saya buat ini, posisi Kontak kami saya tukar dengan contact us.
Posisi kontak kami sekarang berada diatas posisi contact us.

Gambar 10.5 perpindahan menu sesuai keinginan

161

Kemudian jika kita ingin membuat Sub Menu

Cara nya >> adalah dengan men-drag / menggeser agak menjorok
kedepan item menu yang ingin dijadikan Sub Menu. Contoh menu Contact us
akan saya jadikan sub menu dari Kontak kami.

Gambar 10.6 pengaturan sub menu

Kemudian jika ingin menghapus menu yang sudah kita buat. Misal
ingin menghapus menu Contact Us
Maka caranya klik >> Tanda panah di sebelah kanan item untuk
mengungkapkan pilihan konfigurasi tambahan .
Klik >> Remove

162

Gambar 10.7 cara me-remove menu yang sudah kita buat

Maka menu contact us pun terhapus seperti gambar berikut ini.

Gambar 10.8 menu contact us sudah terhapus

Silahkan ulang-ulangi terus cara memasukan menu-menu baru berikutnya.
Sukses terus untuk anda.

163

BAB 11
PENUTUP
Alhamdulillah kita telah sampai dipenghujung pemaparan buku Bikin
Website Secepat Kilat. Saya berharap buku yang ada ditangan anda ini dapat
bermanfaat untuk kemaslahatan orang banyak. Semoga semakin banyak orang
yang terbantu dalam memahami dunia website dan mampu mengoptimalkan
potensi website.
Kritik dan saran sangat saya nantikan untuk perbaikan dan kebaikan
didalam buku ini dan buku karya saya selanjutnya. Apabila ada banyak hal dalam
pemaparan buku ini yang kurang dimengerti oleh pembaca sekalian, silahkan
diskusikan dengan saya di alamat e-mail : tanyabangsapei@gmail.com atau
syafiih8@gmail.com , anda juga bisa bertanya melalui No. Hp. 081314658527
Semoga niat dan karya kecil ini dapat berguna untuk saya dikemudian
hari, Terimakasih kepada seluruh pembaca buku ini. Semoga kesuksesan dan
kebaikan menghampiri kita setiap saat. Aamiin.

164

DAFTAR PUSTAKA
Krisianto, Andy ST (2014). Jago Wordpress. Jakarta: Elex Media Komputindo
Rachmanto, Ricky (2015). Website Iklan Baris dengan Wordpress. Jakarta: Elex
Media Komputindo
Enterprise, Jubilee (2014). 132 Tip & Trik Wordpress 4 Mengupas Potensi
Tersembunyi Wordpress 4. Jakarta: Elex Media Komputindo
www.domosquare.com
www.keraktelor.net
www.toko-flanel.com
www.yuleko.com
www.giewahydi.com
www.jelajahfashion.com
www.centerklik.com
www.servicepompaair.com
www.rumahweb.com
www.kreasipemuda.com

165