ဘေလာ့ထဲက Date On Posts

ကၽြန္ေတာ့္ဘေလာ့မွာသံုးထားတဲ့ ပို႔စ္တိုင္းရဲ႕
ဘယ္ဖက္ထိပ္က ေန႔စြဲေလးပါ

အရင္ဆံုး Template ကို ၀င္မျပင္ခင္မွာ
Dashboard >> Setting >> Language and Formatting
ဆိုၿပီးအဆင့္ဆင့္သြားလိုက္ပါ

ၿပီးရင္ Date Header Formatting ကို 03 June 2013 အဲဒီလိုမ်ိဳး
ေကာ္မာေတြမပါတဲ့စတိုင္နဲ႔  ရက္ လ  ႏွစ္ ဆိုတဲ့
Format ကိုေရြးၿပီးေျပာင္းေပးပါ


ေအာက္ကပံုကိုၾကည့္ႏိုင္ပါတယ္

ၿပီးရင္ေတာ့ ညာဖက္အေပၚေဒါင့္နားက Save Changes ကိုႏွိပ္ပါ

ၿပီးရင္ Template ကိုသြားပါ

Edit Template ကိုႏွိပ္ပါ

ပြင့္လာတဲ့ Template Coding ေတြထဲမွာ ေအာက္က ကုဒ္ေတြကို လိုက္ရွာပါ
(အဲဒီကုဒ္ေတြအတိုင္း ကြက္တိတူရပါမယ္ .. Template တိုင္းမွာရွိပါတယ္)

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

ေတြ႕ၿပီဆိုရင္ ေအာက္ကကုဒ္ေတြနဲ႔  အစားထိုး  ေပးလိုက္ပါ

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

ၿပီးရင္ </head> ကိုလိုက္ရွာပါ
ေတြ႕ၿပီဆိုရင္ အဲဒီ </head> ရဲ႕  အေပၚမွာ  ေအာက္ကကုဒ္ေတြကို ကူးထည့္ေပးလိုက္ပါ

<script type='text/javascript'>
    //<![CDATA[
    var DateCalendar;
    function changeDate(d){
    if (d == "") {
    d = DateCalendar;
    }
    var da = d.split(' ');
    day = "<strong class='date_day'>"+da[0]+"</strong>";
    month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
    year = "<strong class='date_year'>"+da[2]+"</strong>";
    document.write(month+day+year);
    DateCalendar = d;
    }
    //]]>
    </script>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style type='text/css'>
    /* Calendar style date */
    #Date {
    position:absolute;
    background: white;
    display: block;
    width:60px;
    height:60px;
    float: left;
    margin: 0px 2px 0 -60px;
    padding: 0px 0 0px 0px;
    border: 0;
    text-transform: uppercase;

    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    box-shadow: -2px -1px -7px rgb(102, 102, 102);

    }
    .date_month {
    display: block;
    font-size: 15px;
    font-weight:bold;
    margin-top:4px;
    text-align:center;
    color:#ccc;
    }
    .date_day {
    display: block;
    font-size: 28px;
    font-weight:bold;
    margin-top:-2px;
    text-align:center;
    color:#282828;
    }
    .date_year {
    display: block;
    font-size: 10px;
    margin-top:-8px;
    text-align:center;
    color:#282828;
    }
    </style>
    </b:if>

ၿပီးရင္ Preview Template ကိုႏွိပ္ၿပီး ဘေလာ့ကိုၾကည့္ပါ
လ ကိုျပတဲ့စာလံုးအရြယ္အစားကို ေျပာင္းခ်င္ရင္

.date_month {
    display: block;
    font-size: 15px;
    font-weight:bold;
    margin-top:4px;
    text-align:center;
    color:#ccc;
}
အဲဒီကုဒ္ေတြထဲက 15px ဆိုတဲ့ထဲက 15 ကို အတိုးအေလွ်ာ့လုပ္ၾကည့္ပါ
ထက္ေအာက္ခ်ိန္ၫွိခ်င္ရင္ 4px ဆိုတဲ့ထဲက 4 ကို အတိုးအေလွ်ာ့လုပ္ၾကည့္ပါ
အေရာင္ကုိေျပာင္းခ်င္ရင္ #ccc ဆိုတာကို လိုခ်င္တဲ့ကာလာကုဒ္ေတြနဲ႔ အစားထိုးေပးပါ
အဲဒီလိုပဲ ..
ေန႔အတြက္ဆိုရင္ ေအာက္ကကုဒ္ေတြထဲမွာ လိုက္ျပင္ပါ

.date_day {
    display: block;
    font-size: 28px;
    font-weight:bold;
    margin-top:-2px;
    text-align:center;
    color:#282828;
}

ႏွစ္အတြက္ဆိုရင္ ေအာက္ကကုဒ္ေတြထဲမွာ လိုက္ျပင္ပါ

.date_year {
    display: block;
    font-size: 10px;
    margin-top:-8px;
    text-align:center;
    color:#282828;
    }

အားလံုးကို စိတ္တိုင္းက်ရၿပီဆိုရင္ေတာ့ Save Template ကိုႏွိပ္လိုက္ပါ
ဘေလာ့ထဲက ပို႔စ္အားလံုးရဲ႕ေရွ႕မွာ အဲဒီပို႔စ္ကိုတင္လိုက္တဲ့ ေန႔စြဲေလး ေပၚေနပါလိမ့္မယ္
ကဲ .. အဆင္ေျပပါေစဗ်ာ
 
နည္းပညာလမ္းေၾကာင္းေပၚကသူငယ္ခ်င္းအားလံုးကို ေလးစားခင္မင္လွ်က္
အိုင္တီမုဆိုး



Before installing the Widget you have to Change the Date Header format to the Following Style…

    Login to Blogger
    Go to Setting
    Language and Formatting

Then Change the Date Header Format as MM DD YY. ( Without Comma)

Now, go to Template.
Click on ' Edit Template'.
Now Find the following Line by Pressing CTRL+F in Windows

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

And Replace it with the Following Code,

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

Now find </head> tag and Paste the Following code above/before it.

    <script type='text/javascript'>
    //<![CDATA[
    var DateCalendar;
    function changeDate(d){
    if (d == "") {
    d = DateCalendar;
    }
    var da = d.split(' ');
    day = "<strong class='date_day'>"+da[0]+"</strong>";
    month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
    year = "<strong class='date_year'>"+da[2]+"</strong>";
    document.write(month+day+year);
    DateCalendar = d;
    }
    //]]>
    </script>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style type='text/css'>
    /* Calendar style date */
    #Date {
    position:absolute;
    background: white;
    display: block;
    width:60px;
    height:60px;
    float: left;
    margin: 0px 2px 0 -60px;
    padding: 0px 0 0px 0px;
    border: 0;
    text-transform: uppercase;

    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    box-shadow: -2px -1px -7px rgb(102, 102, 102);

    }
    .date_month {
    display: block;
    font-size: 15px;
    font-weight:bold;
    margin-top:4px;
    text-align:center;
    color:#ccc;
    }
    .date_day {
    display: block;
    font-size: 28px;
    font-weight:bold;
    margin-top:-2px;
    text-align:center;
    color:#282828;
    }
    .date_year {
    display: block;
    font-size: 10px;
    margin-top:-8px;
    text-align:center;
    color:#282828;
    }
    </style>
    </b:if>

You Can make Customizations by Changing these values;

Change the position of Date Stamp by Changing the margin: 0px 2px 0 -60px; in above code.

    Change Shadow color by Changing the rgb(102, 102, 102);
    Change Month Color by Changing color:#ccc; value.
    Change Date and Year color by Changing the color:#282828; value.
    Change Background Color by Changing background: white; value.
After finishing customization the code, click on ' Save Template'.
That it is.
Be Enjoy! :)