How To Add Beautiful Calendar Style Date Widget To Blogger Posts

အခုတင္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ Date ေတြကုိ လွပတဲ့ Calender ပုံစံံျဖင့္ ေျပာင္းထည့္နည္းေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြေတြလည္းမ်ားေတာ့မွာပါ။ မသိေသးတဲ့ မိတ္ေဆြေတြအတြက္ ထပ္ေ၀မွ်ေပးလုိက္တာပါ။ ႀကဳိက္ၾကမယ္လုိ႔ လည္းေမွ်ာ္လင့္ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ link ႏွင့္ တကြ Cond လည္းေပးထားသလုိ ထည့္နည္းကုိလည္း အဆင့္ လုိက္ျပေပးထားပါတယ္။

(၁) သင့္ ဘေလာ့ Setting ထဲက Date Header Format ကုိ အရင္ေျပာင္းပါ......

၁။Sign In Blogger

၂။ Setting

(၂) CSS Cond ေပါင္းထည့္ရန္  ေအာက္ပါအတုိင္ လုပ္ေဆာင္ပါ......

၃။ Template
မိမိ Template ကုိ Cond ေပါင္းထည့္ရန္ စိတ္မခ်ပါ က Backup/Restore လုပ္ပါ။

၄။ Edit HTMl

၅။ Proceed
Expand Widget Templates ကုိအမွန္ျခစ္ေပးလုိက္ပါ

၆။ ေအာက္က Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။

</head>

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

<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 {

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHlqMgrM5Ef4jHIOfXoOb48ywGniItnxf4hTtI0LeR1MrL1H7fAYytXmgYdT6-NMMLKvSQ9t64P8cYDBEIO8urlU4bsqRtSaskKKRErEFP3WbqRkLkQ7Gi5PeKvBEZrmGUzaiO8_59Murl/s1600/calendar07.png) no-repeat;

display: block;

width:60px;

height:60px;

float: left;

margin: 15px 2px 0 -108px;

padding: 0 0 8px 0px;

border: 0;

text-transform: uppercase;

}

.date_month {

display: block;

font-size: 15px;

font-weight:bold;

margin-top:-1px;

text-align:center;

color:#ffffff; /* Month's color */

}

.date_day {

display: block;

font-size: 28px;

font-weight:bold;

margin-top:-8px;

text-align:center;

color:#282828; /* Day's color */

}

.date_year {

display: block;

font-size: 10px;

margin-top:-8px;

text-align:center;

color:#282828; /* Year's color */

}

</style>

</b:if>

၈။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။

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

မွတ္ခ်က္။   ။ <h2 class='date-header'><span><data:post.dateHeader/></span></h2> Cond ဟာ နွစ္ခု ရွိပါ တယ္။ ဒုတိယ Cond နွင့္ လဲေပးရမွာပါ။ ေအာက္မွ ပုံ အတုိင္ပါ။

၉။ ေတြ႕ၿပီးဆုိရင္ ေအာက္က Cond ႏွင့္ လဲေပးလုိက္ပါ။ (မိမိရွာထားတဲ့ အေပၚက Cond ကုိ ျဖဳတ္ၿပီး ထုိေနရာမွာ ေအာက္က Cond အစာထုိးေပးရမွာ ျဖစ္ပါတယ္။)

<div id='Date'>

<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>

</div>

<b:else/>

<div id='Date'>

<script>changeDate(&#39;&#39;);</script>

</div>

၁၀။ အာလုံးထည့္ၿပီးရင္ Save Template ကုိ ႏုိပ္ေပးလုိက္ပါ။