How to Add Circle Date Header Beside Blog Post Tile?

How to Add Circle Date Header Beside Blog Post Tile?
widget

There are different Template designer add and modify Template design to add some variation in style. All template are not same, but by adding feature in Blogger template we can make eye catching for viewers. You may have seen some Blogger template which contain post date at the left side of the Blog post title. but most of the template's post information remain below post title or between post footer. In this tutorial we will learn how we can add a Circle Date header beside Blog Post Tile. That means whenever you will create a post then post publication date will show left side of post title in a circular container.


black head

Blue head


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Layout -> Blog Post Gadget -> Edit -> Post Page Options 

-> first option Date -> Change to (Day Month Year) by clicking on Drop down option. Example: 

12 January 2015.

post page option

Step 3 Now go through Settings -> Language and Format -> Date Header Format -> Change to 

(Day Month Year) by clicking on Drop down option. Example: 12 January 2015.

formatting

Step 4 Now find the </head> by pressing Ctrl+F  

Step 5 Copy the code from below and Paste the code above/before </head> 

<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>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Circle Date by www.bloggerspice.com */
#SpiceDinCircle {
position:absolute;
background: #333333;
display: block;
width:60px;
height:60px;
float: left;
margin: 0px 2px 0 -60px;
padding: 0px;
border: 8px inset #F9F9F9;
text-transform: uppercase;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
box-shadow: 2px 1px 7px rgb(102, 102, 102);
}
.date_day {
display: block;
color:#FFFFFF;
font-size: 24px;
font-weight:normal;
 margin-top:-5px;
text-align:center;    
}
.date_month {
display: block;
font-size: 15px;
font-weight:normal;
color:#ccc;
margin-top:4px;
text-align:center;
}
.date_year {
display: block;
color:#CCCCCC;
font-size: 10px
margin-top:-8px;
text-align:center;  
}
</style>
</b:if>

Customization

  • Change code #333333; for altering the circle background color.
  • Alter width:60px;  height:60px;  for increase or decrease the circle size.
  • To change the Circle Color just replace border: 8px inset #F9F9F9;  with border: 8px inset #3A9CE7; (for Blue CIrcle), border: 8px inset #E73A3A; (for Red CIrcle)
red date

Step 6 Now again find the code like below.
<h2 class='date-header'>
<span>
<data:post.dateHeader/>
</span>
</h2>

Step 7 Now replace the above code by below code block. Note that you will find the above code 2 times. So replace both code by using below code block.

<div id='SpiceDinCircle'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='SpiceDinCircle'>
<script>changeDate(&#39;&#39;);</script>
</div>

Step 8 Finally hit the Save Template Button.

Fixing the Blog Post Title

After applying the above code you will see your Blog Post title and circle Dare header merged. So for making gap you have to add the below piece of code.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F 

Step 4 Copy any code from below and Paste the code above/before </b:skin> 

Use below code for Blogger default template
h3.post-title {
padding-left:20px;
}

Or Use below code for Blogger Custom template
.post h3 {
padding-left:20px;
}

Hope you have successfully installed the circular date header beside blog post. For further help leave your comment below. 
Go Up