kp3tester: kp3နည္းပညာ၊၈၉၊မိမိရဲ႕ဘေလာ့Post ကေန႕စြဲေလးကိုCalendar style နဲ႕ေျပာင္းခ်င္ရင္

Thursday, November 5, 2009

kp3နည္းပညာ၊၈၉၊မိမိရဲ႕ဘေလာ့Post ကေန႕စြဲေလးကိုCalendar style နဲ႕ေျပာင္းခ်င္ရင္

မိမိရဲ႕ဘေလာ့Post ကေန႕စြဲေလးကိုေအာက္ကပံုအတိုင္း Calendar style နဲ႕ေျပာင္းျခင္ရင္
ေပါ့ေနာ္၊နည္းနည္းေလးၾကည့္ရတာပိုလွသြားတာေပါ့ဟီး...
ေအာက္မွာထည့္နည္းေလးကေတာ့ ၃ဆင့္ေလာက္ရိွေပမယ့္ရွင္းပါတယ္စိတ္ဝင္စားရင္ေတာ့

၁။ Layout.

၂။Edit HTML

၃။Download the Full Template

၄။ေအာက္က Code ကိုရွာပါ။Ctrl+F ရွာရင္ျမန္ပါတယ္

<data:post.dateHeader/>

၅။ေတြ႕ျပီဆိုရင္ေအာက္က Code ႏွင့္အစားထိုးလိုက္ပါ၊

<div id='date'>
<script> replace_date(&#39;<data:post.dateHeader/>&#39;);
</script>
</div>

၆။ေအာက္က Code ကိုထပ္ရွာပါ၊

</head>

၇။ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္က Code ကိုထည့္လိုက္ပါ၊

<style>
    /* To view the year change the &quot;none&quot; to &quot;block&quot; */
    #date {
    display: block;
    float:left;
    margin: 0 5px 0px 0;
    padding: 1px 15px 15px 10px;
    color: #333;
    background: transparent url(http://bloggertipspro.googlepages.com/Calendar.png) no-repeat;
    border: 0;
    text-transform: uppercase;
    }

    .month {
    margin: 0px 5px 0px 9px;
    color: #fff;
    display: block;
    font-size: 10px;
    font-weight:bold;
    }

    .year {
    margin: 0px 5px 0px 6px;
    display: block;
    font-size: 10px;
    }

    .day {
    margin: 5px 5px 0px 7px;
    display: block;
    font-size: 20px;
    font-weight:bold;
    }
    </style>

အေပၚက Code ကေတာ့ CSS codeေပါ့ေနာ္ Calendar နဲ႕တူေအာင္ကူညီေပးတဲCode ပါ
ပံုလင့္ခ္ေနရာမွာမိမိနွစ္သက္သည့္ Calendar ပံုထည့္သံုးလို႕ရပါတယ္။

ဒါကေတာ့ပံုရဲ႕လင့္ခ္ပါ(http://bloggertipspro.googlepages.com/Calendar.png)

၈။ေနာက္ဆံုးအဆင့္ေအာက္က Code ကိုထပ္ရွာပါ

<body>

၉။ေတြ႕ျပီဆိုရင္ေအာက္မွာ ေအာက္က Code ကိုထည့္ေပးလိုက္ပါ။

<!--date image background-->
<script>
function replace_date(d)
{
var da = d.split(&#39; &#39;);
month = &quot;<div class='month'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
day = &quot;<div class='day'>&quot;+da[0]+&quot;</div>&quot;;
year = &quot;<div class='year'>&quot;+da[2]+&quot;</div>&quot;;
document.write(month+day+year);
}
</script>
<!--date image background-->