How to Display Today's Date in Blogger Template?

How to Display Today's Date in Blogger Template?

4
data:blog.title
widget

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;
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 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'>
//<![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.
How to Display Today's Date in Blogger Template?
4 Stars stars - "How to Display Today's Date in Blogger Template?" Displaying Today's Date on Blogger top menu or header section can make your template diffe...

Post a Comment

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

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

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;
color:#000000;
background:#ffffff;

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

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 *