Cara Merubah Warna Header Template Kompi Flexble

Cara Merubah Warna Header Template Kompi Flexble

Bukan berarti Maniak Menulis akan bergeser menjadi blog tutorial yah. Terus terang dan secara jujur saya katakan, saya bukanlah ahli dalam hal mengoprek template. Pengetahuan tentang coding sangat terbatas. Jadi, tidak mungkin blog ini menjadi blog tutorial tentang cara mengedit template.

Tulisan ini dibuat untuk memenuhi janji sebagai sesama pengguna template Kompi Flexible buatan mas Adhy Suryadi. Kebetulan, kawan saya, mas Dwi Sugiarto , pengelola blog Dwisu juga menggunakan template yang sama. Silakan klik untuk mengunjungi blognya di SINI . Isinya seru juga loh!

Nah, pada kolom komentar salah satu artikel MM, yaitu”Menjadi Kolektor Template/Theme Blog“, mas Dwi Sugiarto, nama aslinya meninggalkan pesan seperti di bawah ini.

Cara Merubah Warna Header Template Kompi Flexble

Jadi, tulisan ini dibuat untuk menjawab dan menepati janji untuk berbagi cara memodifikasi ringan beberapa bagian di Kompi Flexible. Ringan yah, tidak berat. Tidak sanggup saya kalau untuk yang berat-berat. Lagi pula, takut menjadi ketagihan kalau sudah terlibat dalam hal yang begituan.

Nah, salah satu bagian dari Kompi Flexible yang saya modifikasi paling pertama adalah bagian “HEADER” alias kepalanya. Alasannya, ya karena bagian inilah yang pertama kali muncul di layar pembaca. Jadi, bahkan sebelum mengirimkan email untuk membeli pun, saya sudah menetapkan bahwa bagian ini harus yang pertama kali diubah.

Dengan begitu blog MM akan “berbeda” dengan blog-blog lain pengguna template yang sama. Kalau sama, rasanya gimana gitu. Dengan merubah warna header setidaknya sudah membuatnya berbeda.

Tidak banyak kok yang harus dirubah dan mayoritas sekedar warna saja.

Template aslinya, bisa dilihat pada web mas Dwisu, yang masih menggunakan warna aslinya. Bisa juga ketikkan nama Kompi Flexible untuk menemukan versi asli template premium karya Kompi Ajaibnya mas Adhy.

Bentuknya seperti ini.

Cara Merubah Warna Header Template Kompi Flexble

Berbeda yah? Padahal hanya mengganti beberapa kode warna saja.

Cara Merubah Warna Header Template Kompi Ajaib

Sebelum memulai, perhatikan bahwa bagian header template Kompi Flexible memiliki 3 bagian (menurut saya, belum tentu menurut yang buat). Dan, saya berikan patokan seperti di bawah ini :

Cara Merubah Warna Header Template Kompi Flexble

Nah, karena tidak ada fitur untuk memodifikasi warna melalui fitur “SESUAIKAN” Blogspot, mau tidak mau harus masuk ke HTML.

Caranya (mas Dwisu pasti sudah tahu) yaitu

1. Masuk ke Dashboard Blogger

2. Pilih Tema/Theme

3. Edit HTML

Kemudian : silakan lakukan satu persatu dulu supaya ingat posisi kodenya satu persatu. Saya mengalami kepusingan karena setelah menemukan, kemudian lupa di bagian mananya, jadi harus berulangkali mencoba.

Header 1

Ruwet yah lihat kode-kodenya? Sama, saya sampai berlinang airmata. Bayangkan saja mata minus 7 1/2, plus 3 1/2 dan silinder harus menelusuri kode-kode dengan huruf kecil begini. Sampai dimarahin sama kumendan karena itu.

LATAR BELAKANG

– Pergunakan “Control” + “F” untuk mencari

– Masukkan kata “#judulblog”. Digabung yah, jangan dipisah

– Ada beberapa kata “#judulblog” di dalam deretan kode, tetapi yang dicari adalah “#judulblog” yang di belakangnya diikuti tanda “{” dan ada kata background

Cara Merubah Warna Header Template Kompi Flexble

– Ganti kode warna yang di belakang tanda “#”. Kode aslinya #000 (hitam), silakan ganti sesuai dengan keinginan. Kalau tidak tahu kode warna, bisa lihat di Colorhex. Kodenya bisa 3 bisa 6 digit. Masukkan saja mau yang mana saja.

Silakan simpan atau lihat pratinjau tema. Header satu sudah akan berubah warna.

HURUF

– Perhatikan juga, karena huruf asalnya tadinya “putih” , kalau warna dasar diubah menjadi putih (#fff) atau warna muda, hasilnya hurufnya tidak muncul.

Berarti, ada bagian yang harus diubah juga, yaitu huruf untuk halaman ini.

– Cari menggunakan kotak “Control F” dengan frase kata “page-menu”

Sama dengan yang tadi, cari kata “page-menu” yang di belakangnya diikut “{” dan kata “background.

Cara Merubah Warna Header Template Kompi Flexble

– Ganti kode warna #000 dengan yang Anda mau. Kemudian simpan dan lihat hasilnya.

Selesai? BELUM! Lihat bagian ikon media sosialnya. Nasibnya sama dengan huruf. Kalau header 1 warna muda, icon-nya tenggelam. Jadi, harus dirubah juga.

ICON MEDIA SOSIAL

Caranya sama saja. Pakai kotak pencarian dan masukkan “sos-profil”. Ada beberapa kata, pilih yang di belakangnya ada kode warna seperti di bawah ini.

Cara Merubah Warna Header Template Kompi Flexble

Ganti kode “#efefef” (versi belum dirubah) dengan kode warna yang Anda mau.

Nah, barulah selesai merubah warna header 1 dari si Kompi Ajaib. (Belum semua sih, cuma setidaknya tampilan sudah akan berubah).

Header 2

Langsung saja.

– Cari kata “header-wrapper” yang di belakangnya ada tanda “{” dan kata “background”

Bentuknya seperti ini.

Cara Merubah Warna Header Template Kompi Flexble

– Ganti kode warnanya dan kemudian lihat hasilnya lewat pratinjau tema

– Jangan lupa ganti huruf supaya judul blog lebih menonjol dan tidak tenggelam oleh background

– Cari dengan kata “header” dan temukan yang di belakangnya ada “h1.title” dan “.description”, kemudian ganti warnanya sesuai kemauan.

Yang “h1.title” ini merubah judul Blog dan yang “description” mengganti huruf deskripsi blog.

Setelah itu simpan dan bisa lihat perubahannya.

Header 3

Nah, untuk yang bagian header 3, butuh banyak coba-coba karena di dalamnya sebenarnya terdapat beberapa kode warna yang harus diubah.

Hal ini berkaitan dengan kombinasi dari “drop menu” di Kompi Flexible, jadi silakan coba dengan warna yang Anda mau dan temukan kombinasi sendiri yah!

– Pakai kotak pencarian “Control F” dan masukkan kata “#css-menu”

– Ada beberapa kode, tetapi tahukan harus cari yang mana? Ya betul sekali cari yang ada kode warnanya

Bentuknya seperti di bawah.

Cara Merubah Warna Header Template Kompi Flexble

Silakan coba ganti satu persatu kodenya dan kemudian lihat efeknya.

Saran saya, ganti satu persatu dan lihat hasil agar tahu bagian mana yang berubah. Setelah itu catat, dan diingat supaya nanti kalau mau ganti lagi tidak repot. Jangan ulangi kebodohan saya yang malas mencatat.

Nah, setelah itu rasanya header Kompi Flexible Anda sudah akan berbeda dari versi aslinya.

Untuk beberapa modifikasi lain akan disusulkan kemudian karena saya menghilangkan juga beberapa bagian, termasuk komentar Disqus dan Facebook.

Selamat bereksperimen dengan warna header yah!

14 thoughts on “Cara Merubah Warna Header Template Kompi Flexble”

  1. MANTUL…..Makasih Banget Mas Anton…Ini tutor yang saya cari cari sejak beli Kompiflexible. Jujur saja mas kalau harus ngoprek sendiri meski cuma warna header mikir 2 kali mas…tapi kalau sudah tahu bag/kode mana yg akan di edit spt diatas kan enak saya tinggal ctr+f saja.

    Tinggal siapin waktu untuk mengedit nih…rencananya 3 blog yang pakai template ini warnanya beda-beda. Ditunggu deh tutor berikutnya untuk modif lainnya.

    Reply
  2. hahahahah…cmiw …. rupanya sudah ada kalimat sanggahan diawal artikel, hadehhhhhh,,,,ngk jadi protes dech…

    Pak Template di blog saya ada probelm,jika kita membalas komentar , kok koment kita muncul dibawah biasanya kalau kita pencet tombol balas pada salah satu komentator, maka koment kita bisa muncul dibawah komentar komentator.

    Tau solusinya ngk pak… ?

    Mudah2an muncul tutorialnya yach, hihihihi….. itung2 beramal pak. 🙂

    Reply
  3. @mas Dwisu.. sama-sama mas.. hahah bisa dimengerti saya juga begitu malas sebenarnya, cuma kompi Flexible terkenal banget dan banyak yang pakai, jadinya harus cepat diubah supaya berbeda

    @Kang Nata.. nggak ada.. Emang nggak lihat ini blog MM juga sama.. dipencet balas, keluarnya bukan dibwah komentar yang mau dibalas.. hahahaha.. ogah Kang, saya ogah puyeng, pakai saja..

    Kalau ga salah pakai templatenya Arlina yah Kang.. nanti deh kalau sudah sempat lihat-lihat, kalau sekarang mah boro-boro lagi dikejar setoran

    Reply
  4. Dengan mengedit sendiri, pastinya template akan lebih menarik lagi. Tampilan akan lebih unik. Awal mulanya akan tampak sulit ,tapi sebenarnya mudah kok. Apalagi jika hanya sekedar warna. Tapi jangan lupa, perhatikan tampilan versi mobilenya biar tidak kacau. Biar lebih serasi. Yang penting teliti, biar tidak berubah tampilan widget-widget yang lainnya.

    Reply
  5. masalah oprek mengoprek template sebenarnya kalau dilakukan sendiri akan muncul pengetahuan. tapi konsekuensinya trial eror.

    saya suka ngedit template juga om. entah kenapa ya ada perasaan senang ketika melihat tampilan beda aja gitu. seperti bagian home saya sekarang. setiap kali direfresh akan berbeda-beda postingan yg muncul. 🙂

    Reply
  6. @djangkarubumi : yah begitulah kira-kira. Memang asyik tetapi terkadang terlalu asyik sampai lupa nulis. Gaswat kalau begitu

    @Rafi :betul sekali. Memang harus sabar juga melakukan trial and error karena kita masuk ke "logika" orang lain. Cuma ya seru ajah, tapi saya tidak mau melakukannya terlalu sering. Makan waktu

    Reply
  7. mas, saya juga make kompi flexibel di blog tulisanpanda.com gimana cara mengubah header nya jadi gambar? udah diupload tapi ga muncul mas, dan kenapa tag H1, H2, H2 ga muncul di postingan?

    Reply
  8. Lha lha lha.. Nanda.. saya bukan pembuat Kompi Flexible.

    Sebaiknya bertanya langsung ke pembuatnya. Ia pasti lebih tahu kenapa dan mengapanya? Terus terang saya tidak mengutak atik yang itu jadi tidak tahu.. dan malas untuk mencari tahu…:-D

    Reply
    • Hahahah.. saya sudah balik lagi ke template asal Viomagz.. lebih enak dilihat dan mudah diurus menurut saya mah

      Reply
  9. kalau saya ngga bisa edit template mas, saya ngeblog masih menggunakan Hp android, kalau suatu saat sudah punya netbook mungkin saya akan belajar koding.

    Reply
  10. Dari postingan ini saya jadi tau cara edit template kompi, makasih mas template saya akhirnya bisa sesuai dengan ku inginkan

    Reply

Leave a Reply to Anton Ardyanto Cancel reply