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

Thursday, November 5, 2009

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

11:45 AM Posted by KP-3မိသားစု
Labels: BLOGGER HACK

မိမိရဲ႕ဘေလာ့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-->