How to move date below the post title in blogger

This tutorial will show you how to move the date below the post title on your Blogger blog. This has been made a lot easier since the Blogger 2013 Update. A lot of people prefer the date beneath the title of the post, here are two ways how to do it (with some styling fixes at the end of the post).

Download a backup of your template before editing your code. Take care when editing the HTML, one wrong character can mess up your entire code. The code in the following tutorial may look different depending on your template.

Method 1 – Move post date beneath post title on Blogger

  1. Go to the Template tab in the dashboard and click Edit HTML. Click Format Template which used to be “Expand Widget Templates”.
  2. Click on the Jump To Widget Template and choose Blog1
  3. This will take you to the line with a fold marker β–Ί beside the numbering. Click on it to expand the widget code.
  4. move-date-below-header

    move-date-below-header

  5. You will see a line with the following code. Click the fold marker beside this line.
    <b:includable id='main’ var='top’>...</b:includable>
  6. move-date-below-header

  7. Within this, you will see the following code
    <b:if cond='data:post.isDateStart'>
     <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
     &lt;/div&gt;&lt;/div&gt;
     </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
     &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
     <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
     &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>     
  8. move-date-below-header

  9. Copy this code to a text file and delete it from your HTML.
  10. Find the following code in your HTML using the search bar. To search, click into the HTML box and press CMD F on a Mac or CTRL F on a PC. Enter the code into the search box and hit enter. Paste the code you’ve copied underneath this line. If you find two versions of the code, paste it under the second which will be further down in your HTML, use the numbering on the left to help you! This is very important!
    <div class='post-header-line-1'/>

    move-date-below-header

    move-date-below-header

    move-date-below-header

    move-date-below-header

  11. Click Preview to check that it has worked properly and that no code has been messed up. If there’s a gap between the title & date then follow the instructions at the very end of this tutorial.
  12. move-date-below-header

Method 2 – Move post date beneath post title on Blogger

  1. Go to the Template tab in the dashboard and click Edit HTML. Click Format Template which used to be “Expand Widget Templates”.
  2. Click on the Jump To Widget Template and choose Blog1
  3. This will take you to the line with a fold marker β–Ί beside the numbering. Click on it to expand the widget code.
  4. Within this, you will see the following code
    <b:if cond='data:post.isDateStart'>
     <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
     &lt;/div&gt;&lt;/div&gt;
     </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
     &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
     <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
     &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>     
  5. Cut the following code and paste it into a text editor such as notepad, text wrangler or text edit.
    <b:if cond='data:post.dateHeader'>
     <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
  6. Find the following code. If you find two versions of the code, paste it under the second which will be further down in your HTML, use the numbering on the left to help you! This is very important!
    <b:if cond='data:post.title'>
     <h3 class='post-title entry-title' itemprop='name'>
    <b:if cond='data:post.link'>
     <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
     <b:if cond='data:post.url'>
    <b:if cond='data:blog.url != data:post.url'>
     <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
     </b:if>
     <b:else/>
    <data:post.title/>
     </b:if>
     </b:if>
     </h3>
    </b:if>
  7. Paste the code you copied underneath this
    <b:if cond='data:post.title'>
     <h3 class='post-title entry-title' itemprop='name'>
    <b:if cond='data:post.link'>
     <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
     <b:if cond='data:post.url'>
    <b:if cond='data:blog.url != data:post.url'>
     <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
     </b:if>
     <b:else/>
    <data:post.title/>
     </b:if>
     </b:if>
     </h3>
    </b:if>
    
    <b:if cond='data:post.dateHeader'>
     <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>

Fix Styling – Remove the Gap between Post title & Date

Blogger templates are already set up with appropriate spacing, so when we alter the template we need to adjust the spacing (padding, margins, etc) as well. The following will show you how to reduce or remove the gap between the post title and the date.

  1. Go to Template > Edit HTML and find </b:skin>. Having trouble? Check out the post on editing CSS on Blogger.
  2. Above </b:skin> paste one of the following into this section. The code will depend on your particular template but one of the following should work for most templates. You may have the code in your template already, search for the part in pink and change the values in your template to match the values below.
  3.  .post { margin: 0px; padding-bottom: 0px;} 
     h2.date-header  { margin: .5em 0 1.5em; } 
     date-header  { margin: .5em 0 1.5em; }
     .post-header  { margin: 0px; }
  4. Edit the number to suit your blog & layout.

190 Comments

  1. Hi, I have just tried to do this tutorial and everything was going fine until the end. I pasted the code after the second one and blogger just kept saying something along the lines of Div and Class could not work together or it was not right – even though it was the same as the original one in my html before trying this tutorial. I would just like the date header to be underneath the post title or in a circle to the left of the post title.

    Heather Nixon

    1. Hey, when you go into your HTML template, click format template and try the tutorial again, making sure only to cut and pasta exactly what is shown above. Let me know how this goes xx

    1. You’re blog design is adorable! Make sure you click Format Template – you may have to click it twice and find the code which is furtherest down in your template. Let me know how this goes x

  2. I tried it and everything went well and without errors until I found out… that now the date doesn’t display at all πŸ˜› I guess my template won’t work with this magic you posted about πŸ˜‰ Although, thanks for the tutorial! Greetings from Poland πŸ™‚

    1. Refresh, sometimes Bloggers new HTML editor is buggy. Make sure to click Expand Widget Templates. You should see a little arrow at the numbers on the left of the HTML box near the code for Blog1. Let me know how it goes πŸ™‚

  3. Thank you so much for this! It was so simple & easy to follow, especially compared to some of the other tutorials out there. I just have one question; I followed this, but now there is a massive, unnecessary gap between my date header and post title. Could you help me with this?

    Thank you,
    Rebecca.

      1. I have the exact same problem as rebecca. From the second post on there is a gap between the title and date header. The first post is perfect. It seems as if the title of the second post became part of the footer of the previous post. Please help?

          1. I’m having problems with the spacing between the date and title on my second post. It seems to work fine on the first but not the other ones. I’ve tried pasting the four different pieces of code into CSS as described above but its still not working.

            I have also followed the steps in your tutorial for adding custom fonts to blogger. It seems to have worked on the titles but is it supposed to go into the font selector in the template–>customise–>advanced section? Or do I need to keep adding the bit of code wherever I want that specific font to be used?

            Can you help?

            Thanks!!

          2. Hello. The problem is the post header. You have the date beneath it, not in it. So the space of the date header is the issue. To correct it add .post-header {margin: 0em;} to your CSS. No it won’t appear in the Template Designer (Template > Customise) unless you add it as a variable, otherwise you’ll have to manually add it.

  4. Cannot understand. I have tried this for thousand times and every single time the date header just disappears. My template is Simple, but no success with other templates either. Have done this with Minima template with success, years ago but now – nothing. I know I’m putting those codes and lines exactly where they should be put. Can you guess what’s wrong?

      1. There is only one and I’m 100% sure of it, so no success. Is there any possibility, that Blogger would have changed the code? I tried to create a new test blog (with Simple template), but not working there either so I’m sure there is nothing wrong with my code, because I didn’t make any other changes before doing this. I have tested other (quite fresh) tutorials too with no success. Quite complicated…

        1. I just tested using the simple template and post-header-1 appears twice, could you check again? Make sure to click “Format Template”. I’ve added an alternative method if you can’t get method 1 to work. What is your URL?

          1. Weird. I opened every single fold marker, but search finds only one line… on the other hand Blogger has been bugging in past few days so much that I wouldn’t be surprised if this was some kind of bug too. I will try next week your alternative method, thanks πŸ™‚

    1. I’m not sure if you’ve found it yet or not, but I had the same issue at first. I generally search the code “post-footer-line-1”, once I’ve found it I alter the code by adding an extra “-” so that it’s “post-footer-line–1”. Then I search again for “post-footer-line-1” and it takes me right to it.

      Once you’re finished, be sure to change the altered code back to it’s original by removing the extra character, hit save and you’re all done.

  5. Hi! This tutorial worked great and was super easy to follow! Thank you! One thing – once I successfully moved the date, rather than having a large gap between the post title and date, the date is actually cutting off part of my post title (just a tiny bit). I added the additional CSS code ( .post { margin: 0px; } ) – do I just change the zero to a larger number to create more space? I tried playing with it up to 20px, but it didn’t seem to change anything. Any insight?

    1. What is your URL? Did you use method one or two? It depends on your template but try using h2.date-header { margin: .5em 0 1.5em; } or date-header { margin: .5em 0 1.5em; } instead of .post { margin: 0px; }.

      1. Hi Ellie! I’m back again regarding the date question. The fix you provided in September about using date-header { margin: .5em 0 1.5em; } vs .post { margin: 0px; } worked, however, now when I publish a new post, the older post’s date gets pushed down several spaces below the title and my font size changes. Any suggestions?

        Thank you!

        1. Hello lovely. Find all instances of .post and make sure the margin is set to 0px. There seems to be two which aren’t. Then find .post-header and change the margin to 0px also. If you want to add *****@gmail.com to Blogger > Settings > Permissions I can take a look and resolve it for you πŸ™‚ x

  6. This worked perfectly for me as I was testing out the template with just one test post. Then I added other posts and the date headers randomly appear normal on some posts and with a ridiculous 30px+ top margin on others. Looks completely random. Any idea what could have gone wrong?

      1. Hi! Thanks for the quick response! I did use this code to adjust the default date header, what is happening though is that on my blog homepage, the first post will appear with the date where it’s supposed to be, and the second post (and on) will appear with this 30px (more or less) gap. That is just on the homepage, the post itself looks normal. I haven’t published the blog yet but I added a screenshot here: http://i789.photobucket.com/albums/yy172/meuestiloe/Random/ScreenShot2013-09-13at35920PM_zps4b212ce6.png

        Any thoughts?

        Thank you SO MUCH for your help!

        1. Just read through the comments and saw you already addressed this issue! X) Sorry!
          Either way, it still doesn’t work for me. The only tag that provided any effect was .post { margin: 0px; }, but there’s still a 10px gap from the second post on. Any value below 0 will mess up the entire header, title included.

          1. Hello, just went on to your blog and had a look at your code. You still have this in your template somewhere which is whats causing the spacing .post { margin:0 0 45px 0;}, once I removed it, the date appeared properly.

          2. That is so weird, I have looked everywhere on the template for this code, it’s just not there. All of the .post {} tags say margin: 0. You looked at the blog on this address: http://blogmeuestiloe.blogspot.com.br ?

            I’m so sorry to be bothering you with this, I can’t seem to figure out what’s wrong. Thanks for your patience, sorry about the hundred comments.

          3. I PROMISE this is my last message, SO sorry!
            I figured it out: .post-header {margin: 0;}

            Thank you SO much, I have used a bunch of tutorials in your blog, it’s been really helpful! Sorry for the trouble!

  7. I don’t normally leave comments on websites but this deserves one. Thank you so much for this tutorial. It was so easy to follow. There were times when it wouldn’t find the second part of the code but that’s because it was hidden by Blogger. I just hate the fact that they inserted those changes with the compressed code. I think it was easier before.

    Anyways, thank you again! The best tutorial out there. And trust me, I have tried a few πŸ™‚ You just got yourself a new follower.

    Kind regards

    1. Hello lovely, sorry about the delay. Could you invite *****@gmail.com to be a reader on your test blog in Settings so that I can see the code, as at the moment the blog is private.

  8. Wow! I’m so surprised to find everyone is having the same problems as me! The tutorial was great, thank you vert much! however, I seem to still be having the same problems with the gap between posts and a small indent where the date should sit flush with the header. I have tried your other solutions but I can’t seem to get it to work. I’m a complete beginner at this and have been trying to build my template from an existing one. I’m getting somewhere with it but this is one issue I CANNOT solve πŸ™‚ any help would be greatly appreciated xx

    1. Try adding padding-bottom: 0px !important; to .post {. The indent is being caused by the padding value for .date-header span { in Template > Edit HTML.

      1. SUCCESS! …Almost! It worked for the first post but now the rest are all messed up and the margins between all of the posts are now missing! At least I am getting somewhere πŸ™‚ haha. There’s something about this that is so frustrating yet I’ve been sitting for hours and feel a great deal of satisfaction when something goes right πŸ™‚

        1. The CSS .post {.... } appears multiple times, they could be clashing which is causing you the format problem. Did you have the code I mentioned as I don’t see padding-bottom: 0px !important; under any of the .post { code.

          1. Do I replace the original line that reads padding: 0px 20px 0px 20px; under the .post { line or just add it in? Yeah I think it’s a little confusing there’s:
            .post {
            .post-body p {
            .post ul {
            .post ol {
            .post li {

            Sorry if I’m being completely moronic…but I really appreciate your help x

          2. It’s no problem, I’m happy to help πŸ™‚ Yes replace the original padding. No that list is okay as they are different elements of post, I mean just .post { on its own – from what I can see it appears 3 times in the CSS section of your template as so

            .post { margin: 0px 20px 0px 20px; padding: 0px 20px 0px 20px; line-height: 1.5em; text-align: left; background: $postbgColor; }

            further down as .post { width: 540px; padding: 20px; margin: -10px 0 10px -10px; border-bottom: 20px solid #ecebeb; }

            and right before the end as .post { padding: 20px !important; margin: -10px 0 0px -10px !important; border-bottom: 0px solid transparent !important; }

          3. I just added it but it’s gone a bit crazy again! I’m just not getting it! Also the margin between posts has disappeared! I think I’m going cross eyed looking at this screen πŸ™‚

          4. Probably due to the multiple entires. If you want to add *****@gmail.com to Settings > Permissions, I can take a closer look and clean up the code a little bit for you.

    1. Very odd, people normally have the opposite problem. It’s hard to tell without having a look at it myself, if you wish you can add ****@gmail[dot]com to Settings > Permissions and I will check out the problem for you.

  9. I’m so grateful that you take the time to post these tutorials and help others – I’ve been going crazy trying to find certain codes and understanding the template.

    I used the alternative way for setting the date below the post, and it worked. πŸ™‚ The only problem is, now I can’t find the ‘Comments’ link on the post. If I click on the post though, I’ll find the comments normally. What do you think is the problem?? I use Disqus for my comment system, so I’d be really grateful if you knew a way around this.

    Also, I had one last question. I want the comment link to show next to the date, below the post title. I want it to look something like this:

    POST TITLE
    30.10.2013 | 6 Comments

    Like I said before, I use Disqus, so I hope you know how to solve this! Thank you again so much! <3

    1. Hello. You didn’t leave your URL so cannot check your code but if you go to Template > Edit HTML and search for either post-footer-line post-footer-line-1 or post-header-line-1, you’ll find the code for the date and comments. Simply switching them around so that date it above the comments code and then editing the CSS so they are centred. I’ll have a post on this soon but if you have any further questions I’m happy to help! xo

  10. Hi, Thanks for your great tutorial! I am working on a friend’s blog and have run into a little problem. The spacing looks great on the first post, but then on all the other posts there is too much spacing. Do you know why that would be happening? Thank you!

    1. Hello Lindsey, yes because you are changing the dates position, you have to reverse the spacing. The code for this is at the end of the tutorial.

  11. hi Ellie, nice to meet your post πŸ™‚
    i know a little about html and css and javascript too, but i dont understand the blogger template structure.
    i have no blog now, but i plain to make new one with my own template, so firstly i need to learn the blogger codes structure.
    i have read the blogger structure on the blogger help, but still i can’t understand it.
    where is the date section codes and where is the post title codes? i think you already know it very well..
    Thanks, Ellie.. πŸ™‚

    1. On Blogger, go to Template > Edit HTML. From here search for post-title entry-title, there will be two so find the second one. This is where the code for the date and post title is. Check out this post and this post for understanding the HTML Editor. In all my tutorials I explain exactly what code to look for to change a specific thing. Hope this helps.

  12. Awesome tutorial, thank you! So easy to follow.
    I’ve tried both methods and each time the date has completely disappeared. I’m not doing something right, clearly.
    My date is supposed to be centered underneath the post title but some posts are center and others are right aligned, left aligned, completely messed up.
    Can you please assist? πŸ™‚

    1. Hello lovely, make sure you’re pasting it under the second heading, it will disappear if placed under the first. It doesn’t look like you have currently moved the date using these methods so it’s likely that there is something conflicting with the code you’ve used to position it. Try removing this before attempting the tutorial again. I can have a closer look for you if you wish.

    1. Hi Louise, really glad it worked perfectly for you. Thank you so much for taking the time to write a comment πŸ™‚ really glad I could help.

  13. Hi, thank you for the tutorial! I’ve tried many tutorials and this one is by far the best, and most successful (at least for me). So, I’ve managed to move my post title above my date (yeah!) but that gap is still there (boo!). I’ve followed your instructions, and I’m fairly good with HTML but for some reason this is just eluding me. I was wondering if you would be able to go in and find what the heck is causing the gap? The codes you posted weren’t working for me. I just want it a bit closer together. Thank you!

    1. Hello. Sorry about the delay getting back to you, I’ve been quite sick this week. There seems to be a margin value under .post-header { which is causing the space.

  14. I got the date moved below the post title! YAY! Thank you! But MY gap is between the blog description and the post title. This means the post title and the About Me headings are not flush. Any ideas on how to get rid of this gap? Thanks for any insight!

  15. Hi, I was wondering if you could help me out with something. I initially did the circular date thing and I followed your tutorial and it worked. Now, I’m kinda bored with it, haha so I just want to go ahead and put the date below the post title instead. I saw that you have a tutorial on that too which is this one but I had a hard time transitioning from the circular date to this. As you can see, the date on the first post is ok but on the next posts were…hm, I think the problem is with the post title this time. I don’t know what happened. They went over the border that I added in between the posts and I can’t seem to find what is wrong in the code. I tried tweaking the padding and margin to try and lower the title down but nothing seems to be working. I don’t know what to do anymore. Huhuhu I hope you can help. I can’t seem to find a proper solution to this anywhere. I’ve gone absolutely desperate here. Thanks in advance πŸ™‚

    1. Hello! Okay first, you have to remove the script and styling for the circular date header. It looks like you used method one so find </head> in Template > Edit HTML and remove the code that is in point 4 and 5 of method 1 on this post.

      Then add .post-header { margin-bottom: 0px; padding-bottom: 0px; } to your CSS (above ]]> </b:skin> in Template > Edit HTML) or change the already existing .post-header. Remove .post {margin-top: 20px; margin-bottom: 45px; border-bottom: 2px double #000; } which is adding that extra spacing.

      Finally, because we’ve rearranged the code to make the date appear below the title. The typically way to add a post divider is a little messy so we remove it from .post and use this method instead. Find .post-footer and add border-bottom: 2px solid #000000; padding-bottom: 30px;}. That will add it below each post without disturbing the date or title. Hope this helps x

      1. Oh my god, babe! You are a life saver! Easy to follow instructions and it worked! Thank you so much! I could kiss you right now, hehe. Thanks again πŸ™‚

  16. Hi Ellie. I followed the tutorial to a T and it works, but for some reason the code seems to change my page text color every time. I have tried to customize the page text color to no avail. However, once I revert widgets template to default my page text color returns back to normal and the date also returns to the top of the blog title.

    Is there any way you could help me? I am using the Watermark template. Thank you.

    1. Hello! I’ve only ever experienced that once with the Watermark Template using the first method, it’s very strange that it only happens some people. Method number 2 should work for you though, have you tried it? Also, you’re missing a bracket in your CSS. Find ]]> </b:skin> in Template > Edit HTML and then add a bracket after .titlewrapper {padding-top: 50px !important;. I notice you seem to be pasting your content in from a Word document? You should avoid using Word, instead use a Text Editor like TextWrangler or Notepad. When you paste from Word, extra styling gets added to your post that can over-ride your Blogger code – you can see this by editing a post and clicking the HTML tab instead of Compose mode. It may cause you problems in the future πŸ™‚ hope this helps x

    1. Hello. You’ve since reverted it so I can’t check the code for you to see what’s causing the problem. Make sure to try the CSS at the end of the tutorial for removing space for .post , h2.date-header, date-header and .post-header. You could also check the padding under .main-inner .widget h2.date-header span.

  17. Hi, bugging you again. Do you have an idea of how I could put the comment count next to the date below my post title? I was able to transfer the comment count but don’t know how to put it next to the date. It just sits 2 spaces below the date. Hope you could help me again. Thanks xx

  18. Hey Ellie, thanks so much for sharing this! I’m having an odd problem though. It’s showing perfectly in the preview on the Template page, but the change won’t reflect when viewing the blog.

    I did make sure several times, that the HTML edits were saved, and cleared my browser history, but it just won’t show the change. Is this a normal Blogger bug or is there something overwriting it?

    Hmm, actually, no changes I’ve made are saving. As soon as I close the window, it reverts to defaults. Not even the fonts, I’ve added them three times now. I guess it’s a Blogger problem after all…

  19. Hi there – great tutorial, everything worked fine except the comments link on my top post disappears after changing the code around so the date is below the title.

    Comments can be made if I am viewing the entire post on its own page, so it’s not because I’ve turned comments off for that post, it’s just the link has disappeared when viewing it from the home page?

    The link remains where it’s meant to be on the second post, it’s just the first with the problem.

    Any suggestions?

    1. Double check that you pasted the code in the exact right place, anywhere else will cause problems. Then scroll down find post-footer-line post-footer-line-2 underneath it and look for the post-comment-link code, if you can’t find it then that could be the problem. Let me know πŸ™‚

      1. Yup I’ve checked and compared with the tutorial and it is in the exact place. post-comment-link code is right below post-footer-line-2, and the link on my blog is only not showing up on the topmost (most recent) post on my blog, it shows up beneath the next post down. Should I revert Blog 1 and try the ‘alternate’ tutorial to see if that works?

        Tried the alternate tutorial and still the first comment link isn’t showing up – makes no sense to me!

        1. So sorry for the multitude of posts – feel free to delete them. I have figured it out after reverting the template and css to default and then copying back in my css? So not quite sure what actually happened there but now it seems to be showing up. Strange. Thanks for your time though!

  20. Hi Ellie,

    I did the alternative fix because I couldn’t get the first one to work. I can’t remove the gap between the header and the date using either of the codes. When my post title runs into 2 lines the date is snug up under it but if the post title is a single line that’s when I get the gap. Also, awhile back my date header somehow became centered under my title and I’m not sure how. Can you tell me how to make it aligned to he left?

    Thank you for all of your help!

    1. Hello. You have the following codes in your CSS .date-header {
      text-align: center; background: url('http://i703.photobucket.com/albums/ww39/flghtlss/ABLR%20Site%20Graphics/ThemeBackground_zps034730d8.png') width: 195px; height: 44px; }
      and .date-header {text-align: center; } which are making your date centred. Change the first text-align: center; to text-align: left; and delete .date-header {text-align: center; }. The trouble is that you have a lot going on within your posts, its not very wide so your titles are on multiple lines and you’ve a post excerpt so it’s harder to align the date because where it needs to be varies post to post. The space between the date and title is caused by the height value under .date-header but altering this may cause problems of it running into your title.

  21. Hi, I love this tutorial and your blog. However, I’m having some issues. I’m unable to find this code: I followed the tutorial as it was and when I put this in ctrl+F search box & enter, nothing happens. It does not get highlighted like it should! πŸ™ Please help or take a look at my HTML (Let me know how to send you that).

    And when I tried the second method, I couldn’t find that longer code. ok, I finally found the codes and applied it, the first post appears fine but for the rest of the posts, the post title is coming above my post separator πŸ™ and the date is coming below that. There is no speaking issue.. Yikes! ;/ help!

    1. Hello, as stated above the comment box code that is not first encoded using this website cannot be seen in the comments so I don’t know exactly which part you are struggling to find but check out this tutorial for finding code in Blogger HTML editor. Apply the code at the bottom of the tutorial and look for padding or margins that are used for your post separator. These could cause space issues. Let me know how you get on with this πŸ™‚

  22. Hi! Thanks for the post- I did it and it worked great! Although now I am having a weird glitch, my comment reply button isn’t working. It looks like the link is now dead. It seems like this wouldn’t be related at all to the header, but it worked up until the point I made changes.

    Any clue what I should do?

    Thanks!

  23. I managed to get this to work on the first post, but I have the same problem where on all the ones after it I still have a gap. I did read through the other comments and tried to fix it myself but I can’t work out how to do it at all! Would you mind helping me out with it?
    Thanks! x

      1. I had a look through and searched for it but I couldn’t find that, I had things like ‘1.5em’ instead of px and I changed them to 0 but it still didn’t change anything past the first post on my page. x

          1. I still can’t find it, I’ve tried changing around some of the numbers and they don’t do anything either. Sorry for asking so many questions hahah! I’m just so stuck x

          2. It’s no problem πŸ™‚ it may look like .post { margin: 0 0 $(post.margin.bottom) 0; }. Did you find h3.post-title, .comments h4 under the heading Posts in between <b:skin> and </b:skin>?? It should be above that. If you can’t find it just add .post { margin: 0px !important; } right above ]]> </b:skin>

          3. No problem. It being at the bottom of your CSS means it’s over-riding the other code you couldn’t find which is a perfect alternative solution πŸ™‚

  24. Loved this tutorial! Thank you.

    I do have a question. I am designing this site for a friend and for some reason the post titles have a greater left margin after the first post. If I change the post-title margin, it does help the posts under the first one, but then makes the first post post-title not in good alignment. Do you have any thoughts? I was able to fix the date-header & post spacing after the first post, but I can’t seem to figure out how to change this problem. Thanks!

    Jessica

    1. Hello! It sounds like it could be a padding value under .post, make sure they are set to 0. If you want to send me a link to the site I can have a closer look.

  25. I love your tutorials and as a complete beginner (read as HTML/CSS idiot), I really appreciate all the help that you have given me! I went through the above to change my date to be below my post title and it worked – wihoo!!! But… that big, gaping bit between the post title and the date is literally driving me nuts! It’s Valentine’s Day, my husband is in bed asleep and I am sitting here in tears after having tried so many of your tips from above. I think I must have done something that is preventing me from cracking this. πŸ™ I am sorry if this is completely presumptuous but could you do me a huge favour and look at my site and guide me in the right direction? I have added you as an author and would be eternally grateful for a little insight! Huge thanks in advance!

    1. Hello Sara! Thank you so much. I’m so sorry, I was away for the weekend and had no internet access so only seeing your message now. I see the problem, it’s the padding and margins under .post in your HTML. I’ve accepted the invite, could you go back to blog permissions and beside my name/email change it from author to admin and I’ll fix it for you πŸ™‚

      1. Oh, thank you, thank you, THANK YOU! I have changed you to admin and if I could, I would give you a huge kiss! You are a god send! πŸ™‚

          1. Wow, really? You could fix somebody else’s blog as an admit?
            Wow, it’s great to know that someone could sacrifice a little bit of her time for that.

  26. What a wonderful sight to wake up to this morning! πŸ™‚ Thank you so much! And yeah, Valentine’s Day wasn’t a complete washout… just suffered a minor meltdown. πŸ˜‰ Hope you had a lovely weekend away! x

  27. LOVE all of your tutorials – it’s really helping me to update my site! I was able to get this to work successfully, but the spacing between title and date on all of my old posts is out of whack. The one post I’ve done since altering is just as I want them to be (and all new posts I have saved as drafts are also spaced correctly). Any idea why?

    1. Hello, take a look at the last step at the end of the tutorial and remove/reduce the margin values under .post, .post-header and h2.date-header in your template.

  28. I literally JUST stumbled appon your blog and I’m absolutely in LOVE! I love this tutorial especially, I’m okay at coding but I’m definitely slow at it and get confused easily! It was so easy to follow and I feel like jumping up and down because of how easy,fast and enjoyable surprisingly it was to follow and do!I can’t wait to read more of your blog, it looks absolutely beautiful and I wish you best of luck with everything and your career!
    http://ollytherandom.blogspot.co.uk/

  29. I tried other tutorial and it went wrong. I’m glad to find this tutorial, its easy to understand πŸ™‚ Thank you!

  30. Thank you for this great tutorial. Not long ago I almost went crazy trying to move the date and in the end I had to give up. I guess it had to do with the two versions of the same code. Now it worked!!!

    I’m sooo happy I’ve found your blog, it seems to me there are many interesting things around here!

  31. Hi, I still can’t seem to remove the space between the Post Title and Date. It only works on the first post. Please help.

  32. Hi

    I’m having the same problem as someone else here had – the date shows fine in the most recent post, but not in the others. I tried playing with the margins in .post, but no success – at the same time i’d love to add some spacing between the blog posts (and all tutorials i find tell me to change the bottom margin in .post), but no luck with that either..

    can you help? i’d really really appreciate it!

    cheers
    Michaela

    1. Hello Michaela, I only see two posts on your blog and just like the other user both of your posts were published on the same date so the date will only show once on the main page. This is Bloggers default method of showing the date. To create more space between posts, try adding margin-bottom: 20px; to .post-footer

  33. I have a problem with the spacing between the post title, and the date. Every post after the first one seems to have a slightly bigger gap. I’m not sure how to get rid of this. I did read the first comment that was left, I did what you suggested, for some reason I can’t get the gap any smaller.

    1. Hello, I’ve checked your code and the gap is the same size for each post. Have you resolved this issue since leaving a comment? x

  34. Hi Ellie!!!
    I just have to say, I’ve been using your tutorials for the past few days, and for someone who hasn’t done any sort of HTML/CSS in years, you really helped me get back on the horse, such to say. So many little tips and tricks that have helped me customize my blog thus far, and I am eternally greatful!

    Anyways, I’m having a bit of an issue with the date under the header. It’s got a weird gap problem, and I’ve read through the above comments and tried to figure it out myself to no avail. Wondering if you could help out??

    I’m just gonna blame it on pregnancy brain that I can’t figure it out, lol!!!

    I highlighted the issue in this image, just to show you what I mean.
    http://i61.tinypic.com/167s7bn.jpg

      1. Hey! Thanks, I couldn’t find what you had said (it just wasn’t there), but I did a bit of searching around, and found this:

        <Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="0px"/>

        I changed 0.4em, and changed it to 0px, which worked, thankfully!! So glad..

    1. Hello. I can’t see code in the comment section. Please paste it into the box here or here and press encode. Paste the output into a reply comment in between <code> and </code> and then I can help.

    1. Within Edit HTML, click Jump to Widget > Blog1 and you’ll see a list of codes like <b:includable id=' '> .... </b:includable> scroll past them and you’ll see <div class='post-header'> and it’s under that. Or try searching for post-header-line-1 using the search box.

  35. Hey, when I paste the code below the highlighted line on blogger ‘ <div class='post-header-line-1'/> and then preview, the date has disappeared from the top but is no where to be seen under the blog post?

    1. Hello, sounds like you’re moving it to the wrong <div class='post-header-line-1'/> as it appears a couple of times in your template. Make sure it’s the last instance of <div class='post-header-line-1'/> in your template πŸ™‚

  36. Hi there,

    Thanks SO MUCH for this tutorial! I was reading through the comments, and can I just say that I am so impressed and appreciative of how kind and responsive you are to your readers’ coding problems! I have tried providing coding tutorials on my and my sisters’ blog, and I can get SO overwhelmed by questions and trouble-shooting!

    Anyways, this tutorial worked for me, though I did have to fiddle with the margins and padding to fix the huge gap that pops up πŸ™‚ Thank you for providing such well thought-out, helpful tutorials! I have followed 2 already, and can’t wait to browse through more. Editing the blogger template HTML and CSS is sort of a pet-hobby for me, so having your blog as a resource for when I get stuck is so awesome! You are now my go-to blog for coding tutorials and tips πŸ˜€

    -Charlotte
    boyerfamilysingers.blogspot.com

    1. Hello Charlotte, thank you so much. Your comment has just made my day! It is definitely overwhelming at times (like right now with 300+ comments and even more emails to answer lol) but lovely people like yourself make it worth it πŸ™‚ really glad you’re enjoying my blog! Hope you and your sisters are having a nice weekend x

  37. Everything seems to work fine and the tutorial is great but I have this problem – the date on my first post stuck too close to the post title, I think I managed to fix it, but my first post on top of the page is with smaller sized font than all the other posts… I tried fixing it but it didn’t work πŸ™ Now my first post is totally different with a smaller font and a stuck title… Also all of my previous CSS codes disappeared πŸ™ Can I get some help?

  38. Just letting you know my experience.
    I tried 3 times with the 1st way of doing it and it was always creating a deformation in my posts, it was putting the posts inside the box of the 1st post.
    So I was unhappy.

    I tried the 2nd way, the “Alternative”, and I didn’t find that problem, it is perfect now! So I guess this one is the best option πŸ™‚

    Thanks a loooooot for your help!
    Nour

  39. Hi! I love all your tutorials, they’ve been so helpful! I just cannot seem to get this one! I’ve tried it a million times and the preview works fine, but the date has completely disappeared! I know you said that it has to go under the LAST post-header-line code, but I have look so long and hard and I can only find one!! I’m so so confused! Thanks! πŸ™‚

    1. Hello, thank you so much! Try using the search feature to look through your blog for the post-header first to see if your template has it (some custom templates may be different). You could also use the dropdown to find Blog1 and locate the post section there to find the part you need.

  40. I got the date correctly placed under the title, and the first post on the blog looks great, with no gap, but each subsequent post has a huge gap between the title and date. Why is it different?

    1. Hello Katherine, it’s due to the default spacing that has been set in Blogger templates, when we swap the positions we need to swap the spacing. Please check the “Remove the Gap between Post title & Date” section at the end of the tutorial for instructions on how to adjust this.

      1. Hi Elaine, I really appreciate you taking the time to check on this for me. I have inserted the h2.date-header { margin: .5em 0 1.5em; } to the CSS section, but the gap is still there on all but the first post. When I change the numbers, the first post just covers the post title, and the subsequent posts look fine. Now I have tried some of the edits that I have read in the comments (that sound like solutions to the same problem), and now I can’t see my dates at all on the live blog (they show up in the editor, but not on the live blog). I am afraid that I am hopeless to ever getting this figured out. If you could take a look again, I would be so grateful!

  41. Oh! Nevermind! I just fixed it with one of your suggestions from the comments above. You are awesome, and I love your site and cannot thank you enough for your tutorial and help. I really admire how you help all of us. I feel like my blog looks so much better with the help you have provided. Thank you so much!!!

  42. Hello, Ellie. I’ve read in the comments that someone had a similar problem to the one I’m having but there was no answer-solution as no more details were given or because of a different template (I use a Simple one, not Watermark). Anyway, the font size of my first post text is smaller in comparison with other posts and some post titles, labels, previous/next post and archive titles are in a different colour. What could I do to change this situation? Thank you so much for all your help.

    1. Hey, you have some nesting errors in your template regarding the post section (gadget – Blog1). The main problem is that there’s DIVs that should be wrapped around different sections that are sitting outside of them instead. May be best to reset the Blog1 gadget rather than trying to recode the section yourself. To do this go to Template > Edit HTML > Jump to Gadget > #Blog1 and change Blog1 to Blog2.

  43. haha hey me again :–D I was wondering if it’s possible to move the date NEXT to the post title? If it is how can I do this? πŸ™‚

    thanks in advance!

    1. Hello, yes of course! Following the same type of method as above, move the date code next to the post title code. Then use CSS to adjust the positioning correctly.

  44. Hi, I have a problem with this code on a test blog. After the changes, in the first post changed the size of the text and footer blog, do you know how to solve it? I tried to resolve with the previous comment, but it does not do anything.

  45. I was a bit confused as which part is being cut and moved but finally figured it out in the end. but I had the dates above the post titles which I had wanted. Since the date was above the post title but outside the post body, I had to move the codes. this was the tutorial that I needed. thank you!

    have a lovely day.

  46. Hi Elaine,
    I tried to customize my blog, but did something wrong I think. Once i add a post, my side bar goes down, right under the posts and no matter what I do, the line between posts snd side bar just dissapeared even if it is set as visible. What did I messed up?

    Thank you.
    Iveta

    1. The nested structure – the sidebar is now outside of the main-inner div. It could just be an extra closing div somewhere. If so, you could try resetting the blog widget. To do this go to Template > Edit HTML > Revert widget templates to default > select Blog1 > Revert selected widgets.

  47. Hello, I just tried this out and I found that when I completed all your steps, my date just disappeared rather than being below my title, is there a reason why this may have happened and do you know how I can fix it?

    1. Hello πŸ™‚ The alternative method should work for you, it involves less code. Double check that you are pasting it in the final position and copying and pasting it exactly as it is.

      1. Thank you very much, I actually managed the first one in the end, thank you! One small problem, I added a CSS code for my custom blog footer a while back and it seems that has interfered – in between my title and my date the footer now lies. I was wondering if there was any way you could help? I’m afraid I can’t remember where I got the code so I can’t search for it, is there any advice you can give me at all?

  48. Hello! I am new to blogging and have been making a few changes recently to my simple layout on Blogger based on other tutorials I have read… I have been desperately trying to move the date below my post title but every time I try the date just ends up disappearing. I tried both of your methods and have made sure (at least I thought!) I am copying the text under the last
    Hopefully you are able to help πŸ™‚

    1. Hi Kristen. If you want to try again using method 2, making sure you’re pasting it under the correct instance, I can take a look for you and see if there are any errors showing.

  49. Thanks for this tutorial!! Once I was finished, I realized that the date is now WAY to close to the blog post title. Do you know how I can fix that?

  50. Thanks so much for sharing this tutorial!

    I believe I’ve followed everything correctly however when I click ‘Preview’ to check it has worked I get this error message:

    The widget settings in widget with ID Blog1 aren’t valid. Invalid colour (e.g. “#FFCC99”)

    Error 500

    I haven’t had this come up with any other changes I’ve tried to make to the HTML. Do you know what I’m doing wrong?

    Thanks for any advice πŸ™‚

  51. Hello,
    I tried to follow your instructions but I have seen that the code you advice to move is bit different than my code. Because I tried without success I ask: should depend my theme or because your post il quite old and the code of blogger is changed? How I can fix the problem?

  52. Is there a way to move the blog post title above the featured image on blogger? Mine appears on the featured image on the post page and you can’t read it. Thanks.

Sorry, comments are closed!