How to Display Today's Date in Blogger Template?

Displaying Today's Date on Blogger top menu or header section can make your template different. We often use Date and time option in our PC to know the current date and time but if we use the current date and time in our Blog header section then a visitor can easily see the today's date from our Blogger template. This widget recently massively using by Template designer in different blogging platform.

Generally most of the Blogger template designer place Date widget at the left or right side of the Menu bar. But you can easily place current date widget in different section of your Blogger template.

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 the code from below and Paste the code above/before </b:skin> 

#SpiceTarikh {
background: none repeat scroll 0 0 #000000;
display: inline-block;
color:#FFFFFF;
float: right;
font:100% 'Oswald',Sans-Serif;
padding: 5px 10px;
}
#SpiceTarikh a {
font-weight: bolder;
padding: 13px 16px 16px;
}

Customization

• To change the Background color of Date widget replace #000000 with other color code.
• To alter the Date digit color change #FFFFFF with different color code.
• Place this widget Left side to right side simply replace rightwith left.
• Increase or Decrease the Font size by changing 100% to 80% or 120%

Placing the Date widget in various place of Template

Now we will Place this date in different places of the template. For placing at the Left or right side of the menu first find the Menu code. suppose the Menu code started with

<nav id='topnav'> .so you have to place the code after the above code.

Similarly if you want to place the date widget at the Credit section then find the code like below <div class='navix credit'>.
After that you have to place the code after the above code. <div id='SpiceTarikh'>. But the main code is below.

<script type='text/javascript'>
//<![CDATA[
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}
var months = new makeArray('January','February','March','April','May',
'June','July','August','September','October','November','December');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(months[month]+ " " +day + ", " + year);
//]]></script>
</div>

Step 5 Finally hit the Save template button.

Now check your template to see the today's date widget. It the widget is not centering then you have to change the padding value from CSS code padding: 5px 10px;. For your query regarding this widget reach me through commenting.