How To Style Date Of Blogger Blog

How To Style Date Of Blogger Blog

1. Log in to your blogger account << go to "Template" tab << Click on "Edit HTML" Button:
   
2. Search following date-header CSS code inside the template:
   

   .date-header span

   Full Code somehow looks like this:
   

   .date-header span {
     background-color: $(date.header.background.color);
     color: $(date.header.color);
     padding: $(date.header.padding);
     letter-spacing: $(date.header.letterspacing);
     margin: $(date.header.margin);
   }

   
3. Replace above full code with following CSS code:

   .date-header {
   margin: 0px 0px -50px -190px;
   }
   .date-header span {
   background-color: #DDEDAA;
   color: #444;
   padding: 16px;
   border-radius: 70%;
   border: 3px solid #bada55;
   }
   .date-header:before {
   background: none repeat scroll 0 0 #FCFCFC;
   border: 10px solid #FFBD54;
   border-radius: 100%;
   bottom: -50px;
   content: "";
   display: block;
   height: 30px;
   position: absolute;
   width: 30px;
   z-index: 10;
   margin-left: 140px;
   }
   .date-header:after {
   background: none repeat scroll 0 0 #F9F9F9;
   border: 7px solid #bada55;
   border-radius: 100%;
   bottom: -17px;
   content: "";
   display: block;
   height: 15px;
   position: absolute;
   width: 15px;
   z-index: 10;
   margin-left: 166px;
   } 

4. Click on 'Save Template' Button to save the template

   

   Save tTemplate

Customizing Options:

1. To change background color change #DDEDAA with your preferred color hex code in .date-header span.
2. To change the font color change #444 with your preferred hex color in .date-header span.
3.  To change border of the green circle change #bada55 with your preferred hex color in .date-header:after 

It's Your Turn

Do you get your problem solved by reading this article or get confused. Let us know by submitting comment in the comments box below