DevTools : Ubah Suai Theme Blog Tanpa Merosakkan Kod Html/CSS

Ada baca tak perkongsian Syu pasal - CTRL + U & F12 : Cara Nyahaktif Fungsinya Di Blogger kemarin? Tak baca lagi? Tak apa, Nanti ada freetime korang baca okey 😊. Hari ni Syu nak buat sedikit perkongsian dengan korang macam mana nak buat pengubahsuaian design blog korang dengan menggunakan salah satu dari butang shortcut ni. Walaupun korang tak ada pengetahuan asas & pengalaman langsung pasal CSS & html. Syu yakin, korang sendiri pun boleh cutomize kan blog korang sendiri dengan menggunakan DevTools. Tapi, sebelum nak gunakan DevTools ni, make sure korang aktifkan semula fungsi butang shortcut F12. Kalau korang tak ada apply. Korang boleh proceed dengan pengubahsuaian template menggunakan DevTools. 

Syu tahu mesti ramai yang takut nak kacau bahagian html bila nak buat customization theme pada blog kan? Syu dulu pun noob jugak pasal koding-koding ni. Sepatah haram pasal CSS & html pun Syu tak tahu. Tapi, selepas Syu banyakkan membaca & rujuk artikel-artikel pasal CSS & html. Alhamdulillah, ada lah bertambah sikit kemahiran asas Syu bermain dengan kod-kod. Bila nak edit html  tu memang seram & takut sangat kan. Bukan apa, takut tersalah masuk kod. Syu faham. Dulu Syu pun macam tu jugak. Tapi sekarang dah biasa dah 😉. Sebab Syu sendiri dah tahu nak buat macam mana. 

Memandangkan Syu dah tahu caranya serba sedikit. Tak menjadi masalah sekiranya Syu kongsikan dengan korang. Tambah-tambah pada mereka-mereka yang tak ada keberanian nak buat pengubahsuaian pada blog  😁. Sejujurnya, sampai sekarang Syu masih lagi belajar macam mana nak apply sesetengah kod dalam blog. Tapi, sejak gunakan fungsi DevTools (Developer tools), kerja pengubahsuaian blog Syu jadi lebih mudah & sekaligus dapat mengurangkan kesilapan Syu dari memasukkan kod yang salah ketika mengedit html. 

Cuma satu perkara korang kena ingat. Devtools ni hanya sekadar petunjuk kepada elemen yang korang nak inspect & ubah sahaja. Sebarang pengubahsuaian di DevTools tak akan di apply secara automatik pada blog. Ianya hanya sekadar alternatif lain bagi mengurangkan risiko korang tersalah sentuh & masukkan kod CSS pada blog. Satu perkara lagi, sebelum menyentuh sebarang kod di bahagian THEME, pastikan korang buat backup terlebih dahulu. Kalau korang tak buat sebarang backup, ianya akan jadi satu masalah bila korang nak recover balik kod yang korang dah ubah. Yang ni wajib buat dulu okey!!😉

CARA GUNA DEVTOOLS UNTUK UBAHSUAI TEMPLATE

Untuk pengetahuan korang, DevTools ni korang boleh guna dengan cara menekan butang F12 atau CTRL +  SHIFT + I.  Dengan adanya DevTools ni, ianya membolehkan korang kenalpasti kod-kod CSS & html yang korang nak adjust masa tukar design blog nanti. sebaik sahaja fungsi DevTools ni dipaparkan, secara automatik akan dipaparkan juga segala kod CSS & html dalam blog korang. Tapi, korang kena ingat. Sebarang pengubahsuaian kod pada bahagian ni tak akan mengubah apa-apa pada design blog korang. Jadi, nak tak nak korang kena pergi ke bahagian theme juga untuk buat pengubahsuaian kod.

Nak inspect kesilapan elemen blog korang senang jer. Selepas DevTools dipaparkan. Korang cuma perlu tekan butang INSPECTION (ARROW Icon) atau tekan CTRL+ Shift + C. Kemudian, korang hanya perlu klik dekat mana-mana bahagian elemen blog yang korang nak tukar atau betulkan. Once dah jumpa, korang cuma perlu masukkan kod CSS yang korang nak tambah. Lepas dah nampak hasilnya, korang boleh proceed untuk ADD CSS di bahagian CUSTOMIZE THEME atau EDIT HTML.

Berkenaan dengan kod CSS ni sejujurnya korang kena belajar juga kodnya sikit-sikit. Supaya korang tahu elemen apa yang korang nak ubah pada blog korang 😊. Masa ni korang kena try & error sikitlah yer. Sebab ada masa & ketika kebarangkalian kod yang korang masukkan tu mungkin tak berjaya. Tapi, dengan cara yang Syu tunjuk ni sekurang-kurangnya boleh kurangkan kadar kesilapan korang memasukkan kod yang salah pada html/CSS di ruangan theme. Sekurang-kurangnya theme/template blog korang tak jadi caca merba.

So, setakat ni sahaja perkongsian Syu. Next entri Syu akan kongsi lebih details macam mana korang nak ambil & gunakan kod-kod CSS tu untuk dimasukkan ke dalam theme/template korang. Sekiranya korang ada sebarang pertanyaan & kemusykilan, korang boleh drop di bahagian komen atau di Contact Form. Semoga perkongsian Syu ni dapat memudahkan korang untuk perbaiki masalah design blog korang. Andai perkongsian Syu ni tak membantu, sebaiknya korang hubungi semula web designer korang atau cari mana-mana expertise yang hebat dalam pengubahsuaian blog. Mungkin korang boleh dapatkan servis dari Alien Oren (AO) untuk buat blog refreshment 😉🍎.