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

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

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

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

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

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

►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;} #spinningSquaresG{ position:relative; width:240px; height:29px;margin:10% auto;} .spinningSquaresG{ position:absolute; top:0; background-color:#FFDD00; width:29px; height:29px; -moz-animation-name:bounce_spinningSquaresG; -moz-animation-duration:0.6s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -moz-transform:scale(.3); -webkit-animation-name:bounce_spinningSquaresG; -webkit-animation-duration:0.6s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -webkit-transform:scale(.3); -ms-animation-name:bounce_spinningSquaresG; -ms-animation-duration:0.6s; -ms-animation-iteration-count:infinite; -ms-animation-direction:linear; -ms-transform:scale(.3); -o-animation-name:bounce_spinningSquaresG; -o-animation-duration:0.6s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; -o-transform:scale(.3); animation-name:bounce_spinningSquaresG; animation-duration:0.6s; animation-iteration-count:infinite; animation-direction:linear; transform:scale(.3); } #spinningSquaresG_1{ left:0; -moz-animation-delay:0.24s; -webkit-animation-delay:0.24s; -ms-animation-delay:0.24s; -o-animation-delay:0.24s; animation-delay:0.24s; } #spinningSquaresG_2{ left:30px; -moz-animation-delay:0.3s; -webkit-animation-delay:0.3s; -ms-animation-delay:0.3s; -o-animation-delay:0.3s; animation-delay:0.3s; } #spinningSquaresG_3{ left:60px; -moz-animation-delay:0.36s; -webkit-animation-delay:0.36s; -ms-animation-delay:0.36s; -o-animation-delay:0.36s; animation-delay:0.36s; } #spinningSquaresG_4{ left:90px; -moz-animation-delay:0.42s; -webkit-animation-delay:0.42s; -ms-animation-delay:0.42s; -o-animation-delay:0.42s; animation-delay:0.42s; } #spinningSquaresG_5{ left:120px; -moz-animation-delay:0.48s; -webkit-animation-delay:0.48s; -ms-animation-delay:0.48s; -o-animation-delay:0.48s; animation-delay:0.48s; } #spinningSquaresG_6{ left:150px; -moz-animation-delay:0.54s; -webkit-animation-delay:0.54s; -ms-animation-delay:0.54s; -o-animation-delay:0.54s; animation-delay:0.54s; } #spinningSquaresG_7{ left:180px; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; -ms-animation-delay:0.6s; -o-animation-delay:0.6s; animation-delay:0.6s; } #spinningSquaresG_8{ left:210px; -moz-animation-delay:0.66s; -webkit-animation-delay:0.66s; -ms-animation-delay:0.66s; -o-animation-delay:0.66s; animation-delay:0.66s; } @-moz-keyframes bounce_spinningSquaresG{ 0%{ -moz-transform:scale(1); background-color:#FFDD00; } 100%{ -moz-transform:scale(.3) rotate(90deg); background-color:#FF0000; } } @-webkit-keyframes bounce_spinningSquaresG{ 0%{ -webkit-transform:scale(1); background-color:#FFDD00; } 100%{ -webkit-transform:scale(.3) rotate(90deg); background-color:#FF0000; } } @-ms-keyframes bounce_spinningSquaresG{ 0%{ -ms-transform:scale(1); background-color:#FFDD00; } 100%{ -ms-transform:scale(.3) rotate(90deg); background-color:#FF0000; } } @-o-keyframes bounce_spinningSquaresG{ 0%{ -o-transform:scale(1); background-color:#FFDD00; } 100%{ -o-transform:scale(.3) rotate(90deg); background-color:#FF0000; } } @keyframes bounce_spinningSquaresG{ 0%{ transform:scale(1); background-color:#FFDD00; } 100%{ transform:scale(.3) rotate(90deg); background-color:#FF0000; } }

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

<!-- Start Andi-Techno.blogspot.com Loader --><script type='text/javascript'>//<![CDATA[ $(function() {     setTimeout(function() {         $('#xgenloader-screen').fadeOut();     }, 5000); }); //]]></script><div id='xgenloader-screen'>
<div id="spinningSquaresG">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>
</div>
<!-- End Loader -->

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

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

ဘေလာ့ခရီးသည္မွ ကူးယူေဖၚျပသည္။

( ::::: ပိုစ့္တင္သူ-ေခ်ာကိုကို ::::: )

ကၽြန္ေတာ္တင္သမွ် Post ေတြကို Facebook မွ တုိက္ရုိက္ဖတ္ရႈလို႔ပါက >> 

နည္းပညာႏွင့္ေဆာ့ဝဲလ္မ်ား Page ကိုႏွိပ္ျပီး Like လုပ္ထားေပးပါ၊၊ 

Follow Me Chaw Ko Ko Facebook.

႐ိုး႐ွင္​း​ေသာနည္​းပညာမ်ားကို ဆန္​းသစ္​စြာတင္​ဆက္​မည္​။

အားလံုးကိုခင္​မင္​လ်ွက္​။

CKK - နည္​းပညာ