Adding Header Image in Blogger Dynamic View

The Dynamic Views have been great and all, but the lack of customisation options have been off-putting for lots of bloggers, especially those who can't bear to have blogs without headers. That brings us to this post - how to add a header to Blogger's Dynamic View. Well, sort of. This is a response to blog reader MuseElle.

Step 1:

Upload an image to Blogger's post, and get its direct link. Click here if you're not sure how to do this.

Step 2:

Find the tag 's1600' in your direct link. Then, change it to 's380'. You'll need to insert this address into the code in Step 3. See example below:

Before:

http://2.bp.blogspot.com/TpswCGyxlGI/AAAAAAAAD2A/yFmym6cDyS0/s1600/mypic.png

After:

http://2.bp.blogspot.com/TpswCGyxlGI/AAAAAAAAD2A/yFmym6cDyS0/s380/mypic.png

Step 3:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

Don't forget to change the address in Line 24 to that of yours (the address that you've gotten from Step 2).

#header .header-drawer.sticky, #header .header-drawer  {
top: 134px;
}
 
#header .header-bar{
height: 165px;
}
 
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
top: 165px;
}
 
#header-container {
height: 205px;
}
 
.viewitem-panel .viewitem-inner {
top: 100px;
padding-bottom: 120px !important;
height: auto !important;
}
 
#header-container #header.header .header-bar span.title{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS9-wrFm92TkbJpvN23TpdAWyC-4T_mGhbUzcjk9tC82Xm9GV6PHVhJesSlzOIJobr3cP9J62KRsGnfOSPz0_TugGgsOpEj60gteOMNydljaBkGFQ7uq4Q0YblQcSLif7_bZltyG9ReFuT/s380/mastercopy.png)
no-repeat center;
margin-left: auto !important;
margin-right: auto !important;
height: 165px;
} 

When you're done, click on Apply to Blog and see the changes on your actual blog. Make sure your Template Designer is closed. Due to recent updates in Dynamic Views, the Live Preview isn't working properly anymore.

Extras:

1) If you want to change the color of your header area, add the following code to your CSS. Since my header image is white, a white header area will suit best for my blog.

#header .header-bar{
background: white ;
}

2) If you want to remove your blog title and description from your header, add the following code to your CSS.

#header.header .title a h1, #header.header .title h3{
display: none;
}

3) If you want to increase the size of your header image, follow the steps below:

• Add all the numeric values (134px, 165px, 205px, 100px) in the code above by the same margin. For example, say you change '134px' to '234px' in Line 2 above. That means you're adding 100px to the original value. You have to make sure all other numerical values are added by 100px as well.
• Next, change the 's380' tag to a greater value.

4) If you find Blogger's new Gadget dock too close to your header, see the following tutorial:
Adjust Gadget's Vertical Position in Blogger Dynamic View