How to Customize date header style in Blogger

A beautiful customized look of date-header that have a special effect on your blog.Befor to start  there are some steps that have to follow.

Follow steps 

Step 1
In your blogger page ,Click on 'Template' at left side of Page.

Step 2
Now click on 'Edit HTML' button

Step 3
A new window will appear that have blog template code. In window now click on 'Proceed'

Step 4
At top of window,Click on box 'Expand Widget Templates'

Step 5
Now Press 'Ctrl + f'. Find '</head>' 
.
Step 6

     Paste this Below Code Above </head>

     <script> function remplaza_fecha(d){ var da = d.split(' '); dia = "<strong class='fecha_date'>"+da[0]+"</strong>"; mes = "<strong class='fecha_month'>"+da[1].slice(0,3)+"</strong>"; anio = "<strong class='fecha_year'>"+da[2]+"</strong>"; document.write(dia+mes+anio); } </script>

Step 7
Find ' ]]></b:skin>'

      Paste this below Code Above  ]]></b:skin>
     #fecha { display: block; margin:0 10px; float:left; padding: 5px; color: #464646; background: #e4e3ad; border:#d7d675 3px solid; text-transform:capitalize; } .fecha_date { display: block; font-size: 16px; font-weight:bold; } .fecha_month{ display: block; font-size: 10px; } .fecha_year{ display: block; font-size: 10px; }

Step 8 
Find ' <data:post.dateHeader/> '

     Replace  every   <data:post.dateHeader/>  with below Code
     <div id='fecha'> <script>remplaza_fecha('<data:post.dateHeader/>');</script> </div>

If have any problem in above code .Comment below to let me know about problem.