How to create a circular date header for Blogger posts

How to create a circular date header for Blogger postsTodays post will show you how to create a circular date header for blogger posts such as the one in the image below. This can be a really cool addition to your blog and something that can be customised to suit your layout and design. As this post was highly requested and codes vary depending on templates, scripts etc I’ve included two methods below on how to achieve this. Take your time and make sure to follow each step correctly, missing the tiniest detail will leave you with a circle background and no date. If this happens, double check everything or restart the tutorial from step 1. If you are still having problems, leave me a comment below.

circular-date-header-for-blogger-posts

[postwarning]

Circular Date Header for Blog Posts

    1. Settings > Language and Format > Date Header Format > Change to 00 Month 0000. Important otherwise it won’t work.

create a circular date header for blogger posts

    1. Layout > Blog Post Gadget > Edit > Post Page Options > first option Date > Change to 00 Month 0000. Important otherwise it won’t work.

create a circular date header for blogger posts

  1. Template > Format Template and find the following code
    <h2 class='date-header'>
     <span>
    <data:post.dateHeader/>
    </span>
    </h2>

    Replace it with the following code. If you find the above code twice, replace both of them.

    <div id='Date'> 
    <script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script> 
    </div> 
    <b:else/> 
    <div id='Date'> 
    <script>changeDate(&#39;&#39;);</script> 
    </div>
  2. Now find </head> and paste the following above it
        <script type='text/javascript'>
          //<![CDATA[ 
          var DateCalendar; 
          function changeDate(d){ 
            if (d == "") { 
              d = DateCalendar; 
            } 
            var da = d.split(' '); 
            day = "<strong class='date_day'>"+da[0]+"</strong>"; 
            month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>"; 
            year = "<strong class='date_year'>"+da[2]+"</strong>"; 
            document.write(month+day+year); 
            DateCalendar = d; 
          } 
          //]]> 
        </script>
  3. Again, paste the following above </head> underneath the script you just added
    
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <style type='text/css'>
            /* Calendar style date */ 
            #Date { 
              position:absolute; 
              background: #ffffff; /* CHANGE BACKGROUND COLOUR - use #HEXVALUE or url("DIRECT-IMAGE-URL")*/
              display: block; 
              width:60px; /* CHANGE WIDTH */
              height:60px; /* CHANGE HEIGHT */
              float: left; /* CHANGE POSITION OF DATE - left none right */
              margin: 0px 2px 0 -60px; /* CHANGE POSITION OF DATE */
              padding: 0px; 
              border: 0; 
              text-transform: uppercase; /* CHANGE TEXT STYLE - lowercase uppercase */
              -webkit-border-radius: 100px; /* CHANGE RADIUS OF CIRCLE */
              -moz-border-radius: 100px; /* CHANGE RADIUS OF CIRCLE */
              border-radius: 100px; /* CHANGE RADIUS OF CIRCLE */
              box-shadow: 2px 1px 7px rgb(102, 102, 102); /* CHANGE SHADOW */
            } 
            .date_day { 
              display: block; 
              color:#333333; /* CHANGE DATE COLOUR*/
    font-size: 24px; /* CHANGE FONT SIZE OF DAY */
              font-weight:normal; /* CHANGE TEXT STYLE - bold normal light */ 
              margin-top:-5px; 
              text-align:center; 
              
            } 
            .date_month { 
              display: block; 
              font-size: 15px; /* CHANGE FONT SIZE OF MONTH */
              font-weight:normal; /* CHANGE TEXT STYLE - bold normal light */
             color:#ccc; /* CHANGE MONTH COLOUR */ 
              margin-top:4px; 
              text-align:center; 
            } 
            .date_year { 
              display: block; 
              color:#333333; /* CHANGE YEAR COLOUR */ 
              font-size: 10px; /* CHANGE FONT SIZE OF YEAR */ 
              margin-top:-8px; 
              text-align:center; 
              
            } 
          </style>
        </b:if>
  4. Experiment with the CSS and change the style to suit your own blog.

Alternative – Circular Date Header for Blog Posts

    1. Settings > Language and Format > Date Header Format > Change to 00 Month 0000. Important otherwise it won’t work.

create a circular date header for blogger posts

    1. Layout > Blog Post Gadget > Edit > Post Page Options > first option is the Date > Change to 00 Month 0000. Important otherwise it won’t work.

create a circular date header for blogger posts

  1. Template > Format Template and find the following code
    <h2 class='date-header'>
     <span>
    <data:post.dateHeader/>
    </span>
    </h2>

    Replace it with the following code. If you find the above code twice, replace both of them.

    <span class='date-header'><div id='date'> <script> 
    replace_date(&#39;<data:post.dateHeader/>&#39;); 
    </script> </div></span>
  2. Find </head> in Template > Edit HTML. Under it, paste one of the following. This one if you want the format month/day/year
    <script> function replace_date(d) { var da = d.split(' '); month = "<div class='month'>"+da[1].slice(0,3)+"</div>"; day = "<div class='day'>"+da[0]+"</div>"; year = "<div class='year'>"+da[2]+"</div>"; document.write(month+day+year); } </script>

    or this if you want day/month/year

    <script> function replace_date(d) { var da = d.split(' '); day = "<div class='day'>"+da[0]+"</div>"; month = "<div class='month'>"+da[1].slice(0,3)+"</div>";  year = "<div class='year'>"+da[2]+"</div>"; document.write(day+month+year); } </script>
  3. Now we need to style the date, to do this add the following code to Template > Customise > Advanced > Add CSS (anything added here will be placed above ]]> </b:skin> in your template)
    /* Date Style */
    span.date-header {
    color: #eeeeee; /* CHANGE DATE COLOUR*/
    margin-left: -80px; /* CHANGE POSITION */
    width: 40px; /* CHANGE WIDTH */
    height: 40px; /* CHANGE HEIGHT */
    padding: 10px; /* CHANGE PADDING SPACE */ 
    word-wrap: break-word;
    float: left;
    -webkit-border-radius: 50px; /* CHANGE RADIUS OF CIRCLE */
    -moz-border-radius: 50px; /* CHANGE RADIUS OF CIRCLE */
    -o-border-radius: 50px; /* CHANGE RADIUS OF CIRCLE */
    border-radius: 50px; /* CHANGE RADIUS OF CIRCLE */
    font-family: 'arvo'; /* CHANGE FONT */ 
    text-align: center; 
    background-color: #333; /* CHANGE BACKGROUND COLOUR */
    font-size: 10px; /* CHANGE FONT SIZE */
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); /* CHANGE SHADOW */
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); /* CHANGE SHADOW */
    border: solid 3px #ffffff; /* CHANGE BORDER STYLE, WIDTH AND COLOUR */ 
    }
    #date { 
    display:block; 
    line-height:1.3em;  
    text-align:center; 
    }
    
    .day { 
    font-size:20px; /* CHANGE FONT SIZE OF DAY */
    padding-bottom:1px; /* CHANGE SPACE UNDERNEATH */
    text-shadow: 0px 0px 2px #666666; /* CHANGE TEXT SHADOW */
    padding-top: 1px; /* CHANGE SPACE ON TOP */ 
    letter-spacing:0px; 
    text-align: center !important; 
    }
    
    .month {
    padding-top:0px;  
    letter-spacing:3px; /* CHANGE SPACE BETWEEN LETTERS */
    color: #FFFFFF; /* CHANGE FONT COLOUR*/ 
    }
    
    .year {
    padding-top:0px;  
    letter-spacing:2px; /* CHANGE SPACE BETWEEN LETTERS*/
    padding-bottom: 5px; /* CHANGE SPACE UNDERNEATH */
    color: #FFFFFF; /* CHANGE FONT COLOUR */ 
    }
    
  4. Experiment with the CSS and change the style to suit your own blog. Have a look at my next post about styling the date header to look like a calendar or banner

So that’s how you create a circular date header for blogger posts, let me know below if you have any questions. Please keep in mind that codes vary template to template. If you are having trouble finding the CSS Section, take a look at this post which explains Bloggers Update.

Related Posts:
Move Date Header Beneath Post Title in Blogger
Beginners Guide to Blogger.com
Styling the date header – calendar or banner

Post last updated:

138 responses to “How to create a circular date header for Blogger posts”

  1. Aahhh! Love this! Thank you! Just tried it on my test blog and it worked perfectly! Going to tweak it some and put it up on the real blog asap!!

    1. Hi Sheena, how was your vacation? So glad you liked this tutorial. On Wednesday I’ll be showing how to change the style to make it look like a calendar or a banner ๐Ÿ™‚ xx

      1. Oh awesome! I’m trying out the circle as we speak but I’m excited to see the other variations!
        Vacation was great! We went to Florida to see my sis and took the girls to Disney World! I’ve been trying to get back in the swing of things ever since though and it seems I left all my motivation there! ๐Ÿ™‚
        And to answer the other question in the email I have yet to respond to (sorry!), we stayed at a hostel in Dublin…not sure where exactly but it was the first time I shared a room with a guy! I was with my best girl friend and we didn’t know it was a “co-ed” hostel until he and his friend walked in! So awkward! Dublin was awesome though! ๐Ÿ™‚

        1. Oh lovely, I’ve never been to the US but have wanted to since I was little. We have family over there and Florida is definitely somewhere I’d like to visit. So jealous! Awh yeah I was like that too after my holiday, it will come back soon ๐Ÿ™‚ hahah oh no!! That must of been so awkward. Glad you enjoyed yourself here, I can’t wait to leave to be honest haha always the way though isn’t it x

  2. Thanks for the tutorial!! I’m trying right in my blog and works nice!

    1. Looks great! Goes really well with your theme ๐Ÿ™‚

  3. Ruben

    Hi, thanks for your tutorial its trully lovelly and great. But i have a problem in my blogg the circular date header just appears on my last post, but on the others doesnยดt appears… Can you help me?? Please..

    1. What is your URL so I can take a look? If multiple posts are published on the same day, the date will only show on the latest. This is a default setting by Blogger.

      1. Is there any way to change it? To make the date appear in all posts in the homepage?

        1. The date appears on all posts except if you’ve published multiple posts in one day, then it only shows on the newest ๐Ÿ™‚

  4. Hi Ellie!
    Thanks so much for this tutorial! I’m using it for the redesign of my blog.
    However, do you think this will cause some problems to the formatting of the sidebar titles? I tried this on my test blog, but when I entered in the script, the dates on my blog looked perfect, but suddenly the formatting of my sidebar titles vanished. It just became plain text, following the font of my main text font, and I can’t seem to find anything wrong with the code I’m using. I’m not very familiar with this script, so I was wondering if you could help me?
    Thanks a bunch!

    1. It shouldn’t because we change the code in step 1, I’ve tested it on many blogs and haven’t had any trouble. I’d love to take a look at your test blog if it’s still installed in it?

  5. Tried to do this on my blog (though I was going to use a custom URL photo) and I couldn’t get it to work. I even tried just the calendar and circle (without using my own URL) and the only thing that would show was a white box, no date or anything else. So strange! Loved it and would love to use it!

    1. Make sure the date is set and turned on in settings > language & format and in layout > edit blog post. The format needs to be XX/Month/XXXX. Also, make sure that the script is in the correct position, it will depend on what method you are using. Do the entire tutorial first, then go back and add in the DIRECT URL of the image to background. There’s a short tutorial for using your own URL here – http://xomisse.com/blog/create-calendar-or-banner-style-date-header-blogger-posts/. Let me know how you get on.

  6. Hi!! First off thanks for this tutorial!!…but I’m having problems with the date showing up!! I customized my circles everything went smooth…just not seeing the date!

    1. Hello Ann. Make sure the date is set in settings > language & format and in layout > edit blog post. Also, make sure that the script is in the correct position. Let me know if this works for you x

  7. I figured it out!! One last question… how do I remove the comma after the day??

    1. Go into settings > language & format and then also into layout > edit blog post. Change the format of the date there. At the moment it must be set to have the comma.

    2. Stacey

      Hi Ann,
      How did you figure out how to get the date to show up? All I see is a white circle too, no date. All my coding is in the right place. I am just using a fake blog with nothing on it so I don’t ruin my actually blog, but you can see how there is nothing there now:
      http://celisetia.blogspot.com/
      Thanks!

      1. Hello Stacy, please make sure the date is set and turned on in both areas – settings > language & format and in layout > edit blog post. Double check that you have placed the script in the right place for that method and that in step 3 the date code is replaced for both sets of code. If you are still having problems, I’ll be happy to look at it for you.

        1. Stacey

          I don’t know why, but my blog doesn’t give me a DD/MM/YYYY option, only a MM/DD/YYYY option and it wasn’t working. I played around with the coding for a couple hours and managed to get it looking great! Check it out! http://www.tiacelise.com

          Thanks again for all your help on this, your blog is VERY helpful. I appreciate the quick response too!

          1. Hi Stacey,

            I am having the same problem. I do not have the DD/MM/YYYY option either. How did you fix this problem??? All I keep seeing is people saying they fixed it with no answer to how. Could you please post how you fixed the problem? All my coding is correct, so now what?

            Thank you for your help!!

          2. Hello Kristin, the tutorial says to use the format “00/Month/0000”, it’s the first two options available in both Settings > Language and Formatting > Date Header Format and Layout > Blog Posts > Post Page Options > Date.

  8. WOW! Thank you for sharing this tutorial. I always wonder how to do that when I see a blog with date header like that . Can’t wait to try!

    1. Let me know how you get on ๐Ÿ™‚

  9. Laura Jarvis

    Hi Ellie, I’ve tried to do this but it just appears as a white circle at the side with a shadow. No writing? How can I get the writing to show?

    Laura

    1. Make sure both settings have the correct date, also double check that the script is in the correct place depending on what method you are using and make sure that the entire script has been pasted correctly. Let me know how you get on xx

  10. Wanda

    I’m trying this out on a test blog and for some reason I can’t get the date text to display. The circle shows but not the date text itself. Any ideas?

    1. The Date Format needs to be properly set in both Settings. Also, make sure the script is in the right place depending on what method you are using, this is what makes the date show. If you are still having problems, let me know the link and I will check the code for you.

  11. This is my first time trying ANYTHING. I love it. Thank you so much.. but how do I change the color, mine just shows up white. I didn’t see a color option but that could be the css thing.. and I have NO idea what that is ๐Ÿ™‚ Can’t wait to check out the rest of your tutorials!

    1. If using method one look for #Date { background: #ffffff; /* CHANGE BACKGROUND COLOUR - use #HEXVALUE or url("DIRECT-IMAGE-URL")*/ or if using method two span.date-header { background-color: #333; /* CHANGE BACKGROUND COLOUR */ } . Both of which we added in the CSS ๐Ÿ™‚ x

  12. I have tried to get the date and post title centered using css and i cant get it to go anywhere. Is there something that i need to change in html. The circle is hanging onto the border. Any advice would helpful. Thank you so much for the tutorial.

    1. To centre the post title add .post-title.entry-title {text-align: center; } above ]] </b:skin> in Template > Edit HTML. To move the circle date to the centre of the post, change the position value to position: relative;, float value to float: none; and margin value to margin: 0px auto;. There is no border, just a border radius which makes the circle, do you mean the shadow? You can remove it by remove box-shadow from your CSS.

  13. Sarah

    Such a great post! I have been looking for easy ways to customize my new blog and loved this idea! Tried it out and cant it didnt quite work ๐Ÿ™ No date and looks as thought the placement is off. What did i do wrong?

    1. Make sure the script has been copied over properly and that it is in the right place ๐Ÿ™‚ let me know how you get on

  14. Alysse

    Hi I am unable to get this to work on my layout. It doesn’t do anything at all to the date. There are no changes.

    1. Hello, I need some details to be able to help. What is your URL? What template are you using? What other changes have you made previous? It’s been tested on all Blogger Templates but may be conflicting with other code you may of added.

  15. Sheila

    Ok, I have no clue what I did wrong because I thought I copied the steps in order and placed them in the correct places, but it seems that in doing so, my dates are completely gone and there is nothing there as far as circles. Is there any way you could help me, I have been looking for the ability to this for so long, I’m happy to have found it, now if i could just get it to work!!

    1. Hey Sheila, if you want to add *****@gmail.com to Settings > Permissions, I can take a look and instal it for you x

      1. Sheila

        I added you. Hopefully, you can figure it out for me.

        1. I’ve accepted. Can you go back into Settings > Permissions and change “author” to “admin” beside my name. This will give me access to your template.

        2. Sheila

          ok you’re admin ๐Ÿ™‚

          1. All done ๐Ÿ™‚ looks like you were mixing the two methods which is why it didn’t work. I also fixed the error in your template so it’s no longer broken code.

          2. Sheila

            Thank you so much Ellie!! You’re awesome!

          3. No problem, gorgeous design bdw!

  16. Hi Ellie,

    I love love love this tutorial, customized it on my blog, everything was great yesterday. I changed the bottom of my posts to show what day they were posted as well, but the circular date did not change and didn’t show up on the bottom post.

    The only modification I made was with the position because it was too far to the right and cut into my blog post title. Would appreciate your help on this if you can.

    Thanks so much!

    1. Hello lovely, sorry I’m not quite sure what you mean? The circular date is set to only show in the post header not the post footer.

      1. I have two posts on my blog, both were posted on different days, and the circular date didn’t show on the first and on the first post, the date is wrong.

        1. Ahh I see now, sorry. The problem seems to only be on your home page so something must not be configured properly. If you want to add *****@gmail.com to Settings > Basic > Permissions, I can take a look for you.

          1. Thanks, I appreciate it a bunch. I’ve added you in the permissions.

          2. No problem. I’ve emailed you ๐Ÿ™‚

  17. Hi!
    I’m trying to change my date header but the date won’t appear in the date header. I don’t know what’s wrong since I did exactly what you wrote in the tutorial…
    Would appreciate if you could help me ๐Ÿ™

    1. Hello. What method are you using? Make sure you have the date set in Setting > Language and Format. Check that the code for the new date is replaced properly and the script is correct and in the right place. These can all cause the date to disappear.

  18. Alex

    My blog doesnโ€™t give me a DD/MM/YYYY option?! Can you help?

    1. 00/Month/0000 should definitely be there. You may have to scroll down the menu to see it.

  19. Please Help! I have tried to install this code every way possible, by changing the language from us english to uk english, i’ve tried format 1 and two numerous times. i have also changed the date on both the widget and settings and all i’ve been able to get is circles. Please, if there’s anything at all you might be able to suggest, i really like how the circle header compliments everyone else’s sight… i just haven’t been able to get it to work on mine.

    Thanks,

    desperately trying to install code =(

    1. Hello, you don’t currently have any of the code installed so I can’t check for problems. Make sure to click format template before starting, that you are only replacing the code stated and ensure that the script is in the right place. If you are still having problems, submit the problem here and I can instal it for you.

      1. Sorry about that. I have tried submitting the code both ways, and i cannot get the date to show up for the life of me. the circle shows up, on both options, just no date… i’ve changed the date format to the what’s depicted above. I’ve checked the placement over 30 times, I really don’t know what I’m doing wrong,

        Help!

        1. Hello Nina, add ****@gmail.com to your Blogger permissions under Settings and I’ll double check everything for you ๐Ÿ™‚

          1. could you? omg, that would be fantastic! done!

          2. Hello, can you please go back to settings and beside my name change permissions from author to admin. This gives me access to your template ๐Ÿ™‚

          3. sure thing! =)

          4. All fixed ๐Ÿ™‚

  20. I am having a hard time finding the code that I am supposed to replace. Can you help me?

    1. Check out this post which explains the steps to finding code in Bloggers HTML editor, let me know how you get on.

      1. Thank you for the earlier post! I got the date to be a circle but it is just white and it is hugging the post title. http://something-simply-sweet.blogspot.com/

        1. Hello, make sure the settings are correct, that the script is placed in the right section and that the right code is being replaced in the correct places (sometimes there’s more than one). If any of these are mis-configured, the date won’t show. If you’re still having trouble add ****@gmail.com to your blog permissions under settings and I can take a look for you.

  21. Thank you so much! =)

  22. Sorry to comment again, but is it possible to have this circle date on the right side of the title of the blog post?

    1. Hello, yes change float: left; to float: right;

  23. Thanks for the great tutorial!!! The coding worked but I wanted to know what to change if I wanted the circle centered above my blog title? I don’t think it looks good floating to the left on my site. Thanks.

    1. If using the first method, find #Date and change position:absolute; to position:relative;, float: left; to float: none; and margin: 0px 2px 0 -60px; to margin: 0px auto;.

      1. Thanks so much…. worked great.

  24. Hi, I can’t seem to find the code needed to be replaced….. I’ve tried searching for it but no such luck ): x

    1. Hello Clarissa, it definitely should be there. Take a look at this post on how to find code in Bloggers new HTML editor

  25. brinkley

    I’ve searched for the code and couldn’t find it I even searched using cntrl f and it said 0 out of 0. What should I do?

    1. Have you tried just searching for date-header? Sometimes the search box can’t pick up the entire code. Oh and make sure you click into the HTML editor box before searching.

      1. brinkley

        I did that this time and still no luck ๐Ÿ™ but i have changed my date header before should i go back to the orignal settings and try this way?

        1. No you shouldn’t need to. Just checked your template and it’s definitely there. Should be between lines 700-800 or 900-1000 depending on how formatted your template is. When you go to template > edit HTML and click into the HTML editor, click ctrl f and enter date-header into the search bar and click enter, you’ll have to hit enter a few times to get to it.

  26. Hello, your first code worked perfectly, but I’d like to have the date bubble on the right side. Could you please tell me what I have to change for that? ๐Ÿ™‚

    1. Hello, change the float and margin values under #date to change the position onto the right ๐Ÿ™‚

  27. I’ve just made a circular date header and I LOVE it. Thank you!

  28. dineshvasan

    i add ur circular date header but showing only white circle not showing date see it help me
    this my blog http://jobinfostreet.blogspot.in/

    1. Hello, make sure your settings are correct (step 1 + 2), that you’ve replaced both codes and that the script is in the right place. Having these 2 parts wrong will hide the date ๐Ÿ™‚

  29. Chicstylebysage

    This tutorial is awesome, thank you so much! Is there any way to change the font within the date header? Thank you for your help, I look forward to seeing more tutorials from you!

    xx,

    Sage

    1. Hello. Thank you! Yes, add font-family: FONTNAME; in between the brackets of .date_year, .date_month and/or .date_day in the CSS depending on what part you want to change. Change FONTNAME to the font you want ๐Ÿ™‚

  30. I have no idea why but all I can ever get is the circle, but no date inside it. ๐Ÿ™

    1. It could be the settings in step 1 and 2, double check them. Also make sure you’re pasting everything in exactly the right place. If you’re still struggling you can add ****@gmail.com and I’ll have a look for you ๐Ÿ™‚

      1. I sent you an invite for permission on the blog, Ellie. I hope that you can help! I have no idea what’s not working right. I double checked the date formats and even tried all possible formats that were similar. Thanks for your help, your tutorials, and your codes. <3

  31. Thank you Ellie, I like this date style. ๐Ÿ™‚

  32. Works great thanks! Is there anyway to get the CSS to make a heart shape or square instead of circle?

    1. In this post I show how to make it look like a calendar (square) and a banner, you can manipulate the CSS code from there to alter your current one ๐Ÿ™‚ x

  33. It works bad :/ It not displayed me date .. just a circular date header but without date .. Can you help me ?

    1. Hello, please double check your settings and that everything has been replaced properly. Also check that the script is in the right place and has been fully copied and pasted into your code.

  34. Olivia Hou

    Just like the people above me, I’ve tried this code but it only shows a blank circle. I’m pretty sure I pasted the right code, but it’s still blank. Do you know how to fix this problem?

    1. Double check your settings in stop 1 & 2, make sure you’ve pasted the entire script and replaced more than one instance of the code.

      1. Olivia Hou

        Okay, thank you! ๐Ÿ˜› Wow that seemed like a silly mistake. I also want to make the date header square instead of circle. when you said to alter the current CSS, what should I change?

        1. The border-radius values, that’s what makes it a circular shape.

  35. Hi! This is very helpful! The only thing is, is that I can’t find out how to change the date to 00/Month/0000 in both the layout and in the settings. It doesn’t even bring it up as a choice… Please help!

    1. Go to Settings > Language and Format, then under Formatting you’ll see Date Header Format and if you click the box beside it you can scroll up and down to choose the date. Then go to Layout and you’ll see Blog Posts, click Edit and it’s the first option under Post Page Options. The option is usually down the end in each menu ๐Ÿ™‚

      1. Ummm it still isn’t there. It doesn’t have the 00 Month 00 as an option. :/

        1. If you want to add ****@gmail.com, I’ll change it for you ๐Ÿ™‚

  36. Hey! This worked really beautifully, had a few troubles but then it all worked out.
    I found that when I copied and pasted the under coding directly from the webpage it got messed up and didn’t work (it didn’t show the date), but when it was copied and pasted to notepad and then copied and pasted from there to my blogger html it worked fine. Hope this helps anyone who’s having this problem!

    Looks great on my blog, love it so much – thankyou!!! <3

  37. Hey! I love this! But I’m having a little problem since the date only shows up in the first entry. I tried this in a secondary blog (link here). I hope you can help me because I’m going crazy…

    1. If multiple posts are published in one day, Blogger by default only shows the date once. So if you publish more than one post, the date will only appear in the latest post.

  38. Hello there! I used this tutorial and it works awesome! I am trying to change the font and color but when I tried to do that, it made the circle blank .. so I am assuming I did something that was no bueno. This is the first thing I have tried to do with my blog and I am trying to make it all nice, pretty and professional.

    Any help would be wonderful! Thank you for this tutorial! I love it!

    1. Hello! Wow that was a difficult one to start with – well done you ๐Ÿ™‚ find the code you added in step 5 and just change the value for color… so just change the numbers. You can find a list of color numbers (hex values) here. As for font, this tutorial may help.

  39. Love this! Thanks for this tutorial! My blog looks so much better now!

  40. Hi Ellie,

    I really appreciate this (and all) of your tutorials! I’m playing around with a test blog and trying out different styles and I love the circular date! I was wondering if I could adjust the positioning so the circle isn’t hanging off the left-hand edge of my blog. I tried adjusting the margins, and the circle moves where I want it to, but the post title doesn’t. The circle ends up on top of the post title.

    Do you know if there’s a way to slightly shift all of my posts just slightly? I don’t want it aligned completely to the center–just need it to move a few pixels to the right

    Thank you!!

    1. Hello, thank you. Yeah you can add #main { margin-left: 10px; } to your CSS but be careful of your sidebar.

  41. Hi! I just found your blog while looking for some tips for CSS/html design change on my blog. I am trying to understand how all this is working but I don’t understand why you have to add the script to change the date design ? Can’t we just change its format in blogger settings and then add a circle background image to get a similar result ? I am not critisising your method, I am just a beginner trying to understand ๐Ÿ™‚

    1. Hello, the date on Blogger is typically above the post title and is set to be shown in one line horizontally no matter what you change the format to in Blogger settings. The script changes this to have the format vertical instead of horizontal so that it will fit in a circle and be positioned off to the side without messing up other post code.

  42. Thanks for this, do you have any idea how to make a triangle rather than a circle?

    1. Hello, follow the “Banner Style” part of this tutorial but replace the CSS on span.date-header with margin-left: -85px; /* CHANGE POSITION */ width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 50px solid black; word-wrap: break-word; float: left; font-family: 'arvo'; /* CHANGE FONT */ text-align: center; font-size: 10px; /* CHANGE FONT SIZE */

  43. Hi, I really love your tutorial and just applied it to my blog. But I’m having some positioning trouble which causes it to crash with my post title. Is there any way I can make it to be more on the left? Another question, how could you make that white border around the black date header? I’ll be waiting for your reply, thanks ๐Ÿ™‚

    1. Hello, can’t get onto your blog to give you specific details and you didn’t mention which method you used but you can adjust the position bu changing the value of the margin beside the comments /* CHANGE POSITION DATE */ in the CSS. Change the border colour values for the border colour and thickness.

      1. ah, sorry! I made it private. It’s now open for some particular time. As you can see there, the circle is crashing with my post title which is really unpleasant to see. By the way, I used the first method (not the alternative one). I tried to give it a border but I persist in failing. Can you please teach how more precisely? Thank you.

        1. Go to template > edit html and find #Date. Change margin value from -60 to -80

  44. Thanks for the great tutorial, Ellie! Even though I know nothing about HTML, your instructions guided me through everything and it’s pretty cool learning by doing ๐Ÿ™‚
    I’m trying to make a blog a little more interesting so I just put the circular date headers and everything went pretty smoothly. Something I did notice (I’m not sure if someone else has already pointed this out) is that on Blogger, there is no option of 00/Month/0000. When I tried using the thing closest to that, MM/DD/YYYY, the circles came up blank. I think what confused me (and other people) is the inclusion of the back slashes. Getting the date to show up meant using the DD Month YYYY option. That was a little unclear to me when I read your instructions at first so you may want to put a note there so other people don’t make the same error!

    With the circular date headers, I noticed that the circle somewhat obscures things in my sidebar. I’m going to try playing around with the HTML to see if I can fix that, but I was wondering if you could tell me how to minimize the space between the left edge of my blog and the left edge of my sidebar. That huge white space just looks so excessive and I think it really detracts from my blog overall. Any help you could give me would be greatly appreciated!
    Also, I’m not sure if this has already been suggested as a post idea but I’d love to know how to set things up so people receive emails when their comments receive replies.

    Once again, thanks so much! Your tutorials are life-savers for tech illiterate people like me!!

  45. Thanks for the tutorial! It works perfectly on my blog. Been looking for the date header customization, and now my blog has customized ๐Ÿ˜€

  46. Hi Ellie,

    I too am having a hard time getting the date to show. I have just a bubble so far. It seems that I’ve done everything right and the date is in the right format of 00/MONTH/0000. Could you help?

    Thanks!

    1. Hello, I can’t do much without having access to your template. My advice would be to restart the tutorial again, sometimes the smallest error throws the whole thing off. If you want I can install it for you, just get in touch via the contact page.

  47. Hi Ellie! I was going to change back from this circular date header to the regular but when i did it just disappeared and now I can’t get my date header back. I’m wondering if you could help me?

    Thank you, best regards, Andrea x

    1. Hello Andrea. You’ll need to add the code you replaced in step 3 back into your template and remove the code you replaced it with. You should aoso remove the script and CSS. If the date isn’t showing up and you’ve done these things, it’s likely that you’ve added it back in the wrong place so double check that. I hope that helps!

  48. Hi! I tried this on one of my test blogs, and I was wondering if I could make the circle smaller? When I tried to change the radius of the circle, it wouldn’t work. Otherwise, this worked super well! Thanks so much! ๐Ÿ˜€

    1. Hello, the border radius value defines how rounded the border is. To adjust the size of the background you’ll need to change the width and height value.

      1. Thank you so much! ๐Ÿ˜€

  49. How could I change the font of the date and month using the first method? And is there any way to remove the year?

    1. Hello, remove year from document.write(month+day+year); and add font-family: fontnamehere ; to .date_month and .date_day to adjust font. Make sure the font is available / installed on your blog, here is a tutorial for that.

  50. Thank you! It worked perfectly:)

  51. Thank you so much for posting this! It’s looks great and the explanation was very well laid out ๐Ÿ™‚

  52. I did as you said. it doesnt worked for me.
    It only disappears my default date stamp.
    my blog: https://www.bimarshakhanal.com.np

    1. Hello, you’re using a third party theme so will have to tweak the above steps to make it work for your theme.

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.