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

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

    <div id='Date'> 
    <div id='Date'> 
  2. Now find </head> and paste the following above it
        <script type='text/javascript'>
          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>"; 
            DateCalendar = d; 
  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 { 
              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 */ 
            .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 */ 
            .date_year { 
              display: block; 
              color:#333333; /* CHANGE YEAR COLOUR */ 
              font-size: 10px; /* CHANGE FONT SIZE OF YEAR */ 
  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'>

    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> 
    </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 */ {
    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 { 
    .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 */ 
    text-align: center !important; 
    .month {
    letter-spacing:3px; /* CHANGE SPACE BETWEEN LETTERS */
    color: #FFFFFF; /* CHANGE FONT COLOUR*/ 
    .year {
    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
Styling the date header – calendar or banner


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

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! πŸ™‚

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

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

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.

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!

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?

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!

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 – Let me know how you get on.

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!

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

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.

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:

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.

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!

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

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

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.

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?


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

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?

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.

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!

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

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.

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.

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?

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.

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.

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

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.

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.

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!

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 ***** to Settings > Basic > Permissions, I can take a look for you.

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 πŸ™

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.

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.


desperately trying to install code =(

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.

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,


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 **** to your blog permissions under settings and I can take a look for you.

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.

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

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?

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.

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?

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.

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 πŸ™‚

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!



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 πŸ™‚

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 **** and I’ll have a look for you πŸ™‚

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

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.

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?

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?

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!

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 πŸ™‚

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

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…

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.

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!

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.

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

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 πŸ™‚

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.

Hello, follow the “Banner Style” part of this tutorial but replace the CSS on 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 */

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 πŸ™‚

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.

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.

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

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?


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.

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

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!

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! πŸ˜€

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.