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


  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;'>
    <b:if cond='data:post.isDateStart'>
     &lt;div class=&quot;date-outer&quot;&gt;
    <b:if cond='data:post.dateHeader'>
     <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    <b:if cond='data:post.isDateStart'>
     &lt;div class=&quot;date-posts&quot;&gt;
  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'/>





  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;'>
    <b:if cond='data:post.isDateStart'>
     &lt;div class=&quot;date-outer&quot;&gt;
    <b:if cond='data:post.dateHeader'>
     <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    <b:if cond='data:post.isDateStart'>
     &lt;div class=&quot;date-posts&quot;&gt;
  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>
  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=''>
     <a expr:href=''><data:post.title/></a>
     <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>
  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=''>
     <a expr:href=''><data:post.title/></a>
     <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:if cond='data:post.dateHeader'>
     <h2 class='date-header'><span><data:post.dateHeader/></span></h2>

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;}  { 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.

Post last updated:

190 responses to “How to move date below the post title in Blogger”

  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

    2. Tutorial for changing the date to be in a circle to the side of the post is now live

  2. I’m getting the same error message right at the end when everything is done and I click preview.

    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

      1. I’ll try it again and let you know! Thank you!!! 🙂

  3. 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. Hello. Make sure you’re putting it under the last post-header-line-1, otherwise it will disappear 🙂

  4. Hi,

    Thanks for the tourtial but when I first start and look for the fold marker I don’t see it…Please help!


    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 🙂

      1. Hi,

        I figured it out!! Thanks so much–love your tutorials!

  5. 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,

    1. No problem, glad you got it working. Would need to see it to know exactly, but it is probably the margin value under .post {

      1. Rebecca

        Thank you so much!

      2. Francoise Jeanne

        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. You need to edit the margin value under .post {, I’ve updated the tutorial to include more information x

          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?


          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.

  6. Julia

    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. <div class='post-header-line-1'/> may appear multiple times in your template. You have to paste the code under the last version of <div class='post-header-line-1'/> which will be further down in your HTML, use the numbering on the left to make sure! Let me know how this works. Here is a tutorial on the proper way to search using Bloggers new HTML editor –

      1. Julia

        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. Julia

            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 🙂

          2. Okay, please let me know how you get on. Would love to resolve this!

    2. 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.

  7. Laura

    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 { margin: .5em 0 1.5em; } or date-header { margin: .5em 0 1.5em; } instead of .post { margin: 0px; }.

      1. Laura

        Thanks! That change did the trick!

      2. 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 ***** to Blogger > Settings > Permissions I can take a look and resolve it for you 🙂 x

  8. Letícia

    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. Have a look at the last part of the tutorial, I explain why the gap appears and how to remove/reduce it 🙂

      1. Letícia

        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:

        Any thoughts?

        Thank you SO MUCH for your help!

        1. Letícia

          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. Letícia

            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: ?

            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. Letícia

            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!

  9. Andreea

    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. Thank you so much for your nice comment Andreea 🙂

  10. Hello! I’ve tried this tutorial and yes it worked well. Thank you!

    BUT, the gap between the post title and the date header of all my posts became weird. I’ve tried the codes above to adjust the gap, all of them didn’t work for me. I’m using Simple template. Here is my tester page: Can you please take a look and help me to find the solution?

    Thank you so much in advance!

    1. Hello lovely, sorry about the delay. Could you invite ***** 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.

  11. emily

    You rock! I have literally been trying to do this for years. This worked perfectly!

    1. Awh great! Happy to help 🙂

  12. 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 ***** to Settings > Permissions, I can take a closer look and clean up the code a little bit for you.

          5. Thank you so much! Yeah I’ve been picking bits of code from everywhere so no idea what’s going on with it 🙂

  13. Hi!

    I have tried this many times and it works when I preview. But when I save changes, nothing has changed. What I do wrong? 🙁

    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.

  14. laura

    when i try to look for the piece of code for the date and the one for the blog title, i cant find it!

    1. It’s definitely there, check out the following posts on finding code in the HTML editor.

      How to find code in Bloggers new HTML editor
      Understanding CSS in Blogger
      Bloggers Updated HTML Editor

  15. Lubna

    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:

    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

  16. 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.

  17. forbloggerku

    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.

  18. 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. Thank you! Going to give it a go later! 🙂

  19. You’ve been the first to help me fix this! Thank you for the time and effort you put into making this tutorial!

    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.

  20. 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.

  21. 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!

    1. Hello Lisa. I don’t see a gap, have you since fixed it? x

  22. 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 🙂

        1. lol thank you 🙂 happy to help x

  23. 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

  24. Hi, thank you for this useful tutorial. I tried to remove the distance between the title & date, but it just doesn’t work for me…

    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 ,, date-header and .post-header. You could also check the padding under .main-inner .widget span.

  25. 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

    1. Hello, I have a tutorial for re-arranging information in your post header and post footer section that should help with this 🙂 x

  26. Christina

    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…

    1. Hey Christina, what’s the URL so I can take a look at the code?

  27. 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!

          1. Oh you got it! Perfect 🙂 must of been something conflicting or broken in your template then, glad you got it sorted.

        2. Invite **** to your permissions in settings and I’ll take a look for you lovely 🙂

  28. 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('') 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.

  29. 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 🙂

  30. Ann

    Thank you so much for this tutorial. It worked for me! 🙂

  31. Ashley

    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?


    1. Hello lovely. It seems to be working now, did you get it sorted?

  32. 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. Hello! Find .post in Template > Edit HTML and change margin: 0 0 25px 0; to margin: 0px;.

      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. It’s definitely showing in your source code, looks like it’s above, .comments h4 in your CSS.

          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, .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. Putting it above worked! Thank you so much for your help and for being so patient with me! x

          4. 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 🙂

  33. 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!


    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.

  34. Sara

    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. Sara

        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. All fixed 🙂 awh it’s no problem. Hope you managed to have a good Valentines day in the end?

          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.

          2. Yes it’s just like me logging in as them but without them having to give me login details 🙂

  35. Sara

    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

  36. 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 in your template.

  37. 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!

    1. Awh thank you very much! 🙂 Really glad you found the tutorial easy to follow!

  38. Vanessa

    I tried other tutorial and it went wrong. I’m glad to find this tutorial, its easy to understand 🙂 Thank you!

  39. What if I only have two of post-header-line-1?

    1. There is usually two versions in most templates 🙂 put the code under the second one.

  40. So so so helpful!!! Thank you so much.

  41. 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!

    1. Hello! Yeah the two versions is so confusing when trying to edit, glad you got it working. Thank you so much! 🙂

  42. 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.

    1. Seems to be okay now? Did you get this fixed? 🙂

  43. 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!


    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

  44. 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

  45. 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.

    1. Hello, find .date-header span in Template > Edit HTML and remove padding: 0.4em;

      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..

  46. Dear ellie,

    after i’ve done this my date just dissapeared. How can i fix this?
    Could you please help me?

    this is my webpage,

    1. Make sure you’ve moving the correct one and to the right place, under the last instance (you may have multiples).

  47. Umm, I can’t find the code :
    I’m designing her blog 🙂

    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.

  48. OK, so this <div class='post-header-line-1'/>

    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.

  49. 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 🙂

  50. 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 😀


    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

  51. Thanks for posting this tutorial! It was really clear and helpful.

  52. 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?

    1. Hey, are you adding the CSS to Template > Customise > Advanced > Add CSS?

  53. 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!

    1. Hello Nour, thank you for your feedback. Neither method is better, it depends a lot on your template and other code that is used on your site.

  54. Thank you! The second method really worked 🙂 Have a great week

  55. 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.

  56. 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 { 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!

  57. 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!!!

    1. Hello Katherine, thank you so much for the lovely comment. So glad you got it fixed 🙂 your blog looks great!

  58. Sol

    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 Sol, what’s your blog link? I know you sent me an invite before but no longer have the email to check it.

  59. Oh, I’ve indicated my blog link in this form and my e-mail is ******. Thank you, Ellie.

    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.

  60. Thank you so much! :))

  61. 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.

  62. 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.

    1. Hello, what template are you using? What is the URL of the test blog?

  63. 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.

  64. 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.

    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.

  65. You made it very simple with easy to follow steps. But can you please tell me why it does not move when we rearrange items in layout section?

    1. Seems to be an annoying bug, I have a post on how to manually rearrange them here.

  66. 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?

        1. Have a look for .post in your CSS, I believe that’s where it is 🙂

          1. Oh my gosh thank you so much, I found it and it’s fixed thank you so much!!!!!!!!

  67. 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.

      1. Thank you so much for responding! I was able to get it to work!! 🙂

  68. Anika Joy

    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?

    1. At the bottom of the post there’s a mini-tutorial for fixing the spacing 🙂 let me know if that helps!

      1. Anika

        I tried all of them, but none are working for me.

        1. Are you using a third-party theme? What is your URL? I will take a look for you 🙂

          1. Anika Joy

            Thanks, Elaine! I tried it again and now there is more space between the date and title, but there is now no space between the date and the body text of the post. The URL is:
            Thanks so much!! 😀

          2. Use the in step 2 under the fix styling section 🙂

  69. Anika Joy

    Thanks so much!! It’s working, now. 😀

  70. 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 🙂

  71. 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?

  72. Thanks. Was looking for that since.

  73. 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.

    1. Hey Hayley, it will depend on the theme you’re using but you can use the same method above to move it above the featured image

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.