How to Display Today's Date in Blogger Template?

How to Display Today's Date in Blogger Template?

Comments: 4

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.

blue menu

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;
float: right;
font:100% 'Oswald',Sans-Serif;
padding: 5px 10px;
#SpiceTarikh a {
font-weight: bolder;
padding: 13px 16px 16px;


  • 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 right with left.
  • Increase or Decrease the Font size by changing 100% to 80% or 120%
green menu

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'>
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',
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);

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.

Related Post

Speak Your Mind

মোঃখায়রুজ্জামান বাপ্পি says: 1/11/2015

Sir,futarer name jekhane thake okhankar color change korbo kivabe?

মোঃখায়রুজ্জামান বাপ্পি says: 1/11/2015

Sir,futarer name jekhane thake okhankar color change korbo kivabe?

Mohammad Fazle Rabbi says: 1/11/2015

template a nicher code search koro--and background:#ffffff; replace kore background:#000000; add korlei footer er color change hobe.

.footer-outer {
border-top:4px solid #FFFF00;

মোঃখায়রুজ্জামান বাপ্পি says: 1/12/2015

Sir,Ami ar nicer gegeter name ar color ar kta bolcilam.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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


Email *

Message *