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

Posted by KP-3မိသားစု | Labels:

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

၁ဝ။Save template ကိုႏိုပ္လိုက္ပါ။ျပီးပါျပီ။။။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု



Related Post:

0 comments:

Post a Comment