Cara Buat Laman Web Dan Blog Sendiri Langkah Demi Langkah (Beserta Gambar)

Affiq Fadzil

Affiq Fadzil

Anda dalam perancangan untuk buat laman web sendiri?

Bagus, sebagai pemilik bisnes memang sepatutnya anda mempunyai laman web atau blog sendiri untuk memasarkan produk atau servis anda.

Cuma, ramai usahawan online ‘takut’ untuk bina laman web sendiri kerana kekangan teknikal.

Takut tersilap langkah dan risau laman web tak berfungsi.

Jadi di dalam artikel kali ini, saya akan share langkah demi langkah bagaimana anda boleh buat laman web dan blog anda sendiri bagi tahun 2019 ini.

Saya akan tunjukkan cara paling mudah tanpa perlu tahu apa-apa tentang coding.

Walaubagaimanapun, jika anda kurang yakin untuk buat sendiri, saya boleh bantu setupkan laman web anda dengan cas yang berpatutan.

Klik Sini Untuk Lihat Detail Servis Design Website Saya Pada Harga Diskaun 10%

Tetapi jika anda lebih suka merasai pengalaman untuk buat sendiri, sila teruskan bacaan anda hingga akhir artikel ini okay. ๐Ÿ™‚

.

Apa Yang Akan Anda Belajar?

Untuk memudahkan pembacaan anda, saya senaraikan dulu flow apa yang anda bakal belajar melalui tutorial langkah demi langkah ini:

  1. Apa yang anda perlukan untuk bina laman web
  2. Cara daftar nama domain dan hosting
  3. Cara integrasikan/propagate domain dan hosting
  4. Cara install WordPress
  5. Setting asas laman web WordPress (termasuk mendapatkan https)
  6. Cara pilih dan install theme yang sesuai
  7. Cara pilih dan install plugin penting
  8. Cara memasukkan kandungan (content) di dalam laman web
  9. Cara ubah dan perincikan (customize) laman web anda

.

Apa Yang Anda Perlukan Untuk Bina Laman Web?

Sebelum membina laman web, anda memerlukan:

  1. Domain – nama laman web anda, contoh seperti laman web/blog saya ini: ‘affiqfadzil.com’
  2. Hosting – server tempat untuk anda meletakkan semua kandungan dan file laman web anda

Saya suka ibaratkan domain sebagai alamat rumah, manakala hosting sebagai tapak rumah untuk memudahkan pemahaman.

.

Domain

Seperti yang saya terangkan sebelum ini, nama domain ialah nama laman web anda. Jadi pastikan ianya betul-betul melambangkan laman web yang anda ingin bangunkan.

Bagi saya paling penting ialah pastikan 3M – mudah sebut, mudah eja, dan mudah ingat.

Sebelum anda memilih nama domain untuk laman web anda, ada 10 perkara yang anda perlu telitikan terlebih dahulu, saya ada terangkan lebih detail di dalam artikel tips pilih nama domain terbaik supaya anda lebih jelas lagi.

.

Hosting

Apa yang saya pentingkan ketika memilih hosting ialah, kelajuan, support dan keselamatan.

Ketiga tiga ini adalah aspek utama yang anda perlu pastikan sebelum memilih hosting untuk laman web anda.

Ini kerana pelawat laman web anda tak suka menunggu laman web yang loading-nya lambat! Mengikut kajian, jika satu-satu laman web mengambil masa lebih dari 3 saat untuk loading, pelawat akan terus tinggalkan laman web tersebut!

Anda sendiri pun tak suka laman web yang lambat kan? So pastikan anda memilih penyedia hosting yang laju.

Kenapa perlu pentingkan support? Saya sendiri sebelum ini pernah mengalami masalah berkenaan hosting saya, dan ketika itu support yang diberikan oleh pihak hosting tersebut agak mengecewakan.

Masalah saya tak berjaya diselesaikan dan akhirnya saya bertukar ke penyedia hosting yang baru.

Mereka sangat membantu, pantas dan responsif ketika memberikan support 24 jam sehari 7 hari seminggu!

Tentang keselamatan pula, pastikan penyedia hosting yang anda bakal pilih berikan sekali SSL secara percuma, yang akan buatkan laman web anda tertera url https.

Laman web yang mempunyai SSL akan tertera https dan simbol ‘padlock’ menunjukkan yang laman web tersebut selamat.

Jadi barulah laman web anda dilindungi dan pelawat yang sampai ke laman web anda pun lebih yakin serta rasa selamat.

Saya juga terangkan lebih terperinci lagi tentang cara memilih hosting terbaik untuk laman web anda di dalam artikel ini.

.

Jom Mulakan Langkah Demi Langkah

Untuk contoh tutorial ini, saya akan menunjukkan pendaftaran domain melalui salah satu antara yang terbaik di Malaysia iaitu, Exabytes.

Kenapa Exabytes? Ini sebabnya:

  1. Exabytes memiliki pengalaman 18 tahun dalam industri ini
  2. Exabytes mempunyai pilihan pakej harga yang berpatutan sesuai dengan pengguna Malaysia

Okay, jom kita teruskan dengan pendaftaran nama domain

.

Step #1 – Daftar Nama Domain

Pertama sekali, anda perlu pergi ke laman web Exabytes (Klik Sini), pilih ‘Domains’ (1) dan klik pada ‘Register New Domain’ (2)

Seterusnya, scroll sedikit ke bawah sehingga anda nampak paparan seperti gambar di bawah, dan taipkan nama domain idaman anda di dalam ruangan yang disediakan (3) dan klik butang ‘Check & Order Domain’ (4)

Jika nama domain anda masih available / tidak pernah didaftarkan oleh orang lain, anda akan dapat lihat paparan seperti di bawah, tertulis ‘namadomainanda.com’ is available.

Tetapi, jika nama domain anda pernah didaftarkan sebelum ini oleh orang lain, akan tertera not available atau is taken, jadi anda perlu cuba nama domain yang lain, saya sarankan buat sedikit perubahan dari nama domain yang anda taip sebelum ini.

Setelah berjaya dapatkan nama domain yang available, klik pada simbol anak panah ke bawahdropdown menu (5), dan klik pada pilihan pakej 1 Year (6).

Ini bermaksud tempoh pembaharuan / renewal domain anda ialah secara tahunan. Anda bebas memilih pilihan pakej renewal yang lebih panjang, ianya terpulang kepada keselesaan anda.

Seterusnya klik pada butang ‘Continue’ (7).

Anda akan dibawa ke bahagian order summary. Jangan terkejut anda akan dipromosikan dengan servis tambahan lain, saya nasihakan supaya anda tidak memilih mana-mana servis tambahan ini.

Scroll hingga anda nampak tertera Order Summary, yang mempunyai harga yang anda peru bayar seperti gambar di bawah, kemudian scroll lagi hingga ada nampak butang ‘Continue’, klik butang Continue’ (8).

Selepas itu, anda dapat lihat yang domain anda dilindungi ID Protection secara percuma – seperti gambar di bawah. Klik pada butang Continue’ (9).

Teruskan dengan klik pada butang Checkout’ (10).

Anda akan diminta untuk mengisi maklumat tentang diri anda dan pendaftaran domain. Isikan maklumat tersebut.

Taipkan nama anda, email anda, no hp dan alamat anda pada ruangan yang disediakan (11).

Taipkan password yang mudah untuk anda ingat, juga masukkan soalan dan jawapan keselamatan. (12)

Seterusnya, klik pada kotakI have read and agree….’ (13)dan klik pada butang Complete Order’ (14)

Seterusnya akan keluar paparan seperti di bawah untuk meneruskan proses pembayaran.

Klik pada butang anak panah ke bawah (15) dan pilih bank yang anda biasa buat pembayaran online. Dalam contoh ini saya memilih Maybank2u (16)

Kemudian klik pada butang ‘Pay Online’ (17)

Anda akan dibawa ke laman web bank pilihan anda, teruskan proses pembayaran hingga siap.

Selepas pembayaran selesai, anda akan dibawa ke laman web Exabytes semula dan akan nampak paparan seperti di bawah:

Anda juga akan menerima beberapa email dari Exabytes seperti di bawah.

Bagi pengguna gmail, jika email dari Exabytes tiada di dalam inbox Primary anda, sila semak di dalam inbox Promotions anda.

Pastikan email bertajuk “Thank You For Signing Up With Exabytes!” anda simpan dengan baik dan jangan terdelete.

Email ini mengandungi maklumat untuk akses Client Area Exabytes anda.

Manakala email bertajuk “VERIFICATION REQUIRED” adalah email yang meminta anda sahkan maklumat anda (pemilik nama domain)

Anda perlu buka email ini (18)

Klik pada link yang diberikan di dalam email (19):

Anda akan sampai ke paparan seperti gambar di bawah:

Scroll down ke bawah dan klik pada butang VERIFY INFORMATION’ (20)

Selepas klik, anda akan dibawa ke paparan seperti gambar di bawah, bermaksud maklumat anda (pemilik nama domain) sudah pun berjaya disahkan.

.

Kenapa Tak Terus Daftar Hosting Di Exabytes?

Walaupun Exabytes juga menyediakan servis hosting, saya sangat sukakan WPX Hosting kerana:

  1. Servis hosting WPX Hosting terbukti berjaya tingkatkan kelajuan ketara laman web client mereka, termasuklah kesemua laman web saya.
  2. WPX Hosting menduduki tempat pertama (#1) daripada 171 hosting pilihan pelanggan di dalam TrustPilot dan G2Crowd. Kedua dua ini ialah laman web review dari pengguna sebenar.
  3. A++ untuk customer support yang sangat mesra, cepat dan pakar. Saya sudah banyak kali live chat dengan support mereka bertanyakan masalah teknikal dan hal lain, purata masa yang mereka ambil untuk jawab dan selesaikan masalah saya sekitar 2-10 minit sahaja.
  4. Menggunakan server SSD, percuma CDN, percuma SSL dan lain-lain lagi yang buatkan anda akan rasa sangat berbaloi untuk kepantasan & keselamatan laman web anda.

Dah faham kenapa saya sarankan WPX Hosting? Okay, jom kita sambung ke langkah seterusnya.

.

Step #2 – Daftar Hosting

Langkah pertama ialah anda perlu pergi ke laman web WPX Hosting (Klik Sini). Anda akan sampai ke paparan seperti di bawah.

Seterusnya pergi ke ‘Pricing’ (21) dan klik ‘WordPress Hosting’ (22)

Tukar ke pakej bulanan, klik pada butang ‘Monthly’ (23). 

Jangan runsing apabila nampak harganya, ianya agak premium. Saya berjaya ‘deal’ dengan pihak WPX Hosting untuk berikan kupon diskaun special untuk pembaca blog saya . ๐Ÿ™‚

Saya sarankan anda pilih pakej paling asas, iaitu Business. Ini pun dah cukup memadai sebenarnya.

Dengan pakej Business, anda boleh menghasilkan 5 laman web (subdomain juga dikira laman web), 10Gb storage, 100Gb Bandwidth, percuma SSL dan paling best percuma WPX Cloud CDN yang boleh tingkatkan 3 kali ganda kelajuan laman web anda.

Klik pada butang ‘Get Started’ (24) pakej Business.

Pilih ‘Host In UK’ (25) kerana UK lebih dekat dengan Malaysia berbanding US.

Anda akan sampai ke paparan di bawah. Masukkan nama domain yang anda telah daftarkan di Exabytes sebelum ini, taipkan nama domain di dalam ruangan yang disediakan (26) dan klik ‘Continue’ (27)

Tukar ‘Billing Cycle’ ke ‘$24.99 USD Monthly’ (28)

Seterusnya masukkan Promotional Code yang saya sudah deal special untuk anda pembaca blog saya.

Taip kod ini semuanya huruf besar = WPX-AFFIQ-ROCKS (29) 

Klik butang ‘Apply’ (30)

Anda akan mendapat diskaun 50% bagi bulan pertama ๐Ÿ™‚ Klik butang ‘Continue’ (31)

Seterusnya anda akan dibawa ke bahagian ‘Cart’. Semak harga diskaun yang anda perlu bayar di ‘Order Summary’. Di bahagian ‘Choose Payment Method’ pilih cara bayaran yang anda selesa, samada Paypal atau Credit / Debit Card.

Dalam contoh ini saya pilih Visa / MasterCard (bayaran melalui Debit Card) (32)

Scroll sedikit ke bawah, dan isikan maklumat anda pada bahagian ‘Client Information’ (33)

Selepas selesai lengkapkan semua maklumat anda, klik butang ‘Checkout’ (34)

Kemudian akan keluar paparan seperti di bawah:

Ini ialah GDPR Privacy Policy yang anda perlu persetujui, ia adalah proses biasa yang diperketatkan dan digunakan oleh majoriti syarikat berkaitan perniagaan online luar negara untuk melindungi privasi anda.

Jika anda ada banyak masa dan ingin memahami kandungan polisi ini, anda boleh baca satu persatu, saya sendiri tak luangkan masa untuk membacanya. Terpulang kepada anda.

Bagi yang nak cepatkan proses macam saya, anda cuma perlu scroll down hingga bawah sekali, dan klik butang ‘Accept’ (35)

Seterusnya anda akan mendapat notifikasi yang Client Area untuk akaun WPX Hosting anda telah dibuat. Dan anda akan sampai ke paparan seperti di bawah.

Anda perlu lengkapkan maklumat Debit Card atau Credit Card anda di dalam bahagian ‘Credit Card Details’ (36)

Setelah lengkap, klik butang ‘Continue’ (37)

Teruskan sehingga anda berjaya membuat pembayaran.

Dalam masa yang sama, anda juga akan menerima 3 email dari WPX Hosting memaklumkan tentang maklumat login Client Area anda, dan invois pendaftaran hosting anda tadi.

Apabila anda selesai buat pembayaran, anda akan menerima lagi 2 email dari WPX Hosting memaklumkan yang bayaran anda sudah berjaya dan maklumat login dan detail Hosting anda.

Pastikan email yang bertajuk “Welcome to WPX Hosting” anda simpan dengan baik dan jangan terdelete okay. Semua detail penting tentang hosting anda berada di dalam email tersebut.

.

Step #3 – Set Nameserver (Integrasi Domain & Hosting)

Selepas mendaftar domain dan hosting, anda perlu sambungkan atau integrasikan kedua duanya. Ayat yang lebih teknikal ialah, anda perlu setkan nameserver.

Caranya ialah anda perlu memasukkan nameserver yang diberikan oleh pihak WPX Hosting ke dalam DNS nama domain di Exabytes. Ikuti langkah ini:

Buka email dari Exabytes yang bertajuk “Thank You For Signing Up With Exabytes!” (38)

Email ini mengandungi detail login akaun Exabytes anda. Klik pada link Client Area yang diberikan (39)

Masukkan email dan password akaun Exabytes anda, dan klik butang “Login” (40)

Klik pada “Domains” (41), seterusnya klik pada “My Domains” (42)

Klik pada anak panah ke bawah (dropdown menu) (43) di sebelah simbol spanar dan klik “Manage Nameserver” (44)

Anda akan dibawa ke paparan seperti di bawah:

Ingat lagi tak? Anda perlu masukkan detail nameserver dari WPX Hosting ke dalam domain Exabytes.

Jadi langkah seterusnya ialah anda perlu buka email dari WPX Hosting yang bertajuk “Welcome to WPX Hosting” (45)

Scroll kandungan email tersebut hingga jumpa detail nameserver yang diberikan oleh WPX Hosting.

Copy detail nameserver 1 & nameserver 2: (46)

Kemudian kembali ke bahagian Nameserver Client Area Exabytes anda, klik pada “Use Custom Nameserver” (47)

Seterusnya paste nameserver 1 dari WPX Hosting pada ruangan pertama (48),

Paste nameserver 2 dari WPX Hosting pada ruangan kedua (49),

Pastikan anda jangan tersilap paste detail nameserver seperti ada http, atau ruang, atau simbol ‘/’. Sedikit kesilapan akan membuatkan penukaran nameserver tak berjaya

Dan delete nameserver pada ruangan ketiga (50) 

Kemudian klik butang “Change Nameserver” (51)

Seterusnya akan keluar notifikasi yang penukaran nameserver anda berjaya seperti paparan di bawah:

Penukaran nameserver sudah berjaya, tetapi lagi satu perkara yang anda perlu tahu ialah proses integrasi sepenuhnya ke hosting biasanya mengambil masa sehingga 24 jam.

Saya sarankan beri masa hingga 24 jam supaya proses ini benar-benar sempurna. Selepas itu, kita ke langkah seterusnya – pemasangan platform membina laman web, iaitu WordPress.

.

Klik Sini Untuk Lihat Detail Servis Design Website Saya Pada Harga Diskaun 10%

.

Step #4 – Install WordPress

WordPress adalah satu CMS (CMS) paling popular, mudah, mesra pengguna, mobile friendly dan selamat untuk membina laman web. Paling penting ianya PERCUMA.

Inilah sebab kenapa majoriti pemilik laman web, website developer dan website designer memilih platform WordPress ini.

Saya akan tunjukkan langkah demi langkah bagaimana lakukan pemasangan/install WordPress melalui hosting anda.

Anda perlu login ke dalam akaun WPX Hosting anda. Jika anda terlupa maklumat login, anda boleh terus mencari maklumat tersebut di dalam email yang mereka hantar.

Buka emal dari WPX Hosting yang bertajuk “You Login Details” (52)

Email ini mengandungi detail login akaun WPX Hosting anda. Klik pada link Client Area WPX Hosting yang diberikan (53)

Masukkan email dan password akaun WPX Hosting anda, dan klik butang “Log In” (54)

Klik “My Services” (55) dan seterusnya klik “WordPress Hosting” (56)

Klik pada nama domain utama laman web anda (57)

Oh sebelum saya teruskan, untuk pengetahuan anda, WPX Hosting tidak menggunakan CPanel seperti majoriti hosting lain, tapi mereka mempunyai ‘custom-built dashboard’ yang sama fungsinya dengan CPanel, tetapi lebih pantas dan memudahkan.

Jom sambung balik, selepas itu, anda perlu klik pada “Website/SSL” (58)

Seterusnya, anda hanya perlu klik butang “Install WP” (59) pada nama domain yang ingin anda pasangkan WordPress.

Kemudian akan keluar popup paparan seperti di bawah.

Klik “Install WordPress On Website” (60)

Masukkan email anda (detail username dan password installation WordPress akan dihantar ke email ini)

Masukkan apa-apa username yang anda mahu (username ini tak semestinya sama dengan mana-mana username yang anda pernah guna sebelum ini)

Masukkan apa-apa password yang anda mahu. Username dan password ini anda akan gunakan untuk akses masuk ke dalam laman web anda nanti.

Taip semula password yang sama seperti sebelumnya.

Seterusnya klik butang “Deploy WordPress” (61)

Kemudian anda akan dapat lihat loading seketika, dan akan keluar popup paparan seperti ini setelah berjaya.

Anda dah selesai install WordPress dalam nama domain anda!

Bagi saya yang pernah menggunakan CPanel sebelum ini, pendapat saya:

Sangat mudah dan cepat proses pemasangan WordPress melalui dashboard WPX Hosting berbanding melalui CPanel biasa.

Hanya semudah pilih domain, one click install, isi detail dan siap! ๐Ÿ™‚

Seterusnya kita akan masuk ke dalam laman web WordPress anda, dan saya akan tunjukkan setting asas yang anda perlu lakukan.

.

Klik Sini Untuk Lihat Detail Servis Design Website Saya Pada Harga Diskaun 50%

.

Step #5 – Setting Asas WordPress

Pertama sekali anda perlu masuk/login ke dalam laman web WordPress anda.

Link untuk anda masuk/login adalah seperti ini: namadomainanda.com/wp-admin

Untuk saya dalam contoh ini ialah: jagakereta.com/wp-admin

Gunakan username dan password yang anda masukkan sewaktu proses pemasangan WordPress sebelum ini. Kemudian klik butang “Login” (62)

Sekarang anda sudah berada di dalam dashboard area laman web anda. Ianya akan kelihatan seperti paparan di bawah:

Pergi ke “Setting” (63) dan klik pada “General” (64)

Kemudian, pada bahagian “Tagline”, tukar tagline khusus untuk laman web anda (65). Contoh tagline: Solusi Kulit Kusam Dalam 10 Saat!

Scroll sedikit ke bawah, pergi ke bahagian “Timezone” dan pilih “UTC +8″(66) iaitu timezone yang bersesuaian dengan Malaysia

Kemudian, scroll down hingga ke bawah dan klik butang “Save” (67)

Seterusnya perhatikan pada bahagian “WordPress Address (URL)” dan “Site Address (URL)”. 

Url untuk laman web kita sekarang ialah http, maksudnya tiada SSL untuk keselamatan.

Secara mudahnya untuk diterangkan ialah apabila prospek/pelawat sampai ke laman web, mereka nampak laman web kita tidak selamat. Google akan klasifikasikan dengan label “Not secure”

Jadi, kita perlu jadikan laman web kita selamat (mempunyai SSL dengan URL https)

.

Cara Pasang SSL (https) Melalui Dashboard WPX Hosting

Ingat lagi tak salah satu features yang diberikan oleh WPX Hosting ialah percuma SSL? Ingat kan..

Okay jadi kita boleh buat pemasangan SSL sendiri melalui dashboard WPX Hosting kita.

Caranya ialah, pergi ke Client Area WPX Hosting anda, masukkan username & password akaun WPX Hosting anda, dan “Login” (68) seperti biasa.

Klik “My Services” (69) dan klik “WordPress Hosting” (70)

Klik nama domain utama anda (71)

Klik pada “Website/SSL” (72)

Pada domain yang anda ingin pasangkan SSL (https) klik butang “SSL” (73) dan klik butang “Install Free Certificate” (74)

Kemudian, akan keluar popup seperti paparan di bawah, klik butang “Install” (75)

Popup seterusnya pula akan dipaparkan, klik butang “Yes” (76)

Tunggu sekejap, dan kemudian akan keluar popup memberitahu yang pemasangan SSL ke laman web anda telah berjaya. ๐Ÿ™‚

Langkah seterusnya ialah anda perlu install plugin Really Simple SSL untuk melengkapkan proses pemasangan SSL tadi.

Pergi ke bahagian “Plugin” (77) dan klik “Add New Plugin” (78)

Taipkan “Really Simple SSL” (79) pada ruangan plugin

Klik “Install Now” (80)

Seterusnya klik “Activate” (81)

Akan keluar paparan seperti di bawah, untuk teruskan anda perlu klik butang “Go Ahead, Activate SSL” (82)

Anda akan mendapat notifikasi yang SSL anda sudah berjaya diaktifkan!

Cuba lihat di bahagian URL laman web anda, sudah pun tertera https. ๐Ÿ™‚

Seterusnya anda perlu klik pada link “Setting Page” (83) yang diberikan.

Secara automatik anda akan di-logout (dikeluarkan) dari laman web anda. Jangan cemas, anda cuma perlu login semula (84) menggunakan username & password laman web WordPress anda.

Sekarang, anda perlu semak link atau URL laman web anda di bahagian Setting, memandangkan laman web anda sudah pun mendapat pengaktifan SSL kan ๐Ÿ™‚

Pergi ke “Setting” (85) dan klik “General” (86)

Lihat pada bahagian “WordPress Address (URL)” dan “Site Address (URL)”

Sepatutnya secara automatik URL tersebut akan bertukar ke “https” pada kedua dua bahagian seperti paparan di bawah:

Tetapi jika URL pada bahagian tersebut masih “http”, anda perlu tukarkan sendiri, taipkan “https” untuk kedua dua bahagian. Serta jangan lupa scroll ke bahagian bawah sekali dan klik butang “Save”.

Langkah seterusnya, perlu ke bahagian “Setting” (87) lagi sekali dan klik “Permalink” (88)

Pastikan anda memilih “Post Name” (89) .

Ini antara salah satu cara amalan SEO yang baik – untuk pastikan laman web anda mudah di-index oleh Google (dijumpai oleh Google)

Dan jangan lupa scroll ke bawah, serta klik butang “Save” (90)

Ingat! Setiap perubahan yang anda lakukan, anda perlu Save okay.

Setting asas WordPress sudah pun selesai, jadi seterusnya saya akan tunjukkan pula bagaimana untuk pilih dan install theme yang sesuai di dalam laman web anda.

.

Klik Sini Untuk Lihat Detail Servis Design Website Saya Pada Harga Diskaun 10%

.

Step #6 – Cara Pilih Dan Install Theme

Okay sebelum saya teruskan, elok saya terangkan dulu apakah theme ni?

Theme berfungsi sebagai tema utama yang mengawal keseluruhan rekabentuk / design laman web WordPress anda.

Ini termasuklah header, footer, font, warna, latar belakang, senarai post dan lain-lain lagi.

Jadi anda tak perlu bersusah payah merekabentuk setiap satu page di dalam laman web anda.

Jom kita pilih theme yang sesuai untuk laman web anda.

Pergi ke bahagian “Appearance” (91) dan klik “Themes”(92)

Anda akan dibawa ke senarai theme yang ada di dalam laman web anda seperti paparan di bawah:

Jika anda perhatikan gambar di atas, ketika ini laman web ini mempunyai 3 Theme yang telah diinstall, dan Theme yang aktif dan digunakan sekarang ialah “Twenty Nineteen”

Untuk install Theme yang lain dan tiada dalam senarai ini, anda perlu scroll down ke bawah, dan klik “Add New Theme” (93)

Anda akan dapat lihat pelbagai pilihan Theme yang anda boleh gunakan untuk laman web anda. Memang terlampau banyak kalau anda nak cuba satu persatu. Jangan cuba dahulu, teruskan bacaan.

Cuba perhatikan bahagian atas senarai Theme, sebenarnya anda boleh tapis dan cari Theme yang menepati kehendak anda, paparannya seperti di bawah:

Untuk pengetahun anda tak semestinya Theme yang dikategorikan “Featured” atau “Popular” menepati rekabentuk laman web yang anda mahu hasilkan.

Untuk lebih pilihan klik pada “Feature Filter” (94)

Tandakan pada subject/jenis laman web yang anda mahu hasilkan dan juga ciri-ciri/feature yang anda mahukan. (95)

Kemudian scroll ke bawah, dan klik butang “Apply Filter” (96)

Akan keluar hasil carian Theme yang bersesuaian dengan apa yang anda tandakan tadi, dan anda boleh buat pilihan. Untuk gunakan Theme pilihan anda, klik “Install” dan seterusnya klik “Activate”

Tapi untuk tujuan contoh ini, saya akan gunakan Theme yang mudah dan ringan iaitu Zerif Lite.

Di dalam ruangan carian Theme taipkan “Zerif Lite” (97)

Kemudian, klik butang “Install” (98) pada paparan Theme Zerif Lite.

Selepas siap loading install, klik butang “Activate”

Sekarang anda sudah pun berjaya jadikan Zerif Lite sebagai Theme di dalam laman web anda.

.

Step #7 – Cara Pilih Dan Install Plugin

Apa itu Plugin? Plugin boleh diibaratkan sebagai apps tambahan di dalam laman web anda.

Ianya sebagai pelengkap dan menambahkan fungsi tertentu kepada laman web anda. Tapi pastikan anda install Plugin yang bersesuaian sahaja.

Sebab kadangkala ada Plugin yang membuatkan laman web anda tak efektif contohnya ikon tidak dipaparkan dan lain-lain lagi.

Jom mulakan! Pergi ke “Plugin” (100) dan klik “Add New” (101)

Anda akan dipaparkan dengan senarai Featured Plugin seperti di bawah:

Sama seperti Theme, untuk pilih Plugin, anda juga boleh masukkan kata kunci/keyword yang sesuai berkaitan dengan Plugin yang anda mahukan.

Contohnya jika anda mahukan Plugin untuk perlindungan laman web anda, anda mungkin boleh taip perkataan “protection” di dalam ruang carian. Jadi akan keluar senarai Plugin yang berkaitan dengan perlindungan dan keselamatan.

Jika anda sememangnya tahu apa nama Plugin tersebut, terus taipkan nama Plugin dalam ruangan kotak carian dan WordPress akan tunjukkan Plugin yang berkaitan.

Seterusnya saya akan tunjukkan senarai Plugin penting yang patut anda install dalam laman web WordPress anda.

Untuk perlindungan laman web, mengelakkan daripada di-hacked, brute force attack (cubaan pihak tak bertanggungjawab login ke dalam laman web anda), dan serangan lain, saya sendiri gunakan dan syorkan Plugin ini: iTheme Security

.

Plugin Perlindungan Laman Web: iTheme Security

Taip “iTheme Security” (102) di dalam ruang carian, dan klik butang “Install Now” (103). 

Seleoas itu, klik butang “Activate” (104)

Anda akan mendapat satu notifikasi daripada iTheme Security seperti paparan di bawah, klik butang “Get Free API Key” (105)

Seterusnya akan keluar popup seperti di bawah, klik butang “Save Settings” (106)

Dalam masa yang sama anda akan menerima email dari iTheme Security memaklumkan tentang API Key anda diaktifkan secara automatik ke dalam laman web anda (selepas anda klik butang ‘Get Free API Key’ tadi)

Jika anda masih nampak notifikasi menyuruh anda dapatkan API Key lagi dari iTheme Security, anda boleh abaikan.

Sekarang anda sudah pun siap lindungi laman web anda dari sebarang serangan.

Tetapi seandainya nanti laman web anda diserang, samada di-hacked atau apa sahaja isu yang melibatkan keselamatan laman web, jangan risau, anda boleh terus hubungi WPX Hosting melalui Live Chat. Support mereka sangat pantas.

Team mereka yang pakar akan bantu recover laman web anda. Sebab itu saya memilih dan rekemen WPX Hosting, bukan hanya sebab kelajuan sahaja. ๐Ÿ™‚

Okay, jom sambung install Plugin seterusnya.

Seterusnya ialah Plugin untuk backup file laman web anda. Saya sendiri gunakan dan sarankan UpDraftPlus.

.

Plugin Backup Laman Web: UpDraftPlus

Kenapa anda perlu backup laman web?

Andai kata anda buat perubahan major design seperti menukar theme, dan anda perlu balik semula ke design sebelum ini, anda memerlukan file backup.

Jika anda install plugin yang melibatkan perubahan file dan code hingga menyebabkan laman web anda bermasalah, anda juga perlukan file backup untuk direstore semula.

Jom saya tunjukkan caranya untuk install UpDraftPlus.

Seperti biasa, pergi ke “Plugin” (107) klik pada “Add New” (108)

Taip nama Plugin “Updrfat Plus” (109) pada ruangan carian, dan klik pada butang “Install Now” (110)

Kemudian klik butang “Activate” (111)

Selepas itu, anda akan nampak paparan seperti di bawah, klik butang “Press Here To Start” (112)

Anda akan dibawa ke dalam dashboard UpdraftPlus. Klik butang “Setting” (113)

Tetapkan kekerapan backup mengikut keperluan anda pada bahagian
“Files backup schedule” dan “Database backup schedule” (114)

Cadangan saya tetapkan seminggu sekali (Weekly)

Kemudian scroll hingga bawah sekali, dan klik butang “Save Changes” (115)

Anda sudah pun berjaya tetapkan kekerapan backup laman web anda. Anda boleh gunakan file backup ini ketika saat-saat memerlukan hanya semudah klik butang “Restore” sahaja.

Okay, saya yakin anda sudah faham bagaimana untuk mancari dan install plugin kan. Jadi seterusnya saya akan berikan senarai beberapa plugin yang akan membantu tambahkan fungsi dan sebagai pelengkap laman web anda.

.

Senarai Plugin Lain Yang Saya Gunakan:

  1. Google Analytics Dashboard for WP (GADWP) – untuk data analytic seperti mengetahui maklumat trafik laman web anda
  2. Yoast SEO – untuk SEO laman web anda
  3. Elementor – untuk merekabentuk / design page laman web anda (dilengkapi dengan banyak template yang anda boleh guna dan customkan)
  4. Shareaholic – butang perkongsian (share FB, Whatsapp dll) laman web anda
  5. BeliefMedia Facebook SDK – untuk bantu paparkan FB Like Box, FB Comment selepas masukkan code dari FB Apps
  6. W3 Total Cache – untuk bantu tingkatkan lagi kelajuan laman web (diinstall dan setting secara automatik jika gunakan hosting WPX Hosting)
  7. Piio – untuk optimasikan gambar di dalam laman web (mengurangkan saiz tapi masih menjaga kualiti)
  8. Official MailerLite Sign Up Forms – untuk mengumpul leads / database prospek yang masuk ke laman web dengan integrasi autoresponder MailerLite

Saya sarankan anda install kesemua plugin ini dan mencubanya.

Seterusnya saya akan tunjukkan bagaimana untuk tambah kandungan / content ke dalam laman web anda.

.

Klik Sini Untuk Lihat Detail Servis Design Website Saya Pada Harga Diskaun 10%

.

Step #8 – Cara Tambah Kandungan / Content

Dalam laman web WordPress hanya ada 2 kategori content yang anda akan gunakan untuk buat pelbagai jenis content, iaitu Page dan Post.

Apa beza Page dan Post?

Page ialah halaman yang anda mahu masukkan di dalam laman web anda.

Contohnya seperti dalam laman web saya ni, buat masa ini ada page blog, tools pilihan, dan special deal

Post pula seperti artikel atau berita terbaru yang anda ingin masukkan di dalam laman web anda.

Biasanya senarai post diletakkan di dalam page blog. Contohnya anda dapat lihat senarai artikel di dalam page blog laman web saya.

Untuk tambah page, anda hanya perlu pergi ke bahagian “Pages” (116) dan klik “Add New” (117)

Kemudian taipkan nama page anda di dalam ruangan “Add Title” (118)

Contohnya saya masukkan nama page ini: “Main” dan klik dua kali butang “Publish” (119)

Pastikan tertera status“Published” & “namapageanda is live now” di sebelah kanan atas.

Kemudian anda boleh masukkan apa yang inginkan seperti text dan gambar dengan klik pada “Start writing”

Tetapi jika anda mahukan rekabentuk yang lebih cantik, dan dapat diedit secara live pada paparan sebenar page, anda boleh edit menggunakan page builder Elementor, klik pada butang “Edit with Elementor” (120)

Anda akan nampak paparan Elementor seperti di bawah:

Anda boleh buat tetapan page anda dengan klik pada ikon gear (Setting) di bahagian bawah kiri sekali, dan pilih Page Layout yang anda mahukan.

Anda boleh tetapkan struktur rekabentuk page anda dengan klik pada ikon “+” kemudian pilih struktur yang anda mahukan.

Anda juga boleh masukkan elemen yang anda perlukan, contohnya Heading (tajuk besar), text, gambar, butang, video dan lain-lain dengan hanya drag dari kotak sebelah kiri dan drop ke dalam ruang rekabentuk page anda.

Selain itu, anda juga boleh gunakan template design yang telah disediakan secara percuma oleh Elementor dengan klik pada ikon file.

Template ini paling tidak dapat bantu anda bermula dengan design laman web anda, dan dapatkan idea untuk kembangkan design, pilih yang mana satu anda rasakan sesuai, untuk masukkan klik “Insert”

Template page tersebut akan di-load ke dalam page anda, dan seterusnya anda boleh edit text dan gambar di dalamnya.

Klik dan edit je. Tak susah pun :). Cuma akan ambil masa sedikit untuk anda biasakan diri.

Dah siap edit, jangan lupa klik “Update” untuk Save.

Untuk keluar dari paparan Elementor, klik pada ikon 3 baris (Menu) di sebelah atas kiri sekali dan klik butang “Exit to Dashboard”

Untuk lihat bagaimana rupa page anda tadi, klik pada butang “Preview” (121)

Okay, seterusnya saya akan tunjukkan bagaimana untuk tambah Post pula.

Untuk pengetahuan anda, tutorial saya panjang lebar yang anda tengah baca sekarang ini saya buat menggunakan fungsi Post.

Caranya ialah, pergi ke “Posts” (122) dan klik “Add New” (123)

Sama seperti Page tadi juga, taipkan tajuk yang anda mahukan, dan masukkan content yang anda mahukan. Contoh saya letakkan tajuk: Offer Bulan Feb 2019

Untuk masukkan elemen lain dalam post seperti gambar, tajuk besar dan lain-lain, anda perlu klik pada ikon “+” (124)

Apabila dah selesai, jangan lupa klik butang “Publish” (125) sebanyak 2 kali

Untuk lihat bagaimana rupa post tersebut, anda perlu klik butang “View Post” (126)

Okay, sekarang selesai cara untuk tambah Page & Post dalam laman web anda. So seterusnya saya akan tunjukkan pula macam mana anda nak customize-kan laman web anda.

.

Step #9 – Cara Customize Laman Web

Di dalam bahagian ini saya akan ajar anda beberapa perkara, antaranya:

  1. Cara tetapkan Homepage / halaman depan dan Blog Page laman web anda
  2. Cara masukkan Logo dan Icon / Favicon laman web anda
  3. Cara tetapkan Footer laman web anda
  4. Cara tetapkan Sidebar laman web anda
  5. Cara masukkan Menu laman web anda

Okay jom kita sambung. Untuk tetapkan Home Page & Blog Page anda memerlukan 2 page yang berbeza. Contohnya satu page bernama home, dan lagi satu page bernama blog.

Disebabkan sebelum ini kita sudah buat page bernama Main, saya akan jadikan page tersebut sebagai Home Page.

Jadi anda hanya perlu buat lagi satu page (caranya seperti yang saya tunjukkan sebelum ini) dan letakkan “Blog” sebagai tajuk / nama page untuk dijadikan sebagai Blog Page.

Biasanya di dalam Home Page, kita perlu masukkan pengenalan keseluruhan tentang produk atau servis kita. Juga letakkan kelebihan dan ciri-ciri produk / servis

Jangan lupakan borang untuk kumpul lead / database prospek anda, saya menggunakan Autoresponder MailerLite untuk fungsi tersebut di Home Page laman web saya.

Manakala untuk Blog Page, biasanya diletakkan senarai artikel, perkongsian, berita terkini, tawaran bermusim berkaitan produk / servis anda. Lagi banyak kandungan artikel yang anda letakkan di laman web anda, lagi bagus.

Google lebih tertarik dengan laman web yang banyak kandungan yang boleh membantu pelawat mendapatkan jawapan kepada apa yang mereka cari.

.

Cara Tetapkan Home Page & Blog Page

Anda perlu pergi ke bahagian “Setting” (127) dan klik “Reading” (128)

Pada bahagian Your homepage display, pilih “A static page” (129)

Kemudian pilih Page mana satu yang akan jadi Home Page anda, dalam contoh ini saya pilih “Main” (130)

Seterusnya untuk Posts Page, pilih “Blog” (131)

Scroll ke bawah dan klik butang “Save Changes” (132)

Anda boleh cuba lihat Home Page anda dengan buka laman web anda di tab baru.

.

Cara Masukkan Logo & Icon Laman Web

Logo ini akan tertera di bahagian Header laman web anda, biasanya terletak di bahagian atas kiri.

Manakala icon laman web pula akan tertera di bahagian tab.

Cara untuk memasukkan logo dan icon ialah anda perlu pergi ke “Appearance” (133) dan klik “Customize” (134)

Klik pada “Site Identity” (135)

Klik pada butang “Select Logo” (136)

Klik “Upload Files” (137) dan klik “Select Files” (138). Dalam contoh ini saya menggunakan logo laman web saya (AffiqFadzil.com)

Pilih gambar logo di dalam komputer anda, dan tekan butang “Select” (139)

Klik butang “Skip Cropping” (140)

Seterusnya anda akan nampak logo anda terpapar di bahagian header sebelah atas kiri laman web anda.

Scroll down sedikit ke bawah, dan pada bahagian “Site Icon” klik butang “Select Image” (141)

Lakukan step yang sama seperti masukkan logo tadi, hingga akhirnya terpapar icon laman web anda.

Anda boleh cuba lihat Home Page anda dengan buka laman web anda di tab baru.

Dan jangan lupa klik butang “Publish” (142) untuk Save. 

Seterusnya klik “X” untuk keluar dari customization ini.

Untuk melihat paparan logo dan icon yang anda masukkan tadi, buka laman web anda di tab baru.

.

Cara Tetapkan Footer Laman Web

Footer ialah bahagian bawah sekali di dalam laman web anda. Kalau anda perasan di bahagian Footer laman web saya ini, saya letakkan perkataan:
Fast Hosting By: WPX Hosting & Email Marketing By: MailerLite

Biasanya di bahagian Footer akan diletakkan link ke sosial media, contact, link
rekemen sesuatu (seperti yang saya buat) dan lain-lain yang anda rasakan perlu.

Cara untuk tetapkannya ialah, anda perlu pergi ke bahagian “Appearance” (143) dan klik “Customize” (144)

Klik pada “Footer Option” (145)

Untuk letakkan icon media sosial di bahagian Footer anda, klik “Footer Social Icons” (146)

Masukkan link laman media sosial anda pada ruangan yang disediakan.

Klik butang “<“(147) untuk balik ke Footer Option.

Seterusnya klik pada “Footer Contents” (148)

Dan masukkan info yang diperlukan. jangn lupa klik butang “Publish” (149) untuk save.

Siap bahagian Footer laman web anda! Tetapan dan design footer yang saya tunjukkan tadi adalah untuk Theme yang kita gunakan dalam contoh tutorial ini, iaitu Zerif Lite.

Ada Theme yang langsung anda tak boleh ubah apa-apa, dan ada yang lebih fleksibel, bergantung kepada jenis Theme yang anda install dalam laman web anda.

Walaubagaimanapun, cara untuk customize-nya semuanya hampir sama je. Jangan risau.

Seterusnya saya akan tunjukkan bagaimana untuk tetapkan sidebar laman web anda.

.

Cara Tetapkan Sidebar Laman Web

Sidebar ialah bahagian tepi laman web anda, samada sebelah kiri atau sebelah kanan.

Kebiasaannya digunakan di dalam laman web berkonsepkan blog seperti laman web saya. Jika anda layari bahagian blog laman web saya melalui komputer / desktop / laptop anda akan nampak paparan sidebar di sebelah kanan.

Apabila melayari menggunakan mobile / smartphone, sidebar sebelah kanan tadi akan turun ke bahagian bawah selepas kandungan page tersebut.

Jika anda tak perlukan sidebar, seperti yang saya lakukan pada bahagian tools pilihan laman web saya, anda boleh skip bahagian ini, ianya terpulang kepada anda.

Caranya ialah, anda perlu ke bahagian “Appearance” (150) dan klik butang “Widgets” (151)

Kemudian, anda akan sampai ke paparan Sidebar seperti di bawah. Anda boleh pilih komponen apa yang anda mahukan di dalam Sidebar anda.

Hanya klik pada komponen yang anda mahukan, hold dan drag masuk ke dalam kotak Sidebar di sebelah kanan.

Untuk delete komponen yang anda tak perlukan, klik pada anak panah ke bawah (drop down menu) dan tekan butang “Delete”.

.

Klik Sini Untuk Lihat Detail Servis Design Website Saya Pada Harga Diskaun 10%

.

Cara Tetapkan Menu Laman Web

Akhir sekali saya akan tunjukkan pula bagaimana untuk menetapkan Menu laman web anda. Kalau anda perasan sekarang, Menu laman web anda seperti paparan di bawah:

Semestinya anda tak mahu “Sample Page” berada di bahagian Menu anda kan.

Paling mudah anda boleh terus delete page tersebut.

Tetapi, bagaimana pula anda memang memerlukan beberapa page lain, cuma anda tak mahu page tersebut muncul di dalam Menu? Teruskan bacaan anda.

Caranya ialah, anda perlu pergi ke bahagian “Appearance” (152) dan klik “Menus” (153)

Jika anda nak tambah page lain ke Menu anda, ‘tick’ sahaja page yang anda mahukan, dan klik “Add To Menu”

Untuk buang page dari paparan Menu, anda hanya perlu klik anak panah ke bawah (drop down arrow) dan klik “Remove”

Untuk lihat perubahan Menu yang sudah dilakukan, buka laman web anda di tab baru.

Alhamdulillah, sekarang anda dah berjaya siapkan laman web anda sendiri!

.

Akhir Kata…

Tahniah! Anda sudah pun berjaya buat laman web dan blog anda sendiri. Tak susah sebenarnya. Okay jom saya recap balik apa yang anda telah belajar di dalam tutorial ini.

  1. Apa yang anda perlukan untuk bina laman web
  2. Cara daftar nama domain dan hosting
  3. Cara integrasikan/propagate domain dan hosting
  4. Cara install WordPress
  5. Setting asas laman web WordPress (termasuk mendapatkan https)
  6. Cara pilih dan install theme yang sesuai
  7. Cara pilih dan install plugin penting
  8. Cara memasukkan kandungan (content) di dalam laman web
  9. Cara ubah dan perincikan (customize) laman web anda (Home Page, Logo, Icon, Sidebar & Menu)

Cuma perlukan sedikit kesabaran dan kerajinan anda untuk mencuba. Asasnya saya telah tunjukkan kepada anda.

Walaubagaimanapun, jika anda tidak yakin untuk lakukannya sendiri, maklumlah mungkin kekok dengan aspek teknikal dan pelbagainya, saya boleh bantu anda..

Klik Sini Untuk Lihat Detail Servis Design Website Saya Pada Harga Diskaun 10%

This Post Has 4 Comments

  1. Terbaik tuan. Perkongsian ilmu yang menarik.
    Harap tuan Boleh buat tutorial cara add plugin Like Box ๐Ÿ‘๐Ÿ˜Š

    1. Alhamdulillah, terima kasih tuan Syafie. Moga bermanfaat untuk tuan.
      Like Box FB ya, ok In Sha Allah saya usahakan buat tutorialnya dalam masa terdekat. ๐Ÿ™‚

  2. Sy belajar dan cuba buat sendiri berpandukan cara yg tuan affiq kongsi. Terlalu teknikal dan sangat perlukan pengetahuan dan kreativiti utk hasilkan laman web yg baik. Timasih atas perkongsian tuan.

    1. Ya tuan cuba dahulu, jika sudah faham konsepnya dah mudah nanti. Sama-sama, moga bermanfaat untuk tuan. ๐Ÿ™‚

Leave a Reply

Perlukan Servis Design Website Yang Profesional, Cantik & Responsif Pada Harga Berpatutan?

Perlukan Servis Design Website Yang Profesional, Cantik & Responsif Pada Harga Berpatutan?

Belajar Ilmu Bisnes Online Lengkap & Terkini Dalam 1 Komuniti - IM LEJEN