Style blogspot blogger date header

To change your blog's date header color and font style, you can do it with a very simple CSS adjustment that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance.
See the result in the image below:


How to do it

Step 1. Login into your Blogger Dashboard, select Template option > click on Edit HTML 


Step 2. Select Expand Blogger Template and search (CTRL + F) for the following code:

date.header

Or...

.date-header

Step 3. Add the following code snippet just below of it
background:white;
border-bottom: 1px solid #000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;
}

Putting it all together, it should look something like this:

.date-header span {
background:#FFD465;
border-bottom: 2px solid #cc0000;
color:#000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;}

To modify the style, replace the above bold/colored codes...

to change the background color:
to change the border style:
  • delete -bottom if you want border all around
  • change: 2px to a higher or lower value
  • change: solid with dotted if you want a dotted line
  • change:  #cc0000 with the hex code of border color

to change the font size and date color:
  • for a bigger text, change: 12px to a higher value
  • color: replace the hex code (#000000) with the hex of date color

Example:

color: #0000cc;

to change margin-left:
(represents the distance between date and blogger post)
  • replace -105px with a bigger/smaller value
float:

  • change left to right

Display post author, date, labels and comments with icons below post titles

When there are no comments made to your posts, there's a link that says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. If you want to make your blog more stylish by replacing these texts with some cute small icons along with the default Author Name, Post Date, Labels and Comments... then just follow the next steps:






Steps:
 
Step 1. From your Blogger Dashboard, click on the Template option, then press the Edit HTML button:


Step 2. Select the "Expand widgets templates" box



Step 3. Search for the below code (press the CTRL + F keys and paste the code in the search box):


<div class='post-header-line-1'>

If you can't find the code above, look for this one:

    <div class='post-header'>

Step 4. Paste the following code below/after the code above:

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia0X0w6mdBbLN8VXRyAZC3mX3Nf0T8T1v_CFSaYika5jcZq1eLKoOs5k8Ws9WcZwEg0aDnr5t9cbPRseluxqmDvEVxRd2PfrD8QSX915bKxQE3D8f6C1U3a0JjXx7ysRP3_RlWmNo2ukLv/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRyJhqZVaOcvKPpLfQwtYr6P3FBpjRIrabXJyxRvAJ16j2DlAq-zSiIxVUxJm1Mhx7sSQbIoFaFSV_rU2-qDNTJmkX8ATiwzT6LKmZR0iAiHECYlsebzu8gQ0ECk-l21yicxjzozLUSIW3/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Ou79nqoP4qNQJukhiQfve7OVzQKrbwK8RXu48Vjta3yq5WwzCeG_t4xMWGttI3FhQGPtYM3MPovbDY-BNdyaZ6S7KzFUULSrboNvDt5EmTZnDKcEuYpOgiYsx_w3ul0JsjE_L2RqbAlY/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkUiaI814nNOumwuuVBMM-I_bGF0Ht68n9JrjbA0Cbb66aQwEspFu1zDrOMyCI6Cj2q8_VA93gzbq9h6qEgmP5jvE9troYmEbh8ZYValSm_1jQ6rX_kZnGrGJ6kNMYVjrtEC9JWAETYWf4/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
      </span>

How to customize:

If you want to change the icons, just replace the URL addresses above colored with:

  • Red - Author
  • Green - Date
  • Blue - Labels
  • Violet - Comment bubble

... with the URL address of your image.

Step 5. Save template... and you're done!