Cara Mudah Mengganti Background Thema
Mungkin Anda sudah mengetahui bahwa warna mengandung makna psikologis bagi orang yang melihatnya. Semakin nyaman dipandang mata, semakin betahlah orang yang mengunjungi blog Anda.
Memilih warna untuk sebuah desain blog memerlukan kombinasi yang tepat. Semakin tepat kombinasi yang dipadukan, akan berdampak kepada pengalaman pengguna yang lebih baik.
Begitu juga sebaliknya, pemilihan kombinasi warna yang kurang tepat , dapat menyebabkan pengalaman pengguna yang buruk, akibatnya pengunjung blog Anda malas untuk datang kembali.
Pada artikel kali ini, saya akan memberikan tips bagaimana kita memilih dan mengganti warna template blog sehingga semakin menarik dan nyaman dipandang oleh mata pengunjung Anda.
Cara mudah mengganti warna Template blog
1. BUKA TEMPAT MENGEDIT TEMPLATE BLOG DAN BUKA JUGA BLOG ANDA (VIEW BLOG)
Buka web browser Anda (sebagai contoh disini saya menggunakan Chrome browser), lalu buka 2 tab baru yang akan digunakan untuk merubah warna template blog Anda. Adapun yang perlu Anda buka adalah sebagai berikut:
Tab #1 - Tempat edit dan save template blog
Tab #1 ini digunakan sebagai tempat mengedit dan menyimpan template blog Anda, lalu loginlah ke dalam blogger.com. (masuk ke menu theme >> edit html). Tab ini fungsinya untuk menerapkan hasil pilihan warna yang sudah kita temukan dan kita rasa cocok untuk digunakan pada template.
Tab #2 - Lihat Blog pada tab baru
Buka tab baru dengan mengklik tombol view blog. Tab ini kita tandai sebagai tab #2 yang merupakan tampilan blog Anda. Tab #2 ini akan kita gunakan sebagai simulasi untuk mengubah warna elemen pada template.
Anda tidak perlu khawatir warna pada template blog asli Anda akan berubah warnanya (sebelum dilakukan edit html pada template). Di tab ini hanyalah sebagai contoh apakah warna yang nanti akan kita gunakan, tepat dan cocok untuk blog Anda.
2. MENCARI DAN MEMILIH KODE WARNA PADA TEMPLATE BLOG
Setelah Anda membuka 2 tab seperti diatas, maka kita akan menuju pada Tab #2 (tampilan blog Anda). Tab #2 ini akan kita fungsikan sebagai tempat untuk melihat preview pengganti warna maupun kode CSS yang akan di ubah.
2¹. Menggunakan Inspect Elemen
Pada sembarang tempat tampilan blog Anda, klik kanan mouse, lalu pilih menu Inspeksi (atau gunakan tombol pada keyboard ctrl + shift + i). Menu inspeksi akan terbuka seperti gambar berikut (klik untuk memperbesar gambar)
Setelah menu inspeksi terbuka, ada 2 kolom yang perlu Anda perhatikan. kolom disebelah kiri adalah struktur html template yang sedang Anda buka, kolom sebelah kanan adalah struktur kode CSS template halaman tersebut.
2². Memilih elemen yang akan diganti warnanya
Langkah selanjutnya setelah menu inspeksi terbuka adalah kita akan memilih bagian/elemen yang akan kita ganti warnanya. Pada contoh berikut, kita akan mengganti warna pada elemen header blog.
° Klik gambar kotak bertanda panah mouse di sudut kiri atas menu inspeksi.
° Arahkan mouse ke bagian elemen header blog Anda
° Perhatikan elemen yang terblok oleh mouse
° Klik bagian elemen header yang terblog secara penuh
2³. Preview pemilihan dan penggantian warna elemen pada template blog
Setelah Anda memblok elemen header blog, langkah selanjutnya adalah Anda perlu melihat sisi sebelah kanan menu inspeksi tempat struktur kode css header blog Anda. Pada contoh gambar 2 diatas, kode css header blog ini adalah :
a. CSS Selector : .header-inner .Header #header-inner {
b. CSS Declaration : overflow: hidden; background-color: #1C326C; box-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.55); }
Untuk preview penggantian warna elemen header blog,
arahkan mouse Anda pada CSS Declaration yang bertuliskan background-color:#1C326C; .
Lalu klik pada kotak kecil berwarna biru didepan kode warna #1C326C.
Akan muncul pop up berisi warna dan kode warna, arahkan pada kotak warna tersebut, dan lihat perubahan warna yang terjadi di elemen header blog anda.
Setelah Anda menemukan pilihan warna yang cocok untuk digunakan, copy kode warna baru yang sudah Anda pilih tadi, lalu pastekan sementara ke dalam aplikasi notepad komputer Anda.
3. MENGGANTI KODE WARNA DI TEMPLATE BLOG
Untuk mengganti warna header blog sesuai dengan warna yang sudah kita pilih tadi, ikuti langkah berikutnya:
Buka blogger.com, lalu masuk ke blog yang akan diubah, pilih menu theme, kemudian klik edit html (Tab #1 yang sudah kita siapkan sebelumnya).
Jangan lupa untuk mem-Back up template Anda terlebih dahulu.
Gunakan ctrl+F untuk mencari kode css elemen header blog (lihat pada menu inspeksi sebelah kanan Anda di Tab #2 sebelumnya, tepat pada CSS selector : .header-inner .Header #header-inner).
Setelah Anda menemukan kode CSS yang sama persis dengan kode CSS di menu inspeksi, ubah kode warna pada background-color (#1C326C) menjadi kode warna sesuai dengan pilihan Anda sebelumnya yang sudah di paste-kan kedalam notepad (contoh diatas menggunakan kode warna #09A748 untuk warna hijau)
Lihat preview template Anda, perhatikan perubahan warna pada bagian elemen header blog.
Jika sudah sesuai lakukan save untuk menyimpan penggantian warna tersebut
Memilih warna untuk sebuah desain blog memerlukan kombinasi yang tepat. Semakin tepat kombinasi yang dipadukan, akan berdampak kepada pengalaman pengguna yang lebih baik.
Begitu juga sebaliknya, pemilihan kombinasi warna yang kurang tepat , dapat menyebabkan pengalaman pengguna yang buruk, akibatnya pengunjung blog Anda malas untuk datang kembali.
Pada artikel kali ini, saya akan memberikan tips bagaimana kita memilih dan mengganti warna template blog sehingga semakin menarik dan nyaman dipandang oleh mata pengunjung Anda.
Cara mudah mengganti warna Template blog
1. BUKA TEMPAT MENGEDIT TEMPLATE BLOG DAN BUKA JUGA BLOG ANDA (VIEW BLOG)
Buka web browser Anda (sebagai contoh disini saya menggunakan Chrome browser), lalu buka 2 tab baru yang akan digunakan untuk merubah warna template blog Anda. Adapun yang perlu Anda buka adalah sebagai berikut:
Tab #1 - Tempat edit dan save template blog
Tab #1 ini digunakan sebagai tempat mengedit dan menyimpan template blog Anda, lalu loginlah ke dalam blogger.com. (masuk ke menu theme >> edit html). Tab ini fungsinya untuk menerapkan hasil pilihan warna yang sudah kita temukan dan kita rasa cocok untuk digunakan pada template.
Tab #2 - Lihat Blog pada tab baru
Buka tab baru dengan mengklik tombol view blog. Tab ini kita tandai sebagai tab #2 yang merupakan tampilan blog Anda. Tab #2 ini akan kita gunakan sebagai simulasi untuk mengubah warna elemen pada template.
Anda tidak perlu khawatir warna pada template blog asli Anda akan berubah warnanya (sebelum dilakukan edit html pada template). Di tab ini hanyalah sebagai contoh apakah warna yang nanti akan kita gunakan, tepat dan cocok untuk blog Anda.
2. MENCARI DAN MEMILIH KODE WARNA PADA TEMPLATE BLOG
Setelah Anda membuka 2 tab seperti diatas, maka kita akan menuju pada Tab #2 (tampilan blog Anda). Tab #2 ini akan kita fungsikan sebagai tempat untuk melihat preview pengganti warna maupun kode CSS yang akan di ubah.
2¹. Menggunakan Inspect Elemen
Pada sembarang tempat tampilan blog Anda, klik kanan mouse, lalu pilih menu Inspeksi (atau gunakan tombol pada keyboard ctrl + shift + i). Menu inspeksi akan terbuka seperti gambar berikut (klik untuk memperbesar gambar)
Setelah menu inspeksi terbuka, ada 2 kolom yang perlu Anda perhatikan. kolom disebelah kiri adalah struktur html template yang sedang Anda buka, kolom sebelah kanan adalah struktur kode CSS template halaman tersebut.
2². Memilih elemen yang akan diganti warnanya
Langkah selanjutnya setelah menu inspeksi terbuka adalah kita akan memilih bagian/elemen yang akan kita ganti warnanya. Pada contoh berikut, kita akan mengganti warna pada elemen header blog.
° Klik gambar kotak bertanda panah mouse di sudut kiri atas menu inspeksi.
° Arahkan mouse ke bagian elemen header blog Anda
° Perhatikan elemen yang terblok oleh mouse
° Klik bagian elemen header yang terblog secara penuh
2³. Preview pemilihan dan penggantian warna elemen pada template blog
Setelah Anda memblok elemen header blog, langkah selanjutnya adalah Anda perlu melihat sisi sebelah kanan menu inspeksi tempat struktur kode css header blog Anda. Pada contoh gambar 2 diatas, kode css header blog ini adalah :
a. CSS Selector : .header-inner .Header #header-inner {
b. CSS Declaration : overflow: hidden; background-color: #1C326C; box-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.55); }
Untuk preview penggantian warna elemen header blog,
arahkan mouse Anda pada CSS Declaration yang bertuliskan background-color:#1C326C; .
Lalu klik pada kotak kecil berwarna biru didepan kode warna #1C326C.
Akan muncul pop up berisi warna dan kode warna, arahkan pada kotak warna tersebut, dan lihat perubahan warna yang terjadi di elemen header blog anda.
Setelah Anda menemukan pilihan warna yang cocok untuk digunakan, copy kode warna baru yang sudah Anda pilih tadi, lalu pastekan sementara ke dalam aplikasi notepad komputer Anda.
3. MENGGANTI KODE WARNA DI TEMPLATE BLOG
Untuk mengganti warna header blog sesuai dengan warna yang sudah kita pilih tadi, ikuti langkah berikutnya:
Buka blogger.com, lalu masuk ke blog yang akan diubah, pilih menu theme, kemudian klik edit html (Tab #1 yang sudah kita siapkan sebelumnya).
Jangan lupa untuk mem-Back up template Anda terlebih dahulu.
Gunakan ctrl+F untuk mencari kode css elemen header blog (lihat pada menu inspeksi sebelah kanan Anda di Tab #2 sebelumnya, tepat pada CSS selector : .header-inner .Header #header-inner).
Setelah Anda menemukan kode CSS yang sama persis dengan kode CSS di menu inspeksi, ubah kode warna pada background-color (#1C326C) menjadi kode warna sesuai dengan pilihan Anda sebelumnya yang sudah di paste-kan kedalam notepad (contoh diatas menggunakan kode warna #09A748 untuk warna hijau)
Lihat preview template Anda, perhatikan perubahan warna pada bagian elemen header blog.
Jika sudah sesuai lakukan save untuk menyimpan penggantian warna tersebut
0 Response to "Cara Mudah Mengganti Background Thema"
Post a Comment
Silahkan Berkomentar Dengan Baik!!!