How to create a circular date header for Blogger posts

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.
  2. create a circular date header for blogger posts

  3. Layout > Blog Post Gadget > Edit > Post Page Options > first option Date > Change to 00 Month 0000. Important otherwise it won’t work.
  4. create a circular date header for blogger posts

  5. 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>
  6. 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>
  7. 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>
  8. 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.
  2. create a circular date header for blogger posts

  3. Layout > Blog Post Gadget > Edit > Post Page Options > first option is the Date > Change to 00 Month 0000. Important otherwise it won’t work.
  4. create a circular date header for blogger posts

  5. 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>
  6. 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>
  7. 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 */ 
    }
    
  8. 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

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

136 comments

    • Ellie M on

      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

      Reply
      • Sheena on

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

        Reply
        • Ellie M on

          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

          Reply
  1. Ruben on

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

    Reply
  2. Emily on

    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!

    Reply
    • Ellie M on

      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?

      Reply
  3. Nicolette on

    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!

    Reply
  4. Ann 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!

    Reply
    • Ellie M on

      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

      Reply
    • Stacey on

      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!

      Reply
      • Ellie M on

        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.

        Reply
        • Stacey on

          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!

          Reply
          • Kristin on

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

          • Elaine Malone on

            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.

  5. Laura Jarvis on

    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

    Reply
    • Ellie M on

      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

      Reply
  6. Wanda on

    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?

    Reply
    • Ellie M on

      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.

      Reply
  7. Brittanie on

    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!

    Reply
    • Ellie M on

      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

      Reply
  8. Emily Leeds on

    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.

    Reply
    • Ellie M on

      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.

      Reply
  9. Sarah on

    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?

    Reply
    • Ellie M on

      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.

      Reply
  10. Sheila on

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

    Reply
  11. Alicia Guarino on

    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!

    Reply
  12. Eveline on

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

    Reply
    • Ellie M on

      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.

      Reply
  13. Nina on

    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 =(

    Reply
  14. melissa on

    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.

    Reply
    • Ellie M on

      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.

      Reply
      • brinkley on

        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?

        Reply
        • Ellie M on

          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.

          Reply
  15. Sandra on

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

    Reply
    • Ellie M on

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

      Reply
  16. Chicstylebysage on

    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

    Reply
    • Ellie M on

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

      Reply
    • Ellie M on

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

      Reply
      • Amanda (Moming About) on

        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

        Reply
    • Ellie M on

      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.

      Reply
  17. Olivia Hou on

    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?

    Reply
  18. Eve on

    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!

    Reply
    • Ellie M on

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

      Reply
  19. Becky on

    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

    Reply
  20. Be on

    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…

    Reply
    • Ellie M on

      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.

      Reply
  21. Jennifer T Miller on

    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!

    Reply
    • Ellie M on

      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.

      Reply
  22. Maya on

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

    Reply
  23. Milla on

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

    Reply
    • Elaine Malone on

      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.

      Reply
    • Elaine Malone on

      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 */

      Reply
  24. zaky kautsar on

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

    Reply
    • Elaine Malone on

      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.

      Reply
      • zaky kautsar on

        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.

        Reply
  25. Alice on

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

    Reply
  26. Lindsey on

    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!

    Reply
    • Elaine M on

      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.

      Reply
  27. Andrea Olsson on

    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

    Reply
    • Elaine M on

      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!

      Reply
  28. ASHLYNN on

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

    Reply