Cara Membuat Garis Line Warna-Warni Diatas Header

Membuat blog yang nyaman digunakan oleh pembaca memang gampang-gampang susah, salah satunya adalah memberikan sentuhan warna yang pas agar mata pengunjung betah berlama-lamaan diblog kita. Nah, untuk memberikan sentuhan warna lainnya anda dapat membuat garis (Line) warna-warni diatas header.

Pada kesempatan kali ini, saya akan share cara membuatnya. Penampakan lihat langsung header (atas) pada website ini, sudah? Bagaimana, berminat membuatnya? Baiklah, mari kita mulai membuatnya

Cara Membuat Garis Line Warna-Warni Diatas Header 

1. Login blogger, pada Dashbor > Template > Edit HTML

2. Copy kode dibawah ini, pastekan diatas ]]></b:skin>

/* Warna Header*/.ktz-bgstripes{width:100%;height:5px;overflow:hidden;background:#333333}.ktz-bgstripe{width:5%;height:5px;float:left;}.ktz-color1{background:#008299}.ktz-color2{background:#2672EC}.ktz-color3{background:#8C0095}.ktz-color4{background:#5133AB}.ktz-color5{background:#AC193D}.ktz-color6{background:#D24726}.ktz-color7{background:#008A00}.ktz-color8{background:#094AB2}.ktz-color9{background:#006AC1}.ktz-color10{background:#FF2E12}.ktz-color11{background:#1FAEFF}.ktz-color12{background:#91D100}.ktz-color13{background:#CEA539}.ktz-color14{background:#7F6E94}.ktz-color15{background:#4617B4}.ktz-color16{background:#AD103C}.ktz-color17{background:#004D60}.ktz-color18{background:#569CE3}.ktz-color19{background:#E56C19}.ktz-color20{background:#1B58B8}

Keterangan : Anda dapat mengganti kode warnanya sesuai keinginan, misal #008299 menjadi #222, untuk mendapatkan kode yang dibutuhkan silahkan menuju Halaman Color-Picker

3. Langkah selanjutnya, cari kode header biasanya seperti ini  <header id='Header' . Agar mempermudah pencarian, jangan lupa gunakan Ctrl+F

4. Copy kode dibawah ini lalu Paste tepat diatas kode header <header id='Header' 

<div class='ktz-bgstripes'><span class='ktz-bgstripe ktz-color1'/><span class='ktz-bgstripe ktz-color2'/><span class='ktz-bgstripe ktz-color3'/><span class='ktz-bgstripe ktz-color4'/><span class='ktz-bgstripe ktz-color5'/><span class='ktz-bgstripe ktz-color6'/><span class='ktz-bgstripe ktz-color7'/><span class='ktz-bgstripe ktz-color8'/><span class='ktz-bgstripe ktz-color9'/><span class='ktz-bgstripe ktz-color10'/><span class='ktz-bgstripe ktz-color11'/><span class='ktz-bgstripe ktz-color12'/><span class='ktz-bgstripe ktz-color13'/><span class='ktz-bgstripe ktz-color14'/><span class='ktz-bgstripe ktz-color15'/><span class='ktz-bgstripe ktz-color16'/><span class='ktz-bgstripe ktz-color17'/><span class='ktz-bgstripe ktz-color18'/><span class='ktz-bgstripe ktz-color19'/><span class='ktz-bgstripe ktz-color20'/></div><div class='clear'/>

5. Langkah terakhir, Save template.

Demikian cara membuat garis/line warna-warni diatas header seperti web teoridesain. Bagaimana, mudah sekali bukan? Namun jika ada kesulitan atau terjadi kesalahan saat membuatnya silahkan berkomentar, saya siap membantu. Semoga bermanfaat.