မဂၤလာပါဗ်ာ။ကၽြန္ေတာ္လည္းဘေလာ့နဲ႔ပတ္သတ္ၿပီးမတင္တာၾကာၿပီဆိုေတာ့ခုရွယ္ေလးတစ္ခုတင္ေပးလိုက္ပါတယ္။ဘေလာ့ပိုစ္စလံုးေတြကိုအၾကီးအေသးေျပာင္းရန္(TestResizer)သစ္ေလးပါ၊ဒီနည္းပညာကCSS3သံုးထားတာပါ။သံုးတဲ့သူေတြနည္းေသးတယ္လို႕ေျပာရင္မွားမယ္မထင္ပါဘူး။ဘေလာ့မိတ္ေဆြအားလံုးလည္းၾကိဳက္ၾကမယ္လို႕ေမ်ာ္လင့္ပါတယ္။ေအာက္မွာပံုနဲ႕တကြသြားၾကည့္လို႕ရေအာင္DEMOလင့္ခ္ေလးေပးထားပါတယ္။
ဒီေနရာမွာသြားၾကည့္ပါ။
ကဲထံုးစံအတိုင္း
(၁)Templated
(၂)Edit HTML
(၃) Ctrl+F အကူအညီနဲ႔ ေအာက္ကCode ကိုရွာပါ။
]]></ b: skin>
တစ္ခါတစ္ခါမွာမိမိသံုးတဲ႔Templatedကိုေခါက္ထားတတ္ေတာ့ရွာမေတြ႔ျဖစ္တတ္တယ္။
မေတြ႔ရင္ေအာက္ကCodeကိုရွာပါ။
<b:skin>..</ b: skin>ကိုရွာပါ။
ေခါက္ထားတာကိုေျဖခ်လိုက္ရင္ ]]></ b: skin>ေလးေတြ႔ပါမယ္။
ျပီးရင္သူ႔အေပၚကပ္ရပ္မွာေအာက္ကCodeေတြထည့္လိုက္ပါ။
.tsizernorm, .tsizerbig, .tsizerbigger, .tsizersmall {
padding-top: 20px;
-o-transition: font 2s ease-in;
-moz-transition: font 2s ease-in;
-webkit-transition: font 2s ease-in;
}
.tsizersmall {
font-size: 90%;
}
.tsizernorm {
font-size: 100%;
}
.tsizerbig {
font-size: 105%;
}
.tsizerbigger {
font-size: 110%;
font-weight: bold;
}
span.sizer {
float: right;
text-align: center;
height: 20px;
width: 250px;
margin: 0 10px 10px 0;
background: #333366;
display: block;
font-size: 18px;
padding: 2px 10px;
color: #00CCFF;
text-shadow: 1px 1px 1px blue;
cursor: pointer;
border: 1px solid #eee;
font-family: Times New Roman;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 6px #000;
-moz-box-shadow: 1px 1px 6px #000;
-webkit-box-shadow: 1px 1px 6px #000;display: block;
}
span.sizer:active {
border: 1px solid #555;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #003399;
box-shadow:0px 0px 12px #000;
-moz-box-shadow:0px 0px 12px #000;
-webkit-box-shadow:0px 0px 12px #000;
margin-top: -1px;
}
.clr20 {clear: both; height: 20px;}
၆။ေအာက္က Code ထပ္ရွာပါ။
<data:post.body/>
၇။ေတြ႕ျပီဆိုရင္ေအာက္က Code နဲ႕အစားထိုေပးလိုက္ပါ။
<div class='tsizersmall' onclick='if (this.className=="tsizersmall") { this.className="tsizernorm" } else if (this.className=="tsizernorm") { this.className="tsizerbig" } else if (this.className=="tsizerbig") { this.className="tsizerbigger" } else if (this.className=="tsizerbigger") { this.className="tsizersmall" } else { this.className="tsizersnall" }'><span class='sizer'>စလံုးအၾကီးအေသးေျပာင္းရန္</span>
<div class="clr20"/>
<data:post.body/>
</div>
(၄)။ေအာက္က Code ထပ္ရွာပါ။
<data:post.body/>
ေတြ႕ျပီဆိုရင္ေအာက္က Code နဲ႕အစားထိုေပးလိုက္ပါ။
<div class='tsizersmall' onclick='if (this.className=="tsizersmall") { this.className="tsizernorm" } else if (this.className=="tsizernorm") { this.className="tsizerbig" } else if (this.className=="tsizerbig") { this.className="tsizerbigger" } else if (this.className=="tsizerbigger") { this.className="tsizersmall" } else { this.className="tsizersnall" }'><span class='sizer'>စလံုးအၾကီးအေသးေျပာင္းရန္</span>
<div class="clr20"/>
<data:post.body/>
</div>
(၅)Save Tamplate ႏိုပ္လိုက္ပါရပါျပီ။ ။ ။