I’m going to use the Minima Stretch template, though I
will also include notes applicable to the Denim Stretch template too.
The best way to use a custom header for a stretch template…
…is to create a logo or header image with a block background color !
This ensures that your header will appear normally in any size of browser window, whether this is a narrow monitor or widescreen laptop.
An effective method is to use a logo or badge, alongside your blogs’ title. If you ensure the width of the whole “banner ” is no wider than around 700px, you can be certain that the whole header will display properly in older browsers.
I used Photoshop to create the header for this demonstration, though you could just as easily use GiMP, CorelDraw or your favorite image editing program10.
Firstly I created a background which is 700 pixels wide and 100px tall.
You can make your own header banner taller than this if you prefer.
Then, I filled the background with a dark red color (hex value: #333333).
Ensure you have the hex value of your background color as you will need to use this value later on in this tutorial.
Secondly, I added the blog title in white text11 with a little shading to ensure this stands out from the background (there are loads of excellent free fonts available from DaFont12).
I aligned this title to the right of the image, leaving space to the left so I can add a logo afterwards.
Here is what the header banner looks like at this stage:
Now


Choose to upload a new image from your computer and browse to the location where you have saved your custom banner design.
Upload this to Blogger, and check the radio box which says “Use instead of title and description”.
This ensures that your blog’s name will still appear in the top right of your browser, but nothing will interfere with the appearance of your new header banner. After uploading my header to Blogger, the template appears like this:

To do this, go to Template>Edit HTML in your blogger dashboard, and find the following section of code near the beginning of the
border:1px solid $bordercolor; } Here we will add a background color with the same hex value as the background of the banner (in my example, this is #333333). So add the line highlighted in red to this section of code, substituting the hex value for that of your own banner background color: #header -wrapper { margin:0 2% 10px; background: #333333; border:1px solid $bordercolor; } Now, my demonstration template looks like this:

Now this is looking better, wht say........................................