Cara Mengganti Warna Template Blog Dengan Metode Elemen - Nino Artikel

Cara Mengganti Warna Template Blog Dengan Metode Elemen

Cara mengganti warna template blog dengan mudah dan cepat menggunakan metode elemen ini dapat diterapkan untuk mengganti warna judul posting, background blog, latar belakang header blog, efek hover dan lain-lain. Cara ini saya temukan secara tidak sengaja. Awalnya saya ingin mengganti warna header blog, saya menggunakan bantuan Google pencarian.

Di sana saya menelusuri berbagai tutorial mengganti kode warna template blog. Dari blog ke blog saya telusuri tetapi saya tidak menemukan kecocokan metode untuk template saya. Tiap kali saya terapkan selalu gagal! Ini wajar terjadi mengingat template blog bisa berbeda-beda struktur kode nya.

Intermezzo: Awal mula menemukan metode elemen untuk template blog

Singkat cerita saya iseng membuka blog milik orang lain dan saya klik kanan pada halaman blog tersebut. Setelah itu saya memeriksa elemen pada blog yang saya kunjungi hanya karena saya ingin mengetahui jeroan nya.

Setelah saya mengintip kode warna, pola template dan sebagainya di blog itu, saya baru terpikir untuk mengintip kode warna pada blog saya sendiri agar dapat saya bandingkan dengan blog milik orang lain. Dan, tanpa disangka dari sana lah saya menemukan metode elemen, metode paling mudah dan paling sederhana menurut saya.

Saya membuka blog saya dan klik kanan, setelah itu saya pilih menu periksa elemen. Otak-atik ini dan itu akhirnya di bagian itu saya baru menyadari ada cara yang begitu mudah.

Saya pikir orang pertama yang menggunakan metode ini adalah saya, "wah bagus juga nih kalau dijadikan tutorial untuk mengganti dan menemukan kode warna pada template blog". Ternyata diluar dugaan! Cara ini sudah ada yang membagikan di blog-blog lain.

Saya perhatikan metode ini mereka bagikan dengan ide yang sama tetapi cara penjelasan nya saja yang berbeda-beda dan masih jarang ada sepertinya.

Cara Menemukan dan Mengganti Kode Warna Template Blog

Pertama kali yang saya lakukan adalah mengubah warna header wrapper. Awalnya saya hanya merancang warna-warna pada blog melalui metode elemen, tujuan nya untuk mencari warna yang paling tepat terlebih dahulu. Setelah semuanya dirasa pas, saya membuka notepad dan menyimpan kode-kode warna favorit saya.

Kode-kode warna yang saya simpan di notepad mulai dari kode warna judul posting, header wripper, body background, efek hover dan lain-lain. Kode-kode warna tersebut saya dapatkan menggunakan metode Elemen, jadi untuk teman-teman tidak perlu bingung mencari kode-kode warna HTML.

Setelah semua saya simpan di dalam notepad, baru saya mengunjungi blog untuk login dan memulai untuk melakukan edit HTML Template. Saya membagi tab browser saya menjadi dua bagian, pertama untuk edit template, dan yang kedua untuk membuka beranda blog saya dengan perpaduan elemen. Penampakan nya seperti gambar di bawah ini.

Contoh Cara Menemukan dan Mengganti Warna Template Blog

Screenshot di saat saya mengubah warna yang awalnya biru. Secreenshot di atas hanya sebagai contoh guna memahami cara kerja metode elemen. Jadi yang perlu anda lakukan adalah mengarahkan mouse anda pada header blog atau pada bagian lokasi yang akan anda ganti warna nya, setelah itu klik kanan pada mouse dan pilih periksa elemen.

Jika sudah maka penampilan nya akan seperti gambar yang sudah saya tampilkan di atas. Klik Gambar tersebut untuk memperbesar. Setelah itu, anda pilih menu backgraund yang ada di elemen untuk memilih kode warna di sana.

Jika ada warna yang cocok atau anda sukai, catat kode nya atau copy dan paste ke notepad. Letak atau posisi menu background yang ada di elemen adalah seperti contoh gambar di bawah ini.

Contoh Cara Mengganti Warna Template Blog

Anggap saja warna kode header pada blog anda adalah #FFFFFF seperti contoh gambar di atas. Setelah itu anda ingin mengubah nya, maka caranya copy kode #FFFFFF seperti yang saya contoh kan di atas dan setelah itu kunjungi template blog anda untuk menemukan kode tersebut.

Artinya jika anda menggunakan metode elemen tersebut, maka anda memiliki satu langkah dengan dua kemudahan sekaligus, karena anda dapat mencatat kode yang akan anda ganti, juga dapat mencari dan menemukan kode warna baru yang pas atau cocok untuk desain warna template blog anda.

Setelah kode warna template blog lama anda simpan, selanjutnya ke blog atau menuju ke bagian template untuk edit kode HTML dan menemukan kode lama milik anda yang akan anda ganti.

Setelah itu anda ke dashboard template/tema dan pilih edit HTML. Caranya tekan CTRL+F untuk mempermudah melakukan pencarian kode. Lihat secara seksama contoh penerapan pada gambar dibawah ini.

Contoh Cara Mengganti Warna Template Blog dengan Metode Elemen

Contoh Cara Mengganti Warna Template Blog Dengan Metode Elemen

Anda akan menemukan kode yang anda cari atau kode warna yang akan anda ganti setelah anda melakukan pencarian dengan cara CTRL+F.

Isi kode di kolom kode warna dan Enter. Setelah itu anda akan menemukan baris kode yang anda cari atau kode warna yang akan anda ganti tersebut. Perhatikan contoh gambar di atas, klik pada gambar untuk memperbesar.

Jika anda sudah menemukan kode tersebut, hapus kode nya dan ganti dengan kode warna baru milik anda yang sebelumnya sudah anda simpan di notepad.

Setelah selesai, tinjau template sebelum di simpan, jika tidak terjadi error saat peninjauan, itu artinya tak ada kesalahan pada template, silakan simpan template.

Cara mengganti warna judul posting

Tata caranya sama dengan tata cara yang telah saya bagikan di atas. Perhatikan struktur kode pada gambar agar bisa anda terapkan di semua halaman template blog anda. Pada dasarnya langkah-langkah mengganti warna di beberapa bagian template blog dengan metode elemen itu sama.

Jika anda ingin mengganti warna di judul posting blog, silakan masuk ke halaman beranda blog anda, setelah itu sorot pada judul posting dan klik kanan. Jendela elemen akan memberikan informasi struktur kode. Pada contoh gambar dibawah ini seolah-olah saya akan mengganti kode gambar lama saya yaitu #5787D4 (warna biru).

Cara Mengganti Warna Judul Posting Blog

Saya catat kode warna #5787D4 (biru), setelah itu saya menuju ke tab pertama saya untuk edit HTML template/tema.

Menemukan dan Mengganti Warna Judul Posting Blog

Jika sudah dilakukan, kita bisa mengganti warna judul posting artikel dengan kode warna yang baru atau dengan kode warna favorit. Tinjau terlebih dahulu, baru setelah itu boleh simpan template.

Cara mengganti warna background blog

Caranya sama dengan cara-cara sebelum nya, yaitu sorot dengan mouse dan klik kanan bagian yang akan di ganti warna nya, dalam hal ini adalah background dan pilih periksa elemen.

Cara Mengganti Warna BackgroundTemplate Blog

Setelah itu pada jendela elemen, perhatikan kode body background dan temukan kode nya. Nah kode milik saya yang sudah saya ganti dengan kode warna baru contohnya seperti gambar di bawah ini.

Cara Menemukan Kode Warna Background Template Blog

Jika saya ingin mengganti lagi kode nya dengan kode lain, saya tinggal catat kode saya dan saya pergi ke tab pertama saya untuk melakukan edit HTML template/tema.

Tekan CTRL+F agar lebih mudah menemukan kode yang sedang kita cari. Contoh gambar di bawah ini.
Menemukan dan Mengganti Warna Background Template Blog

Setelah itu, ganti kode warna dengan kode lain yang kita inginkan. Beres deh.

Cara mengganti efek warna hover judul posting blog

Arahkan mouse ke judul posting, lalu klik kanan dan pilih periksa elemen. Setelah itu perhatikan jendela elemen. Temukan kode warna hover nya. Lihat contoh gambar di bawah ini.

Cara Mengganti Warna Hover Pada Template Blog

Setelah anda menemukan kode warna hover, copy kode nya. Contoh gambar di atas memiliki kode warna hover #808080. setelah itu, anda pergi ke tab pertama untuk edit HTML template/tema. Di halaman edit HTML template/tema, tekan CTRL+F untuk memudahkan anda menemukan kode hover #808080. Setelah ditemukan, ganti kode hover tersebut.

Contoh kode warna efek hover milik  saya yang akan saya ganti adalah #808080. Di bawah ini adalah contoh gambar saat saya menemukan kode warna untuk hover #808080 yang akan saya ganti dengan kode warna lain yang sesuai dengan keinginan saya.

Menemukan dan Mengganti Kode Warna Hover Template Blog

Kode hover itu semacam efek warna yang muncul atau ditimbulkan pada judul posting blog kita saat mouse kita arahkan ke judul posting pada home page atau halaman depan blog. Kalau teman-teman masih bingung dengan penjelasan saya terkait efek hover, Perhatikan contoh gambar di bawah ini.

Contoh Efek Warna Hover Pada Template Blog

Hanya itu yang bisa saya sampaikan mengenai cara menemukan kode warna dan mengganti warna template blog dengan metode elemen. Jika teman-teman mengalami kesulitan, silakan kirim komentar. Selamat praktik.

Suka dengan blog ini? Subscribe dan dapatkan artikel terbaru lainnya langsung ke email anda:

17 Responses to "Cara Mengganti Warna Template Blog Dengan Metode Elemen"

  1. Sebenarnya artikelnya bagus mas, coba diperbaiki lagi dalam sesuaikan judul blog dengan isinya supaya seseorang bisa lebih tertarik. jangan lupa mampir balik dan komen....

    BalasHapus
    Balasan
    1. Oke mbak nur. Terimakasih atas kunjungan dan saran nya. :)

      Hapus
  2. artikel yang puanjang mas,,saya juga pengen belajar kode HTML gitu,,siapa tau bisa buat template sendiri,, saya aja masih pakai template gratisan,,mari blog walking hehehe

    BalasHapus
  3. Cakep artikenya.... Sama2 newbe n lagi bingung sama template, (maklum ibu rt jadi pengen yg gratisan) mesti memperbaiki tampilan template.

    BalasHapus
    Balasan
    1. Cari template yg sesuai dengan kebutuhan aja mbak. Hmm ternyata ibu rumah tangga, aku kira mah cowo. hihi

      Hapus
  4. Saya terkena banned sudah 2kalinya,.. Dan akun yg ke 3 ini pun terkedan ban, waktu saya konfirmasi ke bantuan katanya akun saya masih aktif dan masih dapat di gunakan,. Tp setiap saya login itu gagal dan ada bacaan akun anda telah di ban,.. Bagai mana caranya supaya beetalk saya kembali normal,.:'( .

    BalasHapus
    Balasan
    1. Agar akun kembali normal silahkan baca artikel yang ada di link ini http://www.ninoartikel.com/2016/03/akun-beetalk-di-ban.html dan beri komentar di bawah artikel link tersebut jika ada sesuatu yang mau ditanyakan. Thanks Uthy atas kunjungan nya, semoga membantu.

      Hapus
  5. Informasinya sangat membantu, tapi kasih petunjuk tulisan point, misal tanda titik atau angka, jujur saya juga pengin bljr terkait mengenai HTML.

    BalasHapus
    Balasan
    1. Oke insya Allah nanti saya perbaharui. Itu artikel lama soalnya kang, bahasa nya juga masih berantakan. :)

      Hapus
  6. Maaf kang nino saya keluar pembahasan, ini template nyuri dimana yak? hehehe

    BalasHapus
    Balasan
    1. Template yang mana ya? Hehe.. Kalau template yang ini bisa di cek tekan CTRL+U dan cek apakah ini template mencuri atau bukan bisa ketahuan kang. Haha

      Hapus
  7. Mksh mas.
    Entar mau dicoba ganti hehehe.
    (Y)

    BalasHapus
    Balasan
    1. Sip, semoga sukses modifikasi warna template. :)

      Hapus
  8. Minta tolong beetalk saya supaya diaktvkn kembali yg tiba2 trblokir

    BalasHapus

Silakan tulis komentar sesuai dengan pembahasan. Dilarang spam komentar dan menyertakan link aktif.