ကဲ...ပထမဆုံး အေပၚကပုံေလးေပၚ ေမာက္တင္ၾကည့္ ဖို႕ ေျပာပါရေစ... နည္းပညာက
အဲနည္းဘဲမို႕ပါ မိမိတို႕ တင္လိုတဲ့ ပုံေတြကို ေမာက္ တင္လို္ကတာနဲ႕ zoom ဆြဲၾကည့္ရသလို ၾကီးးလာတဲ့ ကုဒ္နဲ႕ တင္တဲ့ နည္းေလးပါ..
ပထမဆုံးအေနနဲ႕ လုပ္နည္းေလးကေတာ့ မခက္ခဲပါဘူး လြယ္ကူပါတယ္...စမယ္ေနာ္.
အဆင့္ (၁) ။ ။
►1- Blogger Singin ၀င္လိုက္ပါ။
►2- DASHBOARD ကိုသြားလိုက္ပါ။
►3- LAYOUT ကိုကလစ္ပါ..။
►4- EDIT HTML ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5- EXPAND WIDGET TEMPLATES ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6- Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။
►2- DASHBOARD ကိုသြားလိုက္ပါ။
►3- LAYOUT ကိုကလစ္ပါ..။
►4- EDIT HTML ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5- EXPAND WIDGET TEMPLATES ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6- Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။
ရွာရန္ ကုဒ္ကေတာ့ ]]></b:skin> ကိုရွာလိုက္ပါ .. ေတြ႕တာနဲ႕ သူ႕ရဲ႕ အေပၚကပ္ျပီး ေအာက္ကေပးထားတဲ့ ဇယားထဲကကုဒ္ေတြကို ထည့္ေပးလိုက္ပါ..
.MBT-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.MBT-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.MBT-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
ျပီးတာနဲ႕ save template လုပ္ေပးလိုက္ပါေနာ္။ သည္အဆင့္ထိ ျပီးပါျပီ...ေနာက္ဆက္သြားမယ္..
အဆင့္ (၂) ။ ။ ဘေလာ့ပို႕စ္ တင္တဲ့ ေနရာကို သြားလုိက္ပါေနာ္.. ပို႕စ္တင္ၾကည့္ၾကတာေပါ့
ပို႕စ္တင္မယ္ဆို ရင္ မိမိတင္လိုတဲ့ ပုံကို အရင္ဆုံး လင့္ယူဖို႕လိုလာပါျပီ.. ဒါေတာ့ ဆိုဒ္တခုခုမွာ ပုံကို Upload ျပီးလင့္ယူရမွာျဖစ္ပါတယ္.. က်ေနာ္ သုံးေနက်ကေတာ့ www.minus.com ပါဘဲ အဲမွာ ပုံကို upload လိုက္ပါ..
ရလာတဲ့ direct link ဆိုတာကို မွတ္ထားလိုက္ပါ။
ကဲ ပို႕တင္ေတာ့မယ္.. ဦးဆုံး ပို႕စ္ဇယားကြက္ၾကီးထိပ္မွာ ရွိတဲ့ compose နဲ႕ html ဆိုတာ ႏွစ္ခု ရွိတဲ့ ထဲက html ကိုကလစ္လိုက္ပါ.. ကလစ္တာနဲ႕ ကုဒ္ အနည္းငယ္ က်လာပါမယ္.. ဖ်က္လိုက္ပါ..
ဒါဆို ပုံကိုတင္ပါေတာ့မယ္...
<div class="MBT-CSS3">
<img src="ဒီမွာပံုရဲ႕လင့္ခ္ကိုထည့္ေပးပါ" />
</div>
သည္ကုဒ္ေလးကို notepad နဲ႕ျဖစ္ျဖစ္ သိမ္းထားလုိက္ပါ... ဒါနဲ႕ဘဲ အျမဲ သုံးသြားမွာပါ။
ကဲ ပို႕စ္တင္တဲ့ ဇယားကြက္ ၾကီးးထဲကို အဲကုဒ္ ယူျပီး ထည့္လိုက္ဗ်ာ... အနီေရာင္နဲ႕ မိမိပုံ ရဲ႕လင့္ခ္ထည့္ေပးပါ ဆိုတဲ့ေနရာကို ေစာေစာက ပုံလင့္ ထုတ္ထားတဲ့ လင့္ေလးကို ထည့္လိုက္ပါဗ်ာ..
ဒါဆို ပုံအတြက္ ျပီးပါျပီ compose ဆိုတာကို ကလစ္လိုက္ပါ ပုံေလးေပၚလာပါမယ္..
က်န္တဲ့ စာေပေတြ ဘာဘာညာညာ ေတြေတာ့ သည္တိုင္ ဆက္ေရးလုိ္ကေပါ့...
ျပီးရင္ ပို႕စ္တင္လုိ္ကပါေတာ့.. ဆိုဒ္ေပၚေရာက္တာနဲ႕ ျပန္ၾကည့္လိုက္ေနာ္.. ထူးျခားလာတာေတြ႕ ရမယ္.
ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...
www.aungsanmks.blogspot.com
www.ledimyethar.com
တို႕ရဲ႕ cbox မွာ ေျပာခဲ့ၾကပါေနာ္...
