ဘေလာ့ ဖြင့္ဖြင့္ခ်င္း 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

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

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