ဘေလာ့ ဖြင့္ဖြင့္ခ်င္း Loading Blog ဆိုတဲ့ စတိုင္ေလးကို CSS3 နဲ႕ ဖန္တီးၾကမယ္-( ၃ )

မဂၤလာပါ သည္ေန႕ ေရးျဖစ္တာေလးကေတာ့ မိမိတို႕ဘေလာ့မွာ ဖြင့္ဖြင့္ျခင္း loader ပုံေလး လည္ေနတာ

ကို အလွဆင္ ထည့္ျခင္ပါက နည္းလမ္းေလးဘဲ ျဖစ္ပါတယ္.. သည္နည္းလမ္းေလးကို ပုံစံ.. ၆ မ်ိဳးတဲ႕

ကြ်န္ေတာ္ ခြဲျခား ေရးသားတင္ျပသြားမွာ ျဖစ္ပါတယ္ေနာ္... သည္နည္းေလးကေတာ့ ဘေလာ့အတြက္

ဘာမွေတာ့ အေထာက္အကူမျပဳေပမယ့္ ၀င္၀င္ျခင္း လွပတဲ့ loader ေလးကို ျမင္ရတာေပါ့ ဟီးးးးးးးးးးး

ထည့္နည္းကလည္းသိပ္မခက္ခဲပါဘူးေနာ္ ေအာက္မွာ ေသျခာ ရွင္းျပထားပါတယ္...ဒါေလးက style 3 ပုံစံေလးျဖစ္ပါတယ္...ေနာ္

►1- Blogger Singin ၀င္လိုက္ပါ။
►2- Dashboard ကိုသြားလိုက္ပါ။
►3- Template ကိုကလစ္ပါ..။
►4- Edit Html ကို၀င္ပါ..
►5- Ctrl+F (သို႕မဟုတ္) F3 အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

]]></b:skin> ကုဒ္ကိုရွာပါ.... သည္ကုဒ္မွာ ျပႆနာ ခဏခဏျဖစ္ပါတယ္ ရွာမရတဲ့ျပႆနာေပါ့

ဒါကို ေသျခာရွင္းျပပါ့မယ္ သူက တက္ပလက္ အသစ္ေျပာင္းလိုက္တဲ့ခါမွာ အရင္ကလို ကုဒ္ဒင္းေတြ ရွာေဖြ ရမလြယ္ေတာ့ပါဘူး အေၾကာင္းကေတာ့ တက္လက္မွာ အတြင္းပိုင္းကုဒ္ေတြကို ေခါက္ထားလို႕ပါဘဲ အဲေတာ့ ကိုယ္လိုျခင္တာ ေရးရွာတာနဲ႕ ထြက္မလာတတ္ပါ

တတ္ပါဘူး ဒါကိုက်ေနာ္တို႕ နည္းလမ္ သုံးၾကည့္ရပါတယ္ ]]></b:skin> သည္ကုဒ္အတိုင္းရွာမရပါဘူး သည္ေတာ့ b:skin ဆိုတာေလးကိုဘဲ ေရးထည့္ရွာၾကည့္ပါ...

ေတြ႕မွာ ေသျခာပါတယ္ ေတြ႕တဲ့ခါ ေဘးမွာ မွ်ားအနက္ေလးနဲ႕ ေတြ႕မယ္ အဲမွ်ားကိုကလစ္လုိက္ျခင္းျဖင့္

သူေခါက္ထားတဲ့ ကုဒ္ေတြကို ျဖန္႕လုိက္တာျဖစ္ပါျပီ ဒါဆို ကိုယ္လိုျခင္တဲ့ ကုဒ္တိုင္း ေရးရွာနိဳင္ပါျပီေနာ္..

ေတြ႕ျပီဆိုတာနဲ႕ သူ႕အေပၚကပ္လွ်က္ ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြ ကို copy ယူျပီးထည့္ေပးလိုက္ပါ။

/*
 X-Gen Loader */
#xgenloader-screen 
{z-index:999999;background:#000;width:100%;height:100%;position:fixed 
!important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#bowlG{
position:relative;
width:128px;
height:128px;margin:20%
 auto;
}
#bowl_ringG{
position:absolute;
width:128px;
height:128px;
border:11px solid #5C5C5C;
-moz-border-radius:128px;
-webkit-border-radius:128px;
-ms-border-radius:128px;
-o-border-radius:128px;
border-radius:128px;
}
.ball_holderG{
position:absolute;
width:34px;
height:128px;
left:47px;
top:0px;
-moz-animation-name:ball_moveG;
-moz-animation-duration:1.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:ball_moveG;
-webkit-animation-duration:1.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:ball_moveG;
-ms-animation-duration:1.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:ball_moveG;
-o-animation-duration:1.3s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:ball_moveG;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.ballG{
position:absolute;
left:0px;
top:-30px;
width:51px;
height:51px;
background:#FF0000;
-moz-border-radius:43px;
-webkit-border-radius:43px;
-ms-border-radius:43px;
-o-border-radius:43px;
border-radius:43px;
}
@-moz-keyframes ball_moveG{
0%{
-moz-transform:rotate(0deg)}
100%{
-moz-transform:rotate(360deg)}
}
@-webkit-keyframes ball_moveG{
0%{
-webkit-transform:rotate(0deg)}
100%{
-webkit-transform:rotate(360deg)}
}
@-ms-keyframes ball_moveG{
0%{
-ms-transform:rotate(0deg)}
100%{
-ms-transform:rotate(360deg)}
}
@-o-keyframes ball_moveG{
0%{
-o-transform:rotate(0deg)}
100%{
-o-transform:rotate(360deg)}
}
@keyframes ball_moveG{
0%{
transform:rotate(0deg)}
100%{
transform:rotate(360deg)}
}

ေနာက္တဆင့္အေနနဲ႕ ကုဒ္တစ္ခု ထပ္ရွာပါ့မယ္ <body> ကိုရွာပါ ေတြ႕တာနဲ႕ သူ႕ေအာက္က ကပ္လွ်က္ဘဲ ေပးထားေသာ ေအာက္ကကုဒ္ေတြယူထည့္ေပးလိုက္ပါေနာ္

အိုေကပါျပီ မိမိတို႕ တက္ပလက္ကို ေဆ့လုိက္ပါေတာ့.... စိတ္မခ်ပါက preview နဲ႕စစ္ေဆးနိဳင္ပါတယ္

အေနာ္ ကေတာ့ တန္းေဆ့လိုက္တယ္ ကြက္စိဘဲ..ေိေိ...

ဆက္လက္ေလ့လာလိုပါက
Loading Stye - 1
Loading Style - 2
Loading Stye -3
Loading Style -4
Loading Stye -5
Loading Style - 6

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါကေဒါင္းနည္းမ်ားမသိပါက ဒီမွာ သြားၾကည့္ေပးပါခင္ဗ်ာ