How to Add Circle Date Header Beside Blog Post Tile?

How to Add Circle Date Header Beside Blog Post Tile?

2
data:blog.title
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. 
How to Add Circle Date Header Beside Blog Post Tile?
4 Stars stars - "How to Add Circle Date Header Beside Blog Post Tile?" There are different Template designer add and modify Template design to add some variation in ...

Post a Comment

I can't make this works on my blog :( I dont see any changes

H Enri.. this trick will 100% work on all Blogger Default template. But the trick output vary on custom blogger template. because of different coding. So i suggest first test this trick on Blogger default template and after that use it on your custom blogger template. Thank You. :wr

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *