How To Add Multi Color Line Above Header and Above Footer

How To Add Multi Color Line Above Header and Above Footer. This tutorial will make your blog design more colorful by adding some script code to your HTML Template. The script will make multi color line show on your header or footer. The line has combined by several colors and responsive for Personal computer or mobile view. According to me it's really nice to apply for blogger, because I find there are many WordPress themes use this line to make the theme more awesome than other. It make me interesting to share this script code, maybe you also interested to apply it. Let's follow some steps below to make this tutorial work.
First, go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for ]]></b:skin> or </style>. After finding the HTML Tag, please add the below code just above it.

/* Line 
Color*/.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}

Above Header 

To show thin line above header, you should add this code Above <header id='header-wrapper'> or <header id='header'> make sure you comprehend about the element header (Try to know if you don't understand)

<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'/>

Above Footer 

To show thin line above footer, you should add this code Above <footer id='footer-wrapper'> or <footer id='footer'> make sure you comprehend about the element footer (Try to know if you don't understand)

<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'/>

If you just to show the line above header or footer just put the code above on your header id or footer id. For editing the design you can change the color code. I believe you can change the design more beautiful than mine. I will close this tutorial "say thanks" for reading my article. If you get some problem for this tutorial, you can ask me on comment form below. Submit your question or suggestion, I will really appreciate that.

Advertisement