Memodifikasi template merupakan pekerjaan tersendiri. Untuk mendapatkan template yang ramah mesin pencari, ringan saat loading, dan nyaman dibaca tentunya membutuhkan kemampuan dasar yang mau tidak mau harus dikuasai. Walaupun banyak tersedia template gratis, namun tidak sedikit juga yang merasa kurang puas dengan template gratisan tersebut.
Ada beberapa kekurangan yang kadang dimiliki oleh template gratis. Pertama adalah dibenamkannya script yang terlalu banyak, sehingga memperlambat loading blog. Kedua, tidak mudahnya memodifikasi kode yang sudah ada. Ketiga, proses editing template yang tidak mudah karena sifatnya yang gratis sehingga tidak dapat mengganti sesuai keinginan. Dan tentunya masih banyak kekurangan lainnya.
Jadi apa yang harus dilakukan? Hal termudah adalah dengan menggunakan template bawaan dari platform, untuk kemudian dilakukan modifikasi seperlunya untuk tampilan sesuai keinginan. Template bawaan, sifatnya lebih ringan karena tidak ada script berat yang dibenamkan dan dapat menyesuaikan tampilan sesuai keinginan. Selain itu, minimalis akan selalu menjadi desain yang terbaik bukan.
Hal dasar untuk memodifikasi tampilan adalah dengan mengubah CSS. CSS itu sendiri adalah kode yang dapat mempercantik setiap bagian dari template. Bahasa mudahnya adalah pakaian. Jadi blog tersebut menggunakan baju warna merah, celana hitam, dengan asesoris. Dengan kode CSS inilah kita dapat menentukan setiap warna atau asesoris setiap bagian.
Kode CSS contohnya berbentuk seperti di bawah ini :
body {
font-size: 20px;
font-family: “Arial”, Times New Roman;
color: #444444;
}
Akan tetapi saat ingin mengubah dan mengimplementasikan CSS, kita memerlukan kode di elemen yang tepat. Seperti misalnya ingin mengubah ukuran font tulisan menjadi besar, maka penggantian ukuran juga harus pada elemen yang tepat. Pada saat inilah kita membutuhkan fitur Inspect Element pada browser. Baik itu Mozilla Firefox, Safari, maupun Chrome. Semua browser akan selalu dilengkapi dengan fitur Inspeksi setiap elemen.
Dengan fitur ini, kita dapat melakukan inspeksi pada setiap bagian yang ingin kita rubah CSSnya. Bahkan kita langsung dapat mengganti dan melihat hasilnya seperti apa. Baru setelah dirasa cocok, kita bisa memasukkan kodenya pada kode editing blog. Semua kode CSS dapat diimplementasikan. Seperti misalnya mengubah judul di tengah, menghilangkan bayang-bayang, atau menambah garis.
Klik Kanan dan Klik Inspect Element
Langkah mudah untuk fitur Inspect Element ini adalah dengan klik kanan pada blog yang akan diedit kemudian pilih Inspect Element. Kemudian akan keluar box yang ada di bawah dan klik icon pembesar pada kiri atas box. Setelah itu bisa langsung mengarahkan kursor pada element yang akan diubah. Sedangkan box sebelah kanan adalah rangkaian kode CSS yang dimiliki oleh elemen tersebut. Baru kemudian, kita bisa menambahkan atau mengurangi kode yang sudah ada.
Bagian 1
Icon pembesar untuk mengarahkan kursor dan menunjukkan bagian HTML dari elemen tersebut.
Bagian 2
Bagian elemen yang dimaksud. Akan ada highlight sehingga menunjukkan posisi elemen yang benar.
Bagian 3
Kode CSS yang dapat kita modifikasi. Bisa menghapus dan menambahkan kode sesuai keinginan. Setelah dirasa sudah pas, maka kode tersebut baru kita pindahkan ke dalam kode editing blog. Kode yang kita ganti pada Inspect Element hanya bersifat sementara dan melihat hasil dari penggunaan kode.
Mencari Error Pada Blog
Fitur Inspect Element ini juga dapat digunakan untuk mencari error pada blog. Seperti misalnya ada link yang tiba-tiba muncul, ada elemen tambahan, dan muncul kode-kode aneh. Dengan menemukan asal muasal kodenya melalui Inspect Element, maka hal ini akan mudah diatasi. Maka jangan ragu untuk mencoba dan bereksperimen dengan Inspect Element.
Selamat mencoba 🙂
hiks.. mengapa oh mengapa sudah dua kali balik baca postingan ini masih belum mudeng jugaa
Help meee….
Jujur meski ada yg pingin diberesin tapi takut banget utak atik css ini mak Shin.
*gaptek dipiara*
Aku suka utak-atik langsung di templatenya tapi kemudian pusing hihihi … Makasih sudah share ya Mak Shinta, dengan begini jadi lebih mudah 😀
Pakai inspect element memang lebih mudah jadi bisa lihat seluruh kode CSS, HTML, dan Javascript. Buat web design jadi lebih mudah
kalau untuk blogspot aku udah ok mak, tapi untuk wordpress masih mengawang-awang
info dan tutorialnya okeee bangeeeet…tapi kalau ngga langsung dipraktikkan ngg mudeng yaaah judulnyaaa…TFS yaa 🙂
Kalau untuk worpres edit css di mana ya? Apakah tidak menganggu kinerja dari theme yang dipakai? Terima kasih atas jawabannya.
Lagi cari2 tentang CSS ketemu blog ini, pas banget! Keren nih ada komunitas bloggerperempuan.com, kapan ya bloggerpria :v
Baru sadar inspect elemen bisa dipake buat cobain ngedit tampilan, biasanya byk dipake buat ngasih liat seolah earning iklan dapet banyak :))
mau tanya,
emang kode css di luar blog yg dilihat pake inspect element, sama persis ya sama kode di editing blog?
kalo sama, berarti gampang dong copy template orang …
Iya betul kode-nya css-nya sama. Memang jadinya bisa copy template orang, gampang enggaknya tergantung kemampuan hehehe…
Terus terang saya nemu blogger perempuan yg tahu atau belajar coding2 baru mbak. Mungkin yang lain banyak cuma saya belum tahu. Btw bagus mbak layout blognya.
ikut belajar ah. kebetulan lagi ngoprek template.
Selamat siang mbak, mau nanya template blognya bikin dimana/download dimana? soalnya tampilan minimalis, bersih. saya lagi cari2 template seperti ini. Terima kasih sebelumnya.
Selamat siang mbak, setelah kita inspeksi elemen dancara save nya gmn mbk? mhn bantuannya.
halu,
kodenya di copy dan dipaste di editing cssnya ya. Kalau di blogspot, adanya di template designer -> advanced -> edit css.
Kalau WP ganti di style.css 🙂
Wahh maksih mba..langsung saya praktekin di blog wp saya dan berhasil
sekarang tampilan we saya lebih cantik dan tulisannya enak dibaca
sekali lagi terimakasih ilmunya
Makasih banyak Mbak atas sharing ilmunya, ada rekomendasi font yang bagus gak Mbak? Bingung nih nentuin
Yang penting bisa dibaca, antara sans serif dan serif aja. Pakai keduanya. Jangan pakai huruf script ya. Kalau mau lihat font untuk web di sini: https://fonts.google.com/
Siap Mbak Shinta, terima kasih banyak 🙂 semoga bisa seperti Mbak nih, memberikan manfaat untuk orang lain lewat tulisan
makasih mba…..
mba, kalo boleh tau refrensi ilmu ini yang enak dicerna buat kita yang pemula dimana ya ?
Jangan pernah merasa bosan yak untuk selalu memberi informasi kepada semua orang 🙂
saya juga sering nih pake inspect element, sangat membantu untuk mengedit tampilan.
Good luck
Saya udah bikin web nih kak, tapi ga tau yang gitu gituannya :p heu heu. maklum anak alay kak. bisa banget nih dipake cara ke gitu, makasih kak artikelnya memberikan pencerahan untuk kita semua.
Sudah mengikuti petunjuk diatas. Ternyata lebih mudah baca yah, daripada praktek, hiks…