Blog Gado-Gado_Multi Niche

Cara Mengganti Warna Background Template Blog dengan Photoshop

Cara Mengganti Warna Background Template Blog dengan Menggunakan Software Photoshop- Kenyamanan pengunjung dalam membaca artikel blog kita merupakan hal yang sangat penting para Blogger utamakan. Banyak faktor yang membuat pengunjung nyaman ketika berkunjung di blog kita, salah satu diantaranya adalah kombinasi warna blog yang kita suguhkan. Sahabat Blogger, jika Anda ingin mengubah warna background pada tempalate blog seperti mengganti warna background blog utama, warna background menu header, sidebar, footer, warna link, dan warna-warna lainnya di blog, maka Anda bisa dengan mudah menggantinya dengan bantuan perangkat lunak editor Photoshop. Sebenarnya mengganti warna background blog dengan cara manual pun dapat dilakukan, namun untuk mengetahui kode warna di tempalte blog yang akan diganti memang harus dilakukan dengan sangat teliti agar tidak terjadi kesalahan sasaran penggantiannya. Jadi ada baiknya dalam mengubah warna blog, Anda menggunakan photoshop.

Sahabat Blogger, dalam pembahasan di sini saya akan menyampaikan cara mengganti berbagai warna tempalte blog, khususnya pada dashboard/dasbor Blogger, walaupun sebenarnya di dasbor platform lain pun pada dasarnya caranya sama.

Cara Mengganti Warna Background Blog di Photoshop
Sebelum mengganti warna background blog tentunya Anda harus mengetahui dulu kode warna yang saat ini diterapkan/dipakai di blog Anda. Nah untuk mengetahuinya, maka cara praktisnya adalah buka atau kunjungi blog Anda. Sebagai contoh, saya akan mengganti warna background blog Infocarabisnis.com, maka saya harus mengunjungi blog tersebut dan juga membuka photoshop ( boleh membuka blog dulu kemudian buka photoshop dan sebaliknya, karena intinya melakukan screenshot blog ke photoshop ).

1. Buka blog yang akan diganti warna backgroundnya

Cara Mengganti Warna Bacground Blog
 Background Blog

Background blog Infocarabisnis.com berwarna biru, namun saya sendiri lupa dengan kode warna biru yang kupakai sebagai warna background blog tersebut, untuk mengetahui kode warna background tersebut, maka saya melanjutkan pencarian kode warna dengan cara yang ke-2 di bawah ini.

2. Menekan tombol CTRL + PRTSC SYSRQ
Setelah blog Infocarabisnis.com saya buka, selanjutnya saya melakukan screenshot dengan cara menekan tombol CTRL dan PRTSC SYSRQ di keyboard PC/Komputer/Laptop secara bersamaan ( jika di keyboard PC/Laptop Anda tidak ada tombol PRTSC SYSRQ, maka silakan tekan control + tombol apa saja yang penting fungsinya sama yakni melakukan screenshot gambar di halaman komputer ).

3. Buka Photoshop
Silakan Anda membuka Adobe Photoshop/Photoshop  CS3/Photoshop CS4 atau CS lainnya tidak masalah karena dasarnya sama. Pada tutorial ini kebetulan saya menggunakan Adobe Photoshop CS3.
Photoshop
Adobe Photoshop

Setelah Photshop terbuka, kemudian klik "File" dan "New", maka akan tampil seperti screenshot di bawah ini:

Adobe Photoshop

Untuk form name/nama secara default bertuliskan Untitled-1, tulisan tersebut boleh diganti dengan nama sesuai keinginnan Anda, dan jika tidak diganti pun tidak masalah, jadi baik form name diganti atau tidak itu tidak berpengaruh apa pun, hanya saja jika Anda ingin menyimpan screenshotnya ke dalam file maka sebaiknya kasih nama agar mudah mengingat/mencarinya. Langkah selanjutnya yaitu mengeklik tombok "OK" sehingga akan ada tampilan layar kosong di photoshop tersebut. Untuk screenshot layar kosong tidak saya tampilkan di halaman ini karena meruapakan hal yang sudah maklum.

4. Setelah tampil layar kosong, silakan Anda tekan control V / tekan tombol CTRL dan V di keyboard PC/Laptop Anda. ( ingat : pastikan pada langkah 2 sudah Anda lakukan )

Kode Warna Background Blog
  • #1. arahkan ujung crusor simbol pensil ke arah warna manapun yang ingin Anda ketahui kode warnanya. Pada contoh, saya mengarahkan ke warna background blog Infocarabisnis.com yang berwarna biru.
  • #2. Klik kotak kecil/persegi yang warnanya tentunya sudah sama atau dalam kata lain sudah berubah sesuai warna yang ditunjuk oleh ujung crusor pensil tersebut. Dalam contoh ini warna biru sama dengan biru yang ditunjuk oleh crusor simbol ujung pensil.
5. Copy Kode Warna yang akan diganti

Kode Warna di Photoshop

  • #1. Setelah Anda mengeklik persegi seperti pada langkah ke-4, maka Anda akan mendapatkan kode warnanya. Dalam hal ini saya mendapatkan kode warna biru #97D7e1
  • #2. Silakan copy kode warna tersebut, kemudian pastekan di tempat lain, misalnya di microsoft office word. Biarkan dulu kode warna tersebut parkir di word.
Cara mencari/mendapatkan kode warna yang akan dijadikan pengganti warna background blog
  • #3. Seperti yang ditunjuk pada simbol telunjuk tangan di atas adalah pilihan berbagai jenis warna, jika Anda ingin mengetahui kode warna apa pun, silakan geser crusor sesuai dengan warna yang Anda inginkan, maka di kolom telunjuk nomor 1 akan ada kode warnanya, kemudian copy dan pastekan di word
  • #4. Simbol yang ditunjuk oleh telunjuk nomor 4 adalah alternatif untuk menggeser jenis warna yang fungsinya sama dengan fungsi yang ditunjuk oleh telunjuk 3, kode warnanya pun bisa Anda dapatkan di kolom telunjuk 1.
Selain cara mendapatkan kode warna dengan menggunakan  photoshop, Anda juga bisa mendapatkan kode warna dengan mengunjungi situs-situs yang menyediakan kode warna, salah satu web penyedia kode wana  yaitu wikipedia.org, silakan klik Daftar Lengkap Kode Warna

Daftar Kode Warna
Daftar Kode Warna

Shabat Blogger, setelah Anda mengetahui kode warna background blog yang akan diganti (contoh kode warna biru : 97b7e1 ) dan sudah menemukan kode warna penggantinya ( contoh kode warna hijau : 20b2aa ), maka silakan Anda lanjtkan proses penggantian warna background blog ke langkah yang ke-6 di bawah ini.

6. Kunjungi www.blogger.com
Untuk mengubah warna background blog, anda harus login di blogger.com, setelah masuk di dasbor blogger, silakan Anda mengeklik "template" kemudian klik "edit HTML"
Edit HTML Template Blogger

7. Lakukan Replace Kode Warna
Setelah tampilan di laptop/komputer Anda sudah muncul halaman edit HTML, silakan crusornya geser/arahkan tepat di halaman yang berisi berbagai macam kode-kode HTML dan lain-lain tersebut
( peletakkan crusornya bebas di mana pun, yang penting masih dalam kotak halaman edit HTML, namun enaknya ya di bagian atas ), kemudian tekan tombol CTRL + SHIFT + R secara bersamaan sehingga akan muncul tulisan "Replace all", selanjutnya isi/masukkan kode warna bakcground lama di kolom replace all tersebut (pada contoh di bawah ini saya memasukkan kode 97b7e1), kemudian klik/tekan tombol "ENTER".
Replace Kode Warna Background Blog
8. Masukkan kode warna pengganti warna background blog
Setelah Anda mengeklik "ENTER" seperti keterangan pada langkah ke-7 di atas, maka akan ada tampilan seperti screenshot di bawah ini.

Ketikkan Kode Warna Pengganti Background Blog

Masukkan kode warna pengganti di kolom "with" ( pada contoh di atas, saya memasukkan kode warna hijau : 20b2aa ), kemudian tekan "ENTER".

9. Simpan template blogger
Setelah kode warna pengganti sudah masuk ke halaman edit HTML, silakan klik "Simpan template". Selesai


10. Contoh tampilan blog Infocarabisnis.com yang sudah dianti warna backgroundnya :

Tampilan blog sudah diganti warna bacgroundnya


Sahabat Bloger, ternyata mengganti warna background blog itu cukup mudah, namun sebaiknya Anda teliti dulu sebelum mengganti warna background blog, agar penggantian warnanya bisa berhasil dengan baik. Mengapa harus hati-hati dan teliti dalam mengganti background blog?, karena tentunya antara tempalte blog yang satu dengan lainnya memiliki penerapan kode warna yang berbeda-beda.

Misalkan ada tempalte blog yang setelan penerapan warna antara warna  background blog dengan warna link dibuat sama, warna background sidebar dengan background menu navigasi diheader dibuat sama, dan lain sebagainya.

Jadi pastikan bahwa tujuan Anda mengubah warna background adalah untuk memperindah/mempercantik tampilan blog sehingga pengunjung pun akan semakin betah berlama-lama singgah di blog Anda, jangan sampai warna baru lebih jelek dari warna background yang lama.

Oh ya sob, cara tersebut adalah cara mengganti background blog jika memang warna backroundnya adalah warna polos dan menggunakan kode warna, jadi cara tersebut tidak berlaku untuk penggantian warna background blog yang menggunakan link url gambar.

Demikian tentang Cara Mengganti Warna Background  Blog di Photoshop. Di mana cara tersebut di atas cukup mudah dilakukan oleh semua Blogger ( termasuk Blogger pemula ), jika Blogger yang sudah mahir tentang bahasa pemograman mungkin mereka pakai cara lain yang lebih praktis. Bagi para senior Blogger, mohon kasih tambahan ilmu tentang cara mengganti warna background blog, silakan tuliskan ilmunya di kolom komentar. Semoga bermanfaat

Facebook Twitter Google+

17 komentar

Kapan kapan dicoba ah walaupun jarang gonta ganti background maunya yang praktis saja sih

lengkap banget tutorialnya ya mas, dan lebih menghasilkan lagi jika dibuat youtubenya, sebab saya juga sering kayak gitu :D

Kalau background sudah terasa manatap bagi kita dan pengunjung ya dah tidak perlu diganti bos,,he he, namun sekali-kali perlu dong ganti warna

Ya juga sih mas, lebih lengkap jika ada videonya. Makasih bos atas masukan dan kunjungannya

bwahahaha, saya pernah terpikirkan juga mas ketika mau ganti warna, masak kode2 gitu mesti tanya google sih? ternyata di photoshop juga ada? di corel ada gak ya?

kalau harus buka photoshop kelamaan mas syamsu loadingnya.
jadi tanya google untuk kode warnanya.

he he, kita kan sudah manja sama mbah Google mas

he he, tapi kalau saya enak pakai photoshop mas

wuih mas Takim pura-pura kaget ya mas?

saya dari dulu sampai sekarang masih mengalami kesulitan tentang photoshop, paling mindahin background itu mas :)

keren nih kang tutorialnya, kalo sempet akan saya coba ah, kebetulan saya sedikit bisa photoshop..

Waduh mang, wajib disempatkan dong mang.wkwkwk. Kalau ga sempat berarti bilang kerennya baru setengah hati.wkwk

Pada dasarnya sama mba,,,silakan cermati sendiri,,he he

Mas Syamsu salam kenal, mohon bantuannya saya pakai template mirip seperti template ini beli di maha template bagaimana cara menghilangkan border pada gambar di dalam artikel? Terima kasih...

Maksudnya border bawaan template tersebut ya mas???

Terimakasih atas kunjungan Sobat. Silakan berkomentar, namun tolong jangan menyertakan link aktif maupun pasif.

Back To Top