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

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

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

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

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

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

►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;} #circular3dG{ position:relative; width:100px; height:100px;margin:10% auto; } .circular3dG{ position:absolute; background-color:#00C4FF; width:28px; height:28px; -moz-border-radius:30px; -moz-animation-name:bounce_circular3dG; -moz-animation-duration:0.48s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -webkit-border-radius:30px; -webkit-animation-name:bounce_circular3dG; -webkit-animation-duration:0.48s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -ms-border-radius:30px; -ms-animation-name:bounce_circular3dG; -ms-animation-duration:0.48s; -ms-animation-iteration-count:infinite; -ms-animation-direction:linear; -o-border-radius:30px; -o-animation-name:bounce_circular3dG; -o-animation-duration:0.48s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; border-radius:30px; animation-name:bounce_circular3dG; animation-duration:0.48s; animation-iteration-count:infinite; animation-direction:linear; } #circular3d_1G{ left:41px; top:6px; -moz-animation-delay:0.18s; -webkit-animation-delay:0.18s; -ms-animation-delay:0.18s; -o-animation-delay:0.18s; animation-delay:0.18s; } #circular3d_2G{ left:61px; top:23px; -moz-animation-delay:0.24s; -webkit-animation-delay:0.24s; -ms-animation-delay:0.24s; -o-animation-delay:0.24s; animation-delay:0.24s; } #circular3d_3G{ left:73px; top:45px; -moz-animation-delay:0.3s; -webkit-animation-delay:0.3s; -ms-animation-delay:0.3s; -o-animation-delay:0.3s; animation-delay:0.3s; } #circular3d_4G{ left:69px; top:67px; -moz-animation-delay:0.36s; -webkit-animation-delay:0.36s; -ms-animation-delay:0.36s; -o-animation-delay:0.36s; animation-delay:0.36s; } #circular3d_5G{ left:42px; top:73px; -moz-animation-delay:0.42000000000000004s; -webkit-animation-delay:0.42000000000000004s; -ms-animation-delay:0.42000000000000004s; -o-animation-delay:0.42000000000000004s; animation-delay:0.42000000000000004s; } #circular3d_6G{ left:8px; top:48px; -moz-animation-delay:0.48s; -webkit-animation-delay:0.48s; -ms-animation-delay:0.48s; -o-animation-delay:0.48s; animation-delay:0.48s; } #circular3d_7G{ left:0px; top:14px; -moz-animation-delay:0.5399999999999999s; -webkit-animation-delay:0.5399999999999999s; -ms-animation-delay:0.5399999999999999s; -o-animation-delay:0.5399999999999999s; animation-delay:0.5399999999999999s; } #circular3d_8G{ left:17px; top:0px; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; -ms-animation-delay:0.6s; -o-animation-delay:0.6s; animation-delay:0.6s; } @-moz-keyframes bounce_circular3dG{ 0%{ -moz-transform:scale(1)} 100%{ -moz-transform:scale(.3)} } @-webkit-keyframes bounce_circular3dG{ 0%{ -webkit-transform:scale(1)} 100%{ -webkit-transform:scale(.3)} } @-ms-keyframes bounce_circular3dG{ 0%{ -ms-transform:scale(1)} 100%{ -ms-transform:scale(.3)} } @-o-keyframes bounce_circular3dG{ 0%{ -o-transform:scale(1)} 100%{ -o-transform:scale(.3)} } @keyframes bounce_circular3dG{ 0%{ transform:scale(1)} 100%{ transform:scale(.3)}}

​ေနာက္​တ​ဆင့္​အ​ေန​နဲ႔ ​ကုဒ္​တစ္​ခု ​ထပ္​ရွာ​ပါ့​မယ္  <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="circular3dG"><div id="circular3d_1G" class="circular3dG"></div><div id="circular3d_2G" class="circular3dG"></div><div id="circular3d_3G" class="circular3dG"></div><div id="circular3d_4G" class="circular3dG"></div><div id="circular3d_5G" class="circular3dG"></div><div id="circular3d_6G" class="circular3dG"></div><div id="circular3d_7G" class="circular3dG"></div><div id="circular3d_8G" class="circular3dG"></div></div></div><!-- End Loader -->

​အို​ေက​ပါ​ၿပီ ​မိ​မိ​တို႔ ​တက္​ပ​လက္​ကို ​ေဆ့​လိုက္​ပါ​ေတာ့.... ​စိတ္​မ​ခ်​ပါ​က preview ​နဲ႔​စစ္​ေဆး​ႏိုင္​ပါ​တယ္

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


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

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

​ဘ​ေလာ့​ခ​ရီး​သည္​သို႔ { ​ဒီ​မွာ } ​သြား​လိုက္​ပါ
​လယ္​တီ​ေျမ​သား​သို႔{ ​ဒီ​မွာ } ​သြား​လိုက္​ပါ
​စာ​ေပ​နန္း​ေတာ္​သို႔{ ​ဒီ​မွာ } ​သြား​လိုက္​ပါ