Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Tuesday, October 18, 2011

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(http://2.bp.blogspot.com/-oOCWrvF6YMI/TpswCGyxlGI/AAAAAAAAD2A/yFmym6cDyS0/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

462 comments:

  1. How would we hide the description as well. It made the header title transparent but it missed the description.

    ReplyDelete
  2. @Ceddy: Opps. Thanks for pointing it out. I've adjusted the code above. Cheers.

    ReplyDelete
  3. No problem man. You have helped me enjoy my blogger site again. I have one I have moved over to dynamic the other I didn't due to it's format. Let me know what you think!

    ReplyDelete
  4. @Ceddy: I've seen your blogs. They'll look good in DV, except for the fact that you'll have to sacrifice your widgets. But they're planning to add widgets in DV pretty soon. Until then.

    ReplyDelete
  5. I don't need a lot of widgets just a couple in particular and I would be a happy camper lol! Until then I'm happy to keep it looking nice.

    ReplyDelete
  6. And how can I make it so when clicking on that image, it takes you back to the main blog page?

    ReplyDelete
  7. @Andrew: You can't yet. No HTML tweaks are allowed at the moment.

    ReplyDelete
  8. This worked great! Is there a way to remove the search window? It appears in the upper right side of my header.

    ReplyDelete
  9. Help, when I adjusted the header it disabled the option to toggle between the dynamic views. Any way to fix? greyandgraypaperco.com

    ReplyDelete
  10. @erin: I can still see the bar. This is what I'm seeing:

    http://img249.imageshack.us/img249/8104/20111028101523capture.png

    What seems to be the problem?

    ReplyDelete
  11. how do I add adsense and page badges like facebook, twitter, tumblr?

    ReplyDelete
  12. @Tammy: You can add Adsense by using the 'Monetize' or 'Earning' tab in your dashboard - given that you already have an approved Adsense account.

    You can't add tumbler share button (yet), but twitter and facebook share buttons are readily available by default.

    ReplyDelete
  13. can you make the header img a url link as well?

    ReplyDelete
  14. @Rewards1: The header already contains a link, to your homepage. You'd notice this when you're in any page other than your homepage. Clicking on the header will bring you to your homepage.

    But yo answer your question, nope, you can't edit the header's link - at least not at the moment.

    ReplyDelete
  15. I am completely inexperienced with any of this code stuff, but when I copy and paste it, the numbers (1,2,3, etc.) all post with no text beside them, and then all the text shows up at the bottom.

    So I'm assuming that's why none of this works.

    ReplyDelete
  16. @Space: When you copy and paste them, make sure the numbers are not included. Example:

    #header .header-drawer.sticky, #header .header-drawer {
    top: 134px;
    }

    ReplyDelete
  17. @Zohaib: No problem at all my friend.. Cheers.

    ReplyDelete
  18. Southern Speakers - I am curious as to why you chose this name for your blog ??

    Like you I am currently busy with trying to get an important assignment completed.....but once that is done I can hopefully catch up on implementing many of these excellent technical adjustments on my blog - you have shared with us here.
    You are wonderful thank you so much especially given that you must be doing a post grad or similar.
    Best wishes with that.

    Aine

    ReplyDelete
  19. @Aine: I must say, your comment is unusual. When I see more than 5 words in a line, usually it is a problem description.

    Southern Speakers.. Well, we grew up in the southern part of Malaysia, and this blog wasn't meant for Blogger tutorial initially - and we just wanted to write about random things. But 'Southern Writers' doesnt sound so good now does it?

    Thanks for dropping some words. You have a nice day. Cheers and God bless.

    ReplyDelete
  20. Hello,

    Thanks for the info, your blog helps me alot, one problem. When I set the header, it seems perfect. I set the 's380' value to 's1400'. That's perfect in my own browser (chrome) and on my own laptop. When I open my blog on another computer (with a smaller monitor) the header will not 'adapt' to that monitor and browser. Is there a way the 's-value' automatically adapt to the size of the browser?

    ubayainternational.blogspot.com

    Thanks anyway!

    ReplyDelete
  21. @HarryD: Nope, there isn't. This is not only a problem in Blogger, but in all websites in general. Viewers use different display size to view websites, and most website elements are static. That means it'll look one way in one display, and another in another display.

    In blogger, we use 900px as a standard width. It won't look so small in large displays, and it won't be so large in small displays. But in DV, that is another case, as the height will play a role as well. Settings your header too big will not look good on small screened devices.

    Bottomline: You need to use your best judgement to come up with a balance between the two worlds :)

    ReplyDelete
  22. my image doesn't show!! what am i ddoing wrong?

    http://4.bp.blogspot.com/-N5yNAAZ5Abo/TtsTGO4w4xI/AAAAAAAAA50/M6h2qaSsskw/s380/samplogo.png

    I replaced Line 22 with the link above but nothing is showing up.. Please help :(

    ReplyDelete
  23. Hi. I've tried your way until step 3.But the picture still does not appeared.Why is it so? I uploaded .jpg type file.

    ReplyDelete
  24. @Pretty Pedis: I would have to look at the code that you're inserting into your CSS. Paste the code here, in the comment section.

    @kapkek: Same goes to you. I need to have a look at the code that you're inserting. Paste the code here, in the comment section.

    ReplyDelete
  25. How can I center the header text?

    #header.header .title a h1, #header.header .title h3{
    text-align: center;
    no-repeat center;
    left: 134px;
    }

    ReplyDelete
  26. got a question on the pages in the header. i got a problem when i link a page to the header and when i click on it, i have it open in a new window. How can open it in the same window?

    ReplyDelete
  27. Hi I'm a student who wants to change her digital portfolio. I am using blogger. How do you change the text color of the "recent, date, label, and author" words for the flipcard template? Thank you for your help:D

    ReplyDelete
  28. @ProGmaing: Add the following to your CSS:

    #header.header .header-bar span.title{
    width: 100% !important;
    text-align: center !important;
    }

    @Luxuraan: I've tried to sort this one out before. I thought adding the _self tatget would help, but it didn't. Unfortunately, this is not something that we have control over.

    @Riana Lee: Hi Riana. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

    #groups li{
    color: blue !important;
    }

    Cheers and God bless.

    ReplyDelete
  29. Hi, I love your blog! So informative.

    My question is, if I adjust my header, it overlaps with the bar (Home, etc.)? What should I do? Thanks!

    ReplyDelete
  30. @Anon: Blogger has styled the default header in a very delicate way. You must make multiple changes to see an error-free and bug-less outcome, even if it is something as simple as moving the header up a notch. If you were using my tweak above, make sure you change all the numbers by the same amount. For example, if you reduced 134px in line 2 to 34px, make sure all other values are deducted by 100px as well.

    All the best!

    ReplyDelete
  31. This works well. Thank you so much. I find your blog so informative. Keep up the good work! God bless. Haha I'm such a fan. I tried your suggestion and it worked well. Now my blog is ready to go!

    ReplyDelete
  32. Hi Yoboy, i've added a photo to my header, however I cant figure how to close the gab between the bottom of the pic and the header bar. I've tried adjusting numbers but can't get it to work..

    fashionbybaxley.blogspot.com

    thanks in advance!

    ReplyDelete
  33. BTW here's my code:


    .header-bar #search{
    display: none !important;
    }

    .menu{display:none;}
    a#blogger-branding{visibility:hidden;}

    #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;}

    #header-container #header.header .header-bar span.title{
    background: url(http://1.bp.blogspot.com/-RyVsI7lLfDM/TwybFXEU7dI/AAAAAAAAAeQ/UgtiOsXCoE0/s700/fashionbybaxleyheader.jpg)
    no-repeat left;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 115px;
    }

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


    thanks again

    ReplyDelete
  34. Replies
    1. Looks like you've gotten it fixed. Good job!

      Delete
    2. I have the same problem, how did you tell him to fix it?

      Delete
    3. And now I changed it back to normal so that people can still read my blog easily.

      Delete
    4. If you're changing the height, you need to get the maths right. See this comment to see how it is done. It's kinda tricky.

      Or you can always post the code that you have now and I'll fix it for you. Cheers!

      Delete
    5. How do I know what value to change the "s380" to? Do I change it by the same amount as everything else?

      Delete
  35. I am trying to achieve different header image on specific virtual pages based on labels. Is it possible?

    So far I followed your excellent tutorials which help me enormously. Thank you very much.

    Alex

    ReplyDelete
    Replies
    1. In non-dynamicview template, it can be easily done. But that is not the case in dynamic view, since we can't add HTML mods to the template. One would argue that we can add HTML through posts in DV, but that isn't practical. Basically, it is not impossible, but it isn't practical to be adding huge chunk of codes to all of your posts.

      Delete
  36. bookmarked! It helps me alot... ^^ tnx

    ReplyDelete
  37. Thank you so much for this information! It worked out great on my blog! :)

    ReplyDelete
  38. Yoboy
    oh dear how disappointing I followed all the steps and entered the following code
    #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;}
      
    #header-container #header.header .header-bar span.title{
    background: url(http://3.bp.blogspot.com/-Qc1zaS0pZYM/Ty75119cxZI/AAAAAAAABsw/ti14aPokWzY/s380/Header_DV_artportf900_x.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;


    and nothing happened.
    If you are not too busy with other things please would you let me know if it appears there is something wrong with the code itself.

    I was so looking forward to getting a personalized header and not being a total 'sheep' anymore. Hope your studies are going OK ??

    best wishes

    Aine

    ReplyDelete
  39. My studies are at their peak currently. But I still have time to reply your comments :) Your code looks fine, except for the fact that you missed a closing curly bracket at the end '}'. It should be:

    #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;}

    #header-container #header.header .header-bar span.title{
    background: url(http://3.bp.blogspot.com/-Qc1zaS0pZYM/Ty75119cxZI/AAAAAAAABsw/ti14aPokWzY/s380/Header_DV_artportf900_x.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    Here's a screenshot of your code in action in my test blog:
    http://i.imgur.com/OKHyl.png

    ReplyDelete
  40. Thank you for all that information! It works perfectly in sidebar but I have a problem in other views: the menu "jumps". I made many tries but I failed to solve that problem :/

    http://weblogarebonds.blogspot.com/view/sidebar

    ReplyDelete
    Replies
    1. Let's have a look at the code that you've entered. Go to www.pastebin.com and paste the CSS code that you currently have in your template (Dashboard - Template - Customize - Advanced - Add CSS). Come back to this page and leave your pastebin link in here so that I can have a look.

      I'll get back to you.

      Delete
    2. Thank you!

      http://pastebin.com/HXbcTVEb
      (I delete the complet adress of the picture)

      Delete
    3. Hi Kurdy,

      It seems like you've modified the values from the initial code, but you did not modify all values by the same margin. It is very important to maintain the relative values between all the attributes defined in the code above. For example, if you change one value from 165px to 110px (a decrease of 55px), you need to minus 55px off all your values. Here, I've fixed your code. Use this code instead of the one you currently have:

      http://pastebin.com/FJxdPPcK

      Cheers :)

      Delete
  41. I copied / pasted but I still have the same problem.

    So I tried another way by changing the order of creation: I delete CSS > I didn't chose "Sidebar" as default view but "Classic" view > I pasted your code and that's working very well!

    Thanks for your help!

    ReplyDelete
    Replies
    1. Probably you were seeing a cache copy of your old code. The new code should work fine :)

      Delete
  42. I need to take out the blog title after I put in an image header. How do I do this. Here is my code.

    #Flipcard.ss, #views ul li:nth-child(2),

    #Mosaic.ss, #views ul li:nth-child(4),
    #Sidebar.ss, #views ul li:nth-child(5),
    #Snapsnot.ss, #views ul li:nth-child(6),
    #Timeslide.ss, #views ul li:nth-child(7)
    {
    display: none !important;
    }

    #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;}

    #header-container #header.header .header-bar span.title{
    background: url(http://2.bp.blogspot.com/-uSGA0fVU9Qo/TzsRHP1MbTI/AAAAAAAACOY/ldIoZzY38qM/s1400/cooltext620436793.png)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 150px;
    }

    ReplyDelete
    Replies
    1. The code you need is already given in the post above :) Under 'Extras'.

      Delete
  43. Is there a way to have two headers? On my blog (http://thepedalingchef.blogspot.com/) I'd like to keep the picture of my bike, but I have somebody who wants to put an advertisement (a picture that would link to his site) on the right side. Can I do this?

    Thanks!

    ReplyDelete
    Replies
    1. Hi Mael,

      Unfortunately, this is not possible in Dynamic View. It might be possible to insert a picture there, but there's no way to link it.

      Delete
  44. I just posted a question, but I don't know if I was clear enough to I want to be more specific.
    Once again, this is my blog: http://thepedalingchef.blogspot.com/
    I'm working on getting that whole top section to look the way I want. I think I will eventually get rid of the title and create a better header image with a title in it.

    Here's what I would like help with though, for right now. I want to keep my current header (the picture of the bike and mountains), but I want to add a similar sized logo on the right (somewhere around where that search bar is). This logo is an ad that will come in picture form. I'd like for it to be clickable so that my readers can click on it and be directed to the website of the guy who wants to advertise on my page.
    The final product would look like this mockup: http://imgur.com/vOkKE

    Is this possible?
    Thanks so much for your great blog!

    ReplyDelete
    Replies
    1. Your question was clear :) It can be easily done in a non-dynamic view template, but it isn't possible in dynamic view templates. The closest we can get to is to add the ad, but it won't be clickable.

      Delete
    2. Thanks for your reply. Can you please explain to me how to add the ad even if it's not clickable? I can add a link in my links bar next to my Twitter and Facebook, maybe even with a fancy button like you did in another post!
      Thanks!

      Delete
    3. Add this to your css:

      .header-bar:after{
      content:url("http://3.bp.blogspot.com/-OaLrODRIFC4/T0OaDap7k0I/AAAAAAAAAVs/Xtbf2aovydY/s180/kkl.png");
      float: right;
      position: relative;
      bottom: 100px;
      padding: 10px;
      }

      Preview:
      http://i.imgur.com/CSeID.png

      Play with 100px and 10px, and change the image address above. Have fun :)

      Delete
  45. Hi, I am happy to have stumble upon this post. Nice blog, great tutorial. I have a new dynamic view layout which i copy from other free web template. But I have no idea how to tweak its header size. I try to contact the designer but he didn't response to my question. I put banner ads at the right of the header but it's not in a proper way, i think because of the header size. Which part to adjust in this code here? I have several try-and-error attempt but fail.


    #header-wrapper{
    width:1000px;
    margin:0 auto 0;
    height:105px;
    overflow:hidden;
    position:relative;
    background:#fff
    }

    #header-inner{
    background-position:center;
    margin-left:auto;
    margin-right:auto
    }

    #header{
    margin:0;
    border:0 solid $bordercolor;
    color:$pagetitlecolor;
    float:left;
    width:350px;
    overflow:hidden;
    padding-top: 5px
    }

    #header h1{
    margin:0 5px 0;
    padding:20px 0 0 10px;
    font-family:Arial black ,Tahoma, Helvetica, sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    font-size:32px;
    color:#000000;
    text-shadow:1px 1px 0px #172527;
    }

    #header .description{
    padding-left:15px;
    color:#333333;
    font-size:14px;
    padding-top:0px;
    margin-top:0px;
    }

    #header h1 a,#header h1 a:visited{
    color:#000000;
    text-decoration:none
    }

    #header h2{
    padding-left:15px;
    color:#736f74;
    font:14px Arial,Helvetica,Sans-serif
    }

    #header2{
    float:right;
    width:680px;
    margin-right:0px;
    padding-right:0px;
    overflow:hidden;
    }

    #header2 .widget{
    padding:30px 10px 0 10px;
    float:right
    }

    or do i have to look for another code? my blog is http://www.healthybeautifulblog.blogspot.com. Please advise. Many many thanks in advance to you.

    Best regards,
    Honeybee

    ReplyDelete
    Replies
    1. Hi Honeybee,

      You aren't using a Dynamic View template. You're using a third-party xml template, which looks pretty hard to tweak. Based on your source, it isn't something that you can change with CSS. You need to make HTML modifications. I suggest you create discussion thread in Blogger Help Forum:
      Blogger Help Forum

      If no one replies you, send me the address of your discussion here:
      Contact Me

      Delete
  46. I think google changed something. Yesterday it workes perfectly, now the headline is not there :( Even if I do it all from the start. Got any ideas how to bring it back?

    ReplyDelete
    Replies
    1. Hi Sienicki,

      I'm seeing a header in your blog:


      Are you not seeing it anymore? I tried the code above again. It wasn't showing in my preview, but it does show in the actual blog. Please do get back to me.

      Delete
  47. not work for me pls help



    #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;}

    #header-container #header.header .header-bar span.title{
    background: url(http://img689.imageshack.us/img689/4898/kopyasooo222.png)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    ReplyDelete
    Replies
    1. Your code is fine:
      Screenshot

      It seems like something is corrupted with the preview. Once you've entered this code, click on Apply to Blog, and view your blog. It does appear on the actual blog.

      Delete
  48. I added my logo and it was too big so I adjusted the # in the http line to 250. I am still having a problem getting the very top of the logo to show. It is like the top of the header is too low, plenty of room below the logo. I've tried adjusting different #'s in the code but no change. There must be an easy fix, right??

    ReplyDelete
    Replies
    1. Hi Organic Cents,

      It seems like you've modified the values from the initial code, but you did not modify all values by the same margin. It is very important to maintain the relative values between all the attributes defined in the code above. For example, if you change one value from 134px to 250px (an increase of 116px), you need to add 116px to all your values. Here, I've fixed your code. Use the code in the link below instead of the one you currently have:

      http://pastebin.com/WwtLevbG

      Cheers :)

      Delete
  49. Thanks for the help on this! Good stuff!

    ReplyDelete
  50. hey guy

    I got the picture in my header now. But the header itself is waay to big!
    I want the height to be exactly 65px.
    thank you :)

    url: www.amodistancia.blogspot.com

    code:

    #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;}

    #header-container #header.header .header-bar span.title{
    background: url(xxxxxx)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 65px;
    }

    ReplyDelete
    Replies
    1. Here, use this:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 34px;
      }

      #header .header-bar{
      height: 65px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 65px;
      }

      #header-container {
      height: 105px;
      }

      .viewitem-panel .viewitem-inner {
      top: 0px;
      padding-bottom: 20px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://1.bp.blogspot.com/-GZKtCEcF1GM/T0_J5Vsr-JI/AAAAAAAAADA/0xOPdZRF55Y/s1800/11.png)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 65px;
      }

      My name is Yoga btw :)

      Delete
    2. yoga.. thank you so much :) nice work mate, nice support!

      Delete
  51. Hi Yoboy.

    THANK YOU SO MUCH FOR POSTING THIS!

    Is there a way you would recommend to get rid of the Blogger header/title once you've uploaded this? As you can see in mine, I have uploaded the custom header but the old one is still there:

    2020headshots.blogspot.com

    Also, could you explain how to shrink the overall area of the header bar to something closer to what the custom header is?

    Thanks again, it's very generous of you to be so helpful. Have a great day!

    ReplyDelete
    Replies
    1. Hi Anon,

      I've shown how you can remove your title/description in the tutorial above, under 'Extras', item 2 :)

      As for the header area, it isn't possible to shrink it. Because your blog isn't of fixed size. When you look at your blog, it might appear to be of 980px. But when you view it using a 46" monitor for example, it might even be 2000px. It is dynamic, thus it isn't possible to make it static.

      Delete
  52. Thanks Yoga!

    I actually tried "Extras" #2, but it ended up removing everything - including my custom header. I am attempting to get rid of the Title text that Blogger requires but keep my custom header.

    Is it possible to reduce the overall height of the header bar?

    ReplyDelete
    Replies
    1. Hi Anon,

      To remove your title, use this. It won't remove your custom header.

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

      And it is possible to adjust the height, but not easily. You need to change all the numbers in the code I've given above. I've done a custom code for you. Your header image seems to be of 100px height, thus this should play out well. Use this code instead of the one you've added before:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 69px;
      }

      #header .header-bar{
      height: 100px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 100px;
      }

      #header-container {
      height: 140px;
      }

      .viewitem-panel .viewitem-inner {
      top: 35px;
      padding-bottom: 55px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://4.bp.blogspot.com/-qjFDnCx30RQ/T1DmABdRZPI/AAAAAAAAAKg/tnWVfPh7ST8/s1600/LogoLongBlackSub7.png)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 100px;
      }

      Cheers!

      Delete
    2. Yoga, thank you so much! You are the best! It is deeply appreciated! It worked perfectly!

      Delete
    3. Thanks for the feedback :) You're most welcome!

      Delete
  53. Thank you very much for the tutorial.
    I changed the code on my site but my title doesn't look good.
    It was downscale and I can't find out what of the settings I need to change for it to feet my original header site.
    I would appreciate if you could help me with that.
    http://habalabostit.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Navit. You gotta change the values in the code above for your header to fit properly. But adjusting the values can be tricky. Here, I've adjusted it for ya:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 162px;
      }

      #header .header-bar{
      height: 193px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 193px;
      }

      #header-container {
      height: 233px;
      }

      .viewitem-panel .viewitem-inner {
      top: 128px;
      padding-bottom: 148px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://4.bp.blogspot.com/-r4VgI7clxlo/TSTgCBD_DiI/AAAAAAAAK9Y/51_vVVKQAvU/s380/navit7-01.png)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 193px;
      }

      Cheers.

      Delete
  54. Thank you very much for the quick response.
    now it's visible , but I was hoping that it will be in it's original size like it was in the classic view which is 980X498px.
    The height is impotent for me.

    ReplyDelete
    Replies
    1. Right. Here's the code that you need:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 467px;
      }

      #header .header-bar{
      height: 498px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 498px;
      }

      #header-container {
      height: 538px;
      }

      .viewitem-panel .viewitem-inner {
      top: 433px;
      padding-bottom: 453px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://4.bp.blogspot.com/-r4VgI7clxlo/TSTgCBD_DiI/AAAAAAAAK9Y/51_vVVKQAvU/s980/navit7-01.png)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 498px;
      }

      Cheers.

      Delete
  55. Thank you very much.
    I tweaked a little the settings you gave me, since i didn't want the header to cover all by screen. But I still can't get the black hover header to stay in place and not hover on some of the text when I'm swishing views.
    Sorry for all the trouble, but I really want to use this dynamic view, and I really want to save my logo.
    Thanks a lot.

    ReplyDelete
    Replies
    1. Hi Navit,

      Here:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 350px;
      }

      #header .header-bar{
      height: 381px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 381px;
      }

      #header-container {
      height: 421px;
      }

      .viewitem-panel .viewitem-inner {
      top: 316px;
      padding-bottom: 336px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://4.bp.blogspot.com/-r4VgI7clxlo/TSTgCBD_DiI/AAAAAAAAK9Y/51_vVVKQAvU/s750/navit7-01.png)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 381px;
      }

      The trick is to change all values by the same margin. I'll give you an example. These are the values that appear in the original post in the tutorial above:
      134px, 165px, 165px, 205px, 100px, 120px, 165px

      And these are the values from the latest code that I gave you:
      350px, 381px, 381px, 421px, 316px, 336px, 381px

      These are two similar sets of values, with the second set having been added with 216px to each one of its values. Add 216px to the original set and you'll come up with the second set. Why 216px you might ask. Well, you need to make sure the last value equals to the height of your image. Your image is 381px high. That means, if I add 165px (the original height) with 216px, I'd get 381px. I hope it isn't too confusing :)

      Cheers.

      Delete
  56. hi there

    i used the below code but its not working. it made the header area larger but i see no image. Does my image need to se a certain size to start with?

    www.martinelouise.com

    thanks! martine

    #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;}

    #header-container #header.header .header-bar span.title{
    background: (http://1.bp.blogspot.com/-nCB1OJOf9V4/T1VSW9qS41I/AAAAAAAABuY/3CbQ8XLGVyI/s380/white+23.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    ReplyDelete
    Replies
    1. Hi martine,

      You've removed an important tag from the code. Change this line:

      background: (http://1.bp.blogspot.com/-nCB1OJOf9V4/T1VSW9qS41I/AAAAAAAABuY/3CbQ8XLGVyI/s380/white+23.jpg)

      to this (you need to add the word 'url' in front the address):

      background: url(http://1.bp.blogspot.com/-nCB1OJOf9V4/T1VSW9qS41I/AAAAAAAABuY/3CbQ8XLGVyI/s380/white+23.jpg)

      Delete
    2. yay! thank-you thank-you! it worked! goodness knows how I removed that code??! doh.

      however, The logo was sized to fit the width of my previous blog in simple template - now it looks tiny. What size does it need to be to fill the header space (without overlapping the search box on the right)? or what would I need to do?

      Delete
    3. Let's bring it to its absolute maximum and see if you like it. In your code, change this line:

      background: (http://1.bp.blogspot.com/-nCB1OJOf9V4/T1VSW9qS41I/AAAAAAAABuY/3CbQ8XLGVyI/s380/white+23.jpg)

      to this (change the s380 to s1600, everything else intact):

      background: (http://1.bp.blogspot.com/-nCB1OJOf9V4/T1VSW9qS41I/AAAAAAAABuY/3CbQ8XLGVyI/s1600/white+23.jpg)

      Delete
    4. you did it again! you have saved my sanity the last couple of days. cheers!!

      Delete
  57. I've been playing around with this too, but I don't know what I'm doing wrong. I'd like my header to be 300px tall, and the header-drawer(menu) to be 100px tall, but when I get the codes right, whenever I hover over the menu, it flickers and moves all over the place. What is the significant code here? must I add the .open and .sticky divs or has it to do with the margins and positions?

    The code I'm using looks something like this, so what am I doing wrong?


    #header-container {
    height: 300px;
    }

    #header .header-bar {
    height: 300px;
    position: fixed;
    width: 100%;
    z-index: 1001;
    }

    #header .header-bar .title {
    display: block;
    height: 65px;
    line-height: 65px;
    margin-left: 20px;
    margin-right: 235px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

    ReplyDelete
    Replies
    1. Hi Anna,

      You're gonna need all these lines to have a 300px header:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 269px;
      }

      #header .header-bar{
      height: 300px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 300px;
      }

      #header-container {
      height: 340px;
      }

      .viewitem-panel .viewitem-inner {
      top: 235px;
      padding-bottom: 255px !important;}

      #header-container #header.header .header-bar span.title{
      margin-left: auto !important;
      margin-right: auto !important;
      height: 300px;
      }

      If you change any one value from the code above, you're gonna have to change all the other values by the same margin.

      As for the 100px tall header-bar, you're gonna have to completely overhaul all the values in the set above, on top of some new code. I tried halfway, and I stopped, as it looked awful. 300px header and 100px header-bar gonna take like 400px off of the screen. Average page height is 650px. It's just not worth it. If you're interested to see how far I've gotten, here's the code (it's buggy, remember):

      #header .header-drawer.sticky, #header .header-drawer {
      top: 269px;
      height: 100px !important;
      }

      #header .header-bar{
      height: 300px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 300px;
      }

      #header-container {
      height: 340px;
      }

      .viewitem-panel .viewitem-inner {
      top: 235px;
      padding-bottom: 255px !important;}

      #header-container #header.header .header-bar span.title{
      margin-left: auto !important;
      margin-right: auto !important;
      height: 300px;
      }

      Delete
  58. Thank you so much for helping me, yoga! The reason for wanting such a tall header and menu is because I'm hoping to change the look of my blog completely using images, and that requires a large header and a bigger menu as well. Now I know that I have to use all of this code for making it look nice. Thanks again!

    Btw. Can you just please explain the math. I know that you have to either add or subtract the values if you change anything, but I just wanna know how you "figured it out". In order to have a 300px header, why are the other values 269px, 340px and 235px?

    ReplyDelete
    Replies
    1. Sure thing Anna.

      1) First, find out the height of your header. Say it is 300px.
      2) Next, change Line 26 in the code above, from 165px, to 300px (your header's height)
      3) Now, subtract 165px from 300px (your header's height). 300px - 165px = 135px (this doesnt go into the code yet)
      4) Now, add 135px to all the remaining values in the code. (Line 2, 6, 10, 14, 18, and 19)

      Let me know if you need further clarification..

      Delete
    2. How do I find the height?

      Delete
  59. Thank you for clarifying that. Now I get it! Now I just hope they will fix the live preview. It's starting to become pretty annoying to not see your changes right away.

    ReplyDelete
    Replies
    1. I know, right? I've notified the team, and they acknowledged the bug. But they did not tell if it is being fixed. Let's wait and see.

      Delete
  60. Hello!

    Thank you so much for all your wonderful codes!
    I've applied this one but I seem to not be able to get the whole image in - my head gets chopped off yet there's plenty of room below for the image to be viewed in full. I've also set it to repeat as I wanted it to fit the whole header. Is there a way of doing this with just the one image and what am I doing wrong? Here's my code -


    #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;}

    #header-container #header.header .header-bar span.title{
    background: url(http://4.bp.blogspot.com/-zYIOTGtzHQk/T2T2Fs-M9XI/AAAAAAAAAKs/1V_8LzzHyFI/s380/7916_186618652246_698992246_4350008_4408629_n.jpg)
    repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

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



    Thank you!

    ReplyDelete
    Replies
    1. Hi Francesca,

      Before I adjust anything in your code, mind if I take a look at your blog?

      Delete
  61. Hi, I was wondering if there is a way to align the picture to the left instead of having it centered, I would apreciate you answering fast and thanks

    ReplyDelete
    Replies
    1. Yes there is. Change 'center' in Line 23 to 'left'

      Delete
  62. is there a code to randomize the main background ?
    i read that its possible with php or java
    and somebody told me its impossible with CSS
    is that true ?

    ReplyDelete
    Replies
    1. To the best of my knowledge, CSS can't randomise your background, or any other attribute for that matter. Yes you will need some script for it, and unfortunately, there is no place to add any script in Dyanmic Views.

      Delete
  63. Hi. Thanks for the nice code snippet. Changed my blog header in a jiffy. Thanks again.

    ReplyDelete
  64. Here's a link to my blog:http://where-theresawill.blogspot.com/
    I want to make it so the header is the width of the screen, but there's no gap between the header and the link bar thing.
    Here's my code:
    #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;}

    #header-container #header.header .header-bar span.title{
    background: url(http://2.bp.blogspot.com/-sUQ6qphu8a0/T2uvsCvYCLI/AAAAAAAAAHg/lyAx4bAxJZY/s380/saddle+rock+2-willthisfit.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    Could you fix this for me?

    ReplyDelete
    Replies
    1. Hi Will,

      What do you think of this?

      #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;}

      #header-container #header.header .header-bar span.title{
      background: url(http://2.bp.blogspot.com/-sUQ6qphu8a0/T2uvsCvYCLI/AAAAAAAAAHg/lyAx4bAxJZY/s1600/saddle+rock+2-willthisfit.jpg)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 165px;
      }

      Delete
    2. That looks great! Thanks!

      Delete
  65. Hey Yoga! I am having problems with the new header I added covering up my pictures in mosaic mode. (This is the only mode I want)

    Is there a fix?

    Thanks
    Eddie

    ReplyDelete
    Replies
    1. Looks like you've changed a value from the original code. If you change any values in the code above, you should make relative change to all the other values. Simple put, all the values above must agree with each other. Change this code back to its original value.

      From

      #header-container {
      height: 105px;
      }

      to

      #header-container {
      height: 205px;
      }

      Delete
  66. Woohoo! Thanks a million!! (Just disregard my other post!)

    ReplyDelete
  67. Hi, I'm trying to put an image map as my header (one that changes on mouseover depending on the part of the map with a link) on a test blog of mine, but I'm not sure how to start. I can do it with HTML, but I'm not that great with CSS. Can you help me?

    Thanks in advance!

    ReplyDelete
    Replies
    1. Hi Sarahm,

      HTML map is 0% CSS and 100% HTML. You can't use HTML map on CSS code. You're gonna have to define header image using HTML (which is not straightforward) and then add image map on top of it. Though it is possible to edit Dynamic View's HTML at the moment, to add an image map to your header would require a complete makeover of your current header. I've never tried it before as it is a lot of work and it might wreck the template completely. If you'd like to learn more about image maps, check out this page:
      http://www.w3schools.com/tags/tag_map.asp

      Delete
  68. Doesn't work as I can't remove the header title, even when adding the CSS.

    ReplyDelete
    Replies
    1. Did you add this to your CSS?

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

      Delete
  69. it has worked perfectly on ufopolis.net

    Thanks!!!!!!

    ReplyDelete
  70. First of all I want to thank you for your time to answer our questions, and especially by caring for an important blog. It is an essential reference.

    My problem is that when I select static pages, they change one above the other, but its upper edge is hidden in the default margins (65px, I think). Mine has 110. In the dynamic view "Sidebar" same thing happens when I read a post with the scroll button:

    https://lh3.googleusercontent.com/-Pa-4LoEMVZg/T41vJusDFNI/AAAAAAAAAH8/9Cf6VnLw6Fg/s859/Example.jpg

    My blog is:

    http://ruralhidroponica.blogspot.com/

    Will the work of the devil? :)

    My CSS is:

    #Magazine.ss, #views ul li:nth-child(3),
    #Mosaic.ss, #views ul li:nth-child(4),
    #Snapsnot.ss, #views ul li:nth-child(6),
    #Timeslide.ss, #views ul li:nth-child(7)
    {
    display: none !important;
    }

    .header-bar #search{
    display: none !important;
    }

    .feedback{
    display: none !important;
    }

    .header-bar{
    box-shadow: none !important;
    padding: 0px !important;
    border: 0px !important;
    }

    .ss, .noborderdv img{
    box-shadow: none !important;
    padding: 0px !important;
    border: 0px !important;
    }

    .header h1 {
    display: none !important;
    }

    #header .header-drawer.sticky, #header .header-drawer {
    top: 79px;
    }

    #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
    top: 110px;
    }

    #header-container {
    height: 150px;
    }

    .viewitem-panel .viewitem-inner {
    top: 45px;
    padding-bottom: 65px !important;}

    #header-container #header.header .header-bar span.title{
    background: url(http://1.bp.blogspot.com/-skmGK7uvNIQ/TvjB4rzsKQI/AAAAAAAAADk/V_maYHU1bkM/s1600/ruralhidroponica.png)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 110px;
    }

    .gadget-icons, .ss {
    background: #4ba822 !important;
    color: yellow !important;
    }

    #gadget-dock, .ss{
    top: 150px !important;
    }

    .tabs{
    width: 80% !important;
    text-align: center !important;
    }

    Thank you very much in advance.

    ReplyDelete
    Replies
    1. Hi rural,

      Looks like you've missed a code:

      #header .header-bar{
      height: 110px;
      }

      Cheers!

      Delete
    2. thanks thanks thanks!!!

      I suspected it was something simple jejeje

      Your work is wonderful!!!

      ¡Muchas gracias!

      Delete
  71. not sure what i've done wrong.
    My blog: http://marcusrimondini.blogspot.com.au/
    Code i typed:


    #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;}

    #header-container #header.header .header-bar span.title{
    background: url(http://1.bp.blogspot.com/-txA91sZGHQY/T5U1vQ8YtQI/AAAAAAAAAF4/aSAHUg2Hz_8/s380/0.+marcus's+rough+usa+map2.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }



    help would be good, just want to know how to do it, then create a better picture.

    ReplyDelete
    Replies
    1. Hi Marcus,

      This tweak is for Dynamic Views template only, and your blog doesn't seem to be using a Dynamic Views template.

      It's easier to add a header in a non-dynamic views template. Go to Dashboard - Layout - Header - Edit - upload your picture there.

      All the best! :)

      Delete
  72. Hey there!! I'd like the picture to fit into header portion of my blog - allgabrielleu.com - but I can't seem to find the right code.. anyway you could help me out?? :) Gabrielle and I would really appreciate it!!
    Here's my code::

    #header .header-drawer.sticky, #header .header-drawer {
    top: 165px;
    }

    #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: 206px;
    }

    .viewitem-panel .viewitem-inner {
    top: 100px;
    padding-bottom: 120px !important;}

    #header-container #header.header .header-bar span.title{
    background: url(http://4.bp.blogspot.com/-mjtm8_SJZrI/T5Yhzke1v1I/AAAAAAAAAx0/ttPZOLOjGDg/s800/MyBannerMaker_Banner2.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 200px;

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

    ReplyDelete
    Replies
    1. Hi there,

      Remove the previous code that you had, and use this one instead:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 287px;
      }

      #header .header-bar{
      height: 318px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 318px;
      }

      #header-container {
      height: 358px;
      }

      .viewitem-panel .viewitem-inner {
      top: 253px;
      padding-bottom: 273px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://4.bp.blogspot.com/-mjtm8_SJZrI/T5Yhzke1v1I/AAAAAAAAAx0/ttPZOLOjGDg/s800/MyBannerMaker_Banner2.jpg)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 318px;
      }

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


      Let me know if things arent right. Cheers :)

      Delete
    2. That's awesome!! It worked... forgive me if I'm asking for too much but is it possible to make it go the length across the page header?? I'll keep searching as well :) Thanks again!!

      Delete
    3. Hi GUFP,

      Yes it is possible. You're looking at 2 options. Either you use one WIDE image to stretch across the page, or you use the same image to repeat itself across the header. The first one requires you to have an image which is wide enough to cover your header. For the second option, change 'no-repeat' to 'repeat' in the code above.

      All the best! :)

      Delete
  73. Thank you so much for your help! This is such a great post.

    I would like to left align the picture. Is that possible? Also, I want to remove some of the gap that exists if you check it out at sspanish.blogspot.com. Could you take a look and offer some suggestions?

    #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: 200px;
    padding-bottom: 220px !important;}

    #header-container #header.header .header-bar span.title{
    background: url(http://1.bp.blogspot.com/-BeLUp5WaTxA/T5ito1bpjiI/AAAAAAAAAVY/xRF95DQKmvc/s480/Slide1.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 65px;
    }
    #header .header-bar{
    background: white ;
    }
    #header.header .title a h1, #header.header .title h3{
    display: none;
    }

    ReplyDelete
  74. Hi There! Thank you so much for making this, it's really the only thing I could find to do this!

    I am having a problem, though. I uploaded my image, it's very large, but I want it to be big. I input your code, and change the 1600 to 380. It only shows up some of the time, even if I clear my cache. When it does show up it's incredibly tiny.

    So I increased every number, little by little, but the image either disappears or stays the same size. I've deleted your code and started fresh dozens of times, but I can't get it to work.

    I'm obviously doing something wrong, but I keep starting at the beginning and following your directions to a T - but it never works.

    Could it be:
    1) Me messing up the code
    2) My image is incorrectly sized
    OR
    3) Ghosts.

    Thanks in advance!!

    ReplyDelete
    Replies
    1. If it is ghost I happen to be a pretty bad-ass ghost hunter myself :P

      Just send me the link of the header image that you wanna use, and its preferred height. I'll take care of the rest.

      Delete
    2. Thank you so much! I really can't thank you enough for your help and the code in the first place :) You're the best!

      http://4.bp.blogspot.com/-sC_mm_Gj5ag/T5j576O6IdI/AAAAAAAAAG8/qhVQ3mC_nM8/s1600/Seth-logo.jpg

      Delete
    3. Hi Seth,

      You forgot to give the height that you'd like to use. What height would you prefer to see?

      Delete
    4. Hey there, I thought I replied a while back, but since you can't see comments til they're approved I'm wondering if I forgot to hit submit or something.

      Anyway, I really appreciate your help, and I was thinking of making the header centered at around 200 px tall. Do you think that's a reasonable height?
      Thanks again!

      Delete
    5. Hi Seth,

      The reply you see above is the last comment I've got from you. Anyways, this is the code that you need :)

      #header .header-drawer.sticky, #header .header-drawer {
      top: 169px;
      }

      #header .header-bar{
      height: 200px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 200px;
      }

      #header-container {
      height: 240px;
      }

      .viewitem-panel .viewitem-inner {
      top: 135px;
      padding-bottom: 155px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://4.bp.blogspot.com/-sC_mm_Gj5ag/T5j576O6IdI/AAAAAAAAAG8/qhVQ3mC_nM8/s773/Seth-logo.jpg)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 200px;
      }

      Cheers! :)

      Delete
  75. You have no idea how much you have helped me... Seriously I am so technologically inept, and have scoured the internet trying to figure out how to work out all this code business, especially after choosing dynamic view and have concluded that you are A GENIUS! Not only does everything you say work, but you explain it all so articulately and simply! You are a very kind person, helping out people so much. Especially people like me who are nowhere near as gifted as you are! I cannot explain how greatful I am! Never again will I need to spend frustrating hours googling, "How do I...." THANK YOU THANK YOU THANK YOU!!!

    http://and-the-beast.blogspot.com.au/

    ReplyDelete
    Replies
    1. Those are some nicely written words! I am not as linguistic as I am technical, but do know that I really appreciate your comment :) Have a nice weekend!

      Cheers and God bless.

      Delete
  76. Any way to make the banner/header image direct to the home page when clicked on? Seems like the non-dynamic view templates did that. -Thanks, Bob

    ReplyDelete
    Replies
    1. Yo Bob!

      Add this to your CSS and let the good time roll:

      #header .header-bar .title h1 {
      color: transparent !important;
      height: 130px;
      display: block !important;
      }

      Cheers!

      Delete
    2. Thanks Yoboy! It worked great!

      Have a nice weekend!

      Delete
  77. Hi, for some reason the code isn't working for me! Please can you help?
    Here's the code i'm using - looks right but I must have done something wrong:

    #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;}
      
    #header-container #header.header .header-bar span.title{
    background: url(http://3.bp.blogspot.com/-dRAZ9PTLIQw/T6RPGPpFaTI/AAAAAAAAARo/R14ZTWEN7_U/s1600/finalheader.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="155)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    Nothing is happening when I apply it :/

    Thanks, Emily.

    ReplyDelete
    Replies
    1. You've accidentally included some HTMLs into your CSS. Get rid of this part:

      #header-container #header.header .header-bar span.title{
      background: url(http://3.bp.blogspot.com/-dRAZ9PTLIQw/T6RPGPpFaTI/AAAAAAAAARo/R14ZTWEN7_U/s1600/finalheader.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="155)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 165px;
      }

      And use this instead:

      #header-container #header.header .header-bar span.title{
      background: url(http://3.bp.blogspot.com/-dRAZ9PTLIQw/T6RPGPpFaTI/AAAAAAAAARo/R14ZTWEN7_U/s1600/finalheader.jpg) no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 165px;
      }

      You still need the rest of the code as well. The one you have looks fine. Just change this error and it should work :)

      Delete
    2. Hello, it's me again. never mind my question in this post, i found the answer in this comment. thank you so much!

      Delete
  78. Hi there, i am an Artist and a novice at codes/links/css. The code isn"t working for me, please can you help. My blog is http://lovattcloud9.blogspot.co.uk/ My cod is below, thankyou


    #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;}
      
    #header-container #header.header .header-bar span.title{
    background: url(http://3.bp.blogspot.com/-NskxOgE0Rhk/T61Ix4WAp5I/AAAAAAAAAM8/tpBDhdcRj9k/s380/blog%2Btitle2.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    ReplyDelete
    Replies
    1. Hi Rachel,

      Your code is fine. However, you have this weird lines in your template. Your CSS could not process these lines, and as a result, your whole custom code is being rejected. Remove these lines and your header will work fine:

        

      There are a total of 5 of them. Remove all five.
      Regards,
      Yoga.

      Delete
  79. How can I add Amazon banner into the header next to search? when people click on that banner, it will lead to Amazon page? The Amazon banner is using iframe

    Please help?

    ReplyDelete
    Replies
    1. Hi Damtachoa,

      I'm afraid it isn't possible to add clickable images on the header at the moment. Let's keep our fingers crossed :)

      Delete
  80. Hi! I tried to add a header on my blog, but i can't seem to see it. I followed your instructions. where'd i go wrong? here's my blog http://jonnienavarro.blogspot.com/ and here's the codes i have:

    .tabs{width: 100% !important;text-align: center !important;}

    #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;} #header-container #header.header .header-bar span.title{background: url(http://4.bp.blogspot.com/--4n7iL4dYe8/T7X79FjNtNI/AAAAAAAAADg/qTdP4e20KXs/s380/bluejn.png)no-repeat center;margin-left: auto !important;margin-right: auto !important;height: 165px;
    }

    #header .header-drawer.sticky{margin-top: 0px !important;position: fixed !important;top: 65px !important;}

    .header-bar #search{display: none !important;}

    ReplyDelete
    Replies
    1. Hi Jonnie,

      Glad you got it sorted. Here's how you can cushion your header with some space at either end:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 79px;
      }

      #header .header-bar{
      height: 110px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 110px;
      }

      #header-container {
      height: 150px;
      }

      .viewitem-panel .viewitem-inner {
      top: 45px;
      padding-bottom: 65px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://4.bp.blogspot.com/--4n7iL4dYe8/T7X79FjNtNI/AAAAAAAAADg/qTdP4e20KXs/s1000/bluejn.png)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 110px;
      }

      Cheers!

      Delete
  81. headlesschickenHKMay 28, 2012 at 10:57 PM

    Thank you so much! Could you please kindly teach how to adjust height of the header? I tried adjusting the numbers by the same margin but it still messes up :S Many thanks!

    ReplyDelete
    Replies
    1. Hi headlesschickenHK,

      The instruction is posted above, under Extra, section 3. Or I could just fix your header for you. What's your blog's address?

      Delete
  82. I changed the size of it and it worked, yet, the half of my page is gone, it's there but when I scroll all the way down, I can scrool further but by hand.

    ReplyDelete
    Replies
    1. Hi Kellay,

      Can I have a look at your blog?

      Delete
  83. Hey there! First of all, thank you for these fantastic tutorials! They helped me out a lot setting up my blog with dynamic views.
    I just have a problem with the description, I can't seem to make it appear after the header-pic. I'd appreciate it if you helped me out with this. :)

    btw, here's my blog: brainstrip.blogspot.com

    ReplyDelete
    Replies
    1. Hi Gus.. I might be able to pull something out, but even if I could, your header's height is too small to place the description below it. Or were you referring to placing your description next (as in to the right of) to your Brainstrip logo?

      Delete
    2. Yeah, I'd like to place it to the right of the logo. I already tried making up some codes to do it, but with no success. LOL
      Thank you for helping out! :D

      Delete
    3. Sure. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #header .header-bar .title h3{
      left: 400px !important;
      }

      Cheers :)

      Delete
    4. YESS! Thank you so much! It worked.
      Have a great week! :D

      Delete
  84. Great job on this, it really bothered me for awhile not being able to have a header.

    Excellent site and tutorial...thanks!

    ReplyDelete
    Replies
    1. Aural Treasurer.. I like what you've done with your header, neat!

      Happy blogging! :)

      Delete
  85. Excellent page, it has been SO helpful. Quick question: am I able to align the header to the left, rather than centered? Thanks!

    ReplyDelete
    Replies
    1. Yes you can :) Change 'center' in line 23 to 'left'..

      Good luck :)

      Delete
  86. Hi, I have been reading your post and all the comments but I am still a little bit confused. My image is 751 x 300. What should the code be?
    Many thanks :0)

    ReplyDelete
    Replies
    1. Hi Library Mice,

      Do you have your header image's direct link so that I can prepare the code for you?

      Delete
  87. Hi!
    Here it is: http://2.bp.blogspot.com/-xIRSJLE1oy0/T9J4T-4PPkI/AAAAAAAACXA/GkvsGuupYVI/s1600/newLMbanner_british.png
    Many thanks :0)

    ReplyDelete
    Replies
    1. Lovely.. Here's your code:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 269px;
      }

      #header .header-bar{
      height: 300px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 300px;
      }

      #header-container {
      height: 340px;
      }

      .viewitem-panel .viewitem-inner {
      top: 235px;
      padding-bottom: 255px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://2.bp.blogspot.com/-xIRSJLE1oy0/T9J4T-4PPkI/AAAAAAAACXA/GkvsGuupYVI/s1600/newLMbanner_british.png)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 300px;
      }

      Good luck :)

      Delete
  88. It worked :0)
    Many, many thanks for your help!

    ReplyDelete
  89. Hi all, I followed the instructions to add a picture header (I think), but nothing is happening. Here is my code:


    #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;}

    #header-container #header.header .header-bar span.title{
    background: url(http://4.bp.blogspot.com/-gYJY-DP0kGU/T9eLRNdLeTI/AAAAAAAAAKM/4paJWYkd_gA/s380/marketsunflowers.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    Could someone help me figure out what I'm doing wrong?

    ReplyDelete
  90. Hi Yoga! This is kinda embarrassing but.. i just cant find out a way to adjust the correct settings for my header! Been working on it for 2 days now >.>... can you please generate the code for me?

    I would really appreciate it ALOT! Thank you very much in advance!

    Direct Link:
    http://i211.photobucket.com/albums/bb2/DemoniteTigran/Untitled-2-3.png

    Blog Link: http://justrollhehe.blogspot.nl/

    ReplyDelete
    Replies
    1. Hi Smoky,

      I can see a header in your blog now. Have you got it sorted? In any case, here's your code:


      #header .header-drawer.sticky, #header .header-drawer {
      top: 84px;
      }

      #header .header-bar{
      height: 115px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 115px;
      }

      #header-container {
      height: 155px;
      }

      .viewitem-panel .viewitem-inner {
      top: 50px;
      padding-bottom: 70px !important;}

      #header-container #header.header .header-bar span.title{
      background: url(http://i211.photobucket.com/albums/bb2/DemoniteTigran/Untitled-2-3.png)
      no-repeat left;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 115px;
      }

      Cheers! :)

      Delete
  91. Hello,

    Thanks so much for posting this. For some reason, I am following your instructions, but my banner is still not showing up. I have tried both jpg and png formats. If I post my code, will you take a look?

    ReplyDelete
    Replies
    1. Hi Joel,

      Yes I'll be happy to have a look. Alternatively, you could just tell me the direct link of your header image, and the height that you'd like to use - and I'll come up with a set of code for you :)

      Cheers!

      Delete
  92. Hi Yoga,

    Now this comment is not related to this post. I was trying to locate a post on your blog regarding "Facebook share buttons". Not being able to search any. Somehow my blog FB Share buttons are not working. Can you check please. Thanks in advance.

    http://india-north-east.blogspot.com

    Regards

    ReplyDelete
    Replies
    1. Hi NE,

      It seems like your buttons are working when I tried it. When I clicked on your FB button, it prompts me to login into facebook. What happens when you click on your share button?

      Delete
  93. This was a great tutorial but it didn't work for me :/ A little help?
    Here's my code:

    #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;}

    #header-container #header.header .header-bar span.title{
    background: url(http://1.bp.blogspot.com/-X6vIVTTtJTY/T-gSmL0uBRI/AAAAAAAAAN8/5I_hQ-8pFkA/s380/livelaughpolish.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="109" src="http://1.bp.blogspot.com/-X6vIVTTtJTY/T-gSmL0uBRI/AAAAAAAAAN8/5I_hQ-8pFkA/s1400/livelaughpolish.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    Thanks!

    ReplyDelete
    Replies
    1. Hi Gracey,

      Sorry for the late reply. The last part is what you're doing wrong. It should be:

      #header-container #header.header .header-bar span.title{
      background: url(http://1.bp.blogspot.com/-X6vIVTTtJTY/T-gSmL0uBRI/AAAAAAAAAN8/5I_hQ-8pFkA/s380/livelaughpolish.jpg) no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 165px;
      }

      Delete
    2. Sorry, another problem xD How do I get rid of the title and description? My header is already set to "instead of title and description."

      Delete
  94. Hi,

    Thanks for all your tutorials! I tried this code but it only inserted my picture quite small in the very center. Is there any way to make the picture stretch across the entire page like a proper banner?

    thanks!

    ReplyDelete
    Replies
    1. Yes there is, you just gonna have to increase the size of your image. If you could provide me the link of your header image, I'd prepare a code for you.

      Cheers :)

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.