Customize Your Blogger Blog Post Date Beautifully As In WordPress

Hi Readers, As you know about WordPress and its awesome features that everyone like and want to use it but for Blogspot users, its quite difficult or sometime impossible because its not a open source. But still there are many codes and snippets are available over internet that are trying to convert WordPress codes into Blogspot codes and one try is below. As you have seen many times in WordPress blog that there are awesome blog post date customized in every Blogpost that give a better look to the blog so same is here in Blogspot too but we can’t customize it like that freely…

So for this purpose, here we are with some codes that can let you customize you you blog post date as you want freely even better then WordPress. In default, Blogspot have a list off date format to display but we can’r customize Day,Month,Year digits/Letters one by one as its default in one div so by using the below code, you will be able to make your blog post in three different div of date moth and year and then can add your desired css one by one as we did in one of our Blogger Template that you can see in the below DEMO. Now without any more preface, just check out the liive DEMO and do in on your blog now.

Features:

1.) Awesome Post Date Design.
2.) Fully Customizable.
3.) Pure And Little JavaScript, No JQuery.
4.) Date, Month, Year Are In Different DIV To Customize.
5.) Whole Date Is In Different DIV.

Step 1 (Blogger Setting):

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Setting“.
4.) Click “Language and Format“.
5.) Now Click DropDown In Front Of “Date Header Format ?“
6.) Now Select “00 Month 0000” From The List.
7.) Click “Save setting” And Done.

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Layout “.
4.) Click “Blog Posts Gadget” And “Edit“.
5.) Now Under “Post Page Options” Open List.
6.) Select “00 Month 0000” From The List.
7.) Click “Save” And Done.

Step 2 (Template Setting):

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search Below Code.

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

7.) Now Replace The Above Code With The Below One. If You Got It Twice, Then Replace It Twice.

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

8.) Now Again Click Within Code Box.
9.) Press [CTRL+F] To Search </head> Code.
10.) Now Copy The Below Code And Paste It Before </head> Code..

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;function changeDate(d){ if (d == "") { d = DateCalendar; } var da = d.split(' '); day = "<div class='date_day'>"+da[0]+"</div>"; month = "<div class='date_month'>"+da[1].slice(0,3)+"</div>"; year = "<div class='date_year'>"+da[2]+"</div>"; document.write(day+month+year); DateCalendar = d; }
//]]>
</script>

11.) “Save Template” And Done.

Note: For customizing this Date style, use the below classes and IDs to add your style to it.

#date {/*Add CSS For Whole Date Box*/}
.date_day {/*Add CSS For Date Only*/}
.date_month {/*Add CSS For Month Only*/}
.date_year {/*Add CSS For Year Only*/}

Alternate To Step 2 (Template Setting):

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search Below Code.

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

7.) Now Replace The Above Code With The Below One. If You Got It Twice, Then Replace It Twice.

<span class='date-header'><div id='date'><script>replace_date(&#39;<data:post.dateHeader/>&#39;);</script></div></span>

8.) Now Again Click Within Code Box.
9.) Press [CTRL+F] To Search </head> Code.
10.) Now Copy The Below Code And Paste It Before </head> Code..

<script type='text/javascript'>
//<![CDATA[
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>

11.) Click “Save Template” And Done.

Note: For customizing this Date style, use the below classes and IDs to add your style to it.

#date {/*Add CSS For Whole Date Box*/}
.day {/*Add CSS For Date Only*/}
.month {/*Add CSS For Month Only*/}
.year {/*Add CSS For Year Only*/}

Last Words:

Now with the help of upper tutorial, you can style up your Blogger post dates as trending in WordPress to look more pro as it is. If you liked this tutorial then share it with your friends and leave your feedback, if you have any query about it the feel free to contact us anytime. Hope to see you n next article.