Cara mudah mengganti warna background template blog

Mengelolablog.com - Anda bosan dengan tampilan blog Anda ? Ingin mengganti layout, tapi tidak terlalu paham caranya ? Cara termudah untuk memberikan kesegaran bagi tampilan blog  adalah dengan mengganti warna background template blog Anda.

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.

Memilih dan mengganti warna tempate blog

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:

1.1. 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.

1.2. 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.1. Gunakan menu Inspeksi

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) :

Gambar 1 . Menggunakan menu inspeksi

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.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

lihat gambar animasi berikut :

Gambar 2. Memilih elemen blog  yang akan diganti warnanya

2.3. 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.

Lihat gambar animasi berikut:

Gambar 3. Preview mengganti warna elemen blog

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

Update 5 Maret 2017 :

Terhitung Maret 2017 Menu Template yang terletak disisi kiri sudah berganti nama menjadi Theme

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

Mengganti warna elemen template blog

Tips memilih dan menemukan warna template blog 

Ada 3 cara yang biasa saya gunakan untuk memilih warna yang cocok untuk digunakan dalam template blog, apa saja caranya? simak penjelasan dibawah berikut.

1. Menggunakan search engine 

Cara pertama dan paling mudah adalah dengan menggunakan search engine (pilih mode pancarian gambar) untuk menemukan warna yang akan kita gunakan dalam template blog.

Anda bisa mengunakan keyword seperti "color combination" , "color gradation", "color schemes" ataupun keyword lainnya yang berkaitan dengan kombinasi warna.

Pada hasil pencarian gambar, biasanya terdapat macam-macam warna yang akan kita jumpai, lengkap beserta kombinasi warna yang cocok dengan warna dasarnya.

2. Menggunakan kombinasi warna pada web tool  gratisan

Cara kedua adalah dengan mengunjungi langsung web tool gratisan yang menyediakan tool untuk menemukan kombinasi warna yang kita butuhkan. Beberapa webtool yang bisa saya referensikan untuk menemukan warna adalah

• Paletton.com 
• Color.adobe.com 
• Coolors.co 

Untuk menemukan warna-warna pilihan, Anda tinggal menggeser mouse pada roda warna (wheel color).

Dengan menggeser mouse pada wheel color ke warna pilihan Anda, secara mudah Anda akan menemukan kombinasi warna yang bisa Anda gunakan pada template anda nantinya.

Anda cukup mensavenya untuk digunakan saat mengganti warna template blog.

3. Manfaatkan warna Template blog / web orang lain

Cara terakhir yang bisa digunakan untuk menemukan pilihan warna yang pas untuk template blog adalah dengan menggunakan kombinasi warna yang ada pada template orang lain. Bisa dengan memanfaatkan blog / web favorit Anda atau dengan mencarinya pada situs-situs penyedia template gratis.

Setelah Anda menemukan kombinasi pilihan warna yang pas dan cocok untuk digunakan, langkah selanjutnya adalah menerapkan warna-warna tersebut kedalam  template blog Anda.

Perlu diketahui sebelumnya bahwa didalam halaman blog / web, kode warna akan berbentuk 6 kombinasi huruf dan angka dengan diawali tanda pagar (#) contohnya :

• Oranye ( #FFA500 )
• Hitam ( #000000 )
• Merah ( #FF0000 )
• Hijau ( #008000 )

Kode warna untuk web jumlahnya sangat banyak, tapi tenang saja, Anda tidak perlu menghafal semua kode warna tersebut, cukup copy paste saja untuk melakukannya seperti pada cara yang sudah saya infokan diatas.

Baca juga: Warna yang paling disukai oleh pengguna internet

Kesimpulan

Cara-cara tersebut diatas dapat Anda gunakan untuk mengganti warna pada elemen blog lainnya seperti background template, elemen post body, sidebar, widget dan lain-lain. Sesuaikan warna dengan kombinasi yang tepat dan segarkan tampilan warna blog Anda. Demikianlah artikel Cara Memilih dan mengganti warna tempate blog ini bisa saya sampaikan. Selamat mencoba.