How to create a circular date header for Blogger posts

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

[postwarning]

Circular Date Header for Blog Posts

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

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

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. 1. Settings > Language and Format > Date Header Format > Change to 00 Month 0000. Important otherwise it won’t work.

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

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