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

ဘေလာ့ခရီးသည္

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

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

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

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

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

►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;} #load2 body { background-image: url(../images/hexabump.png); background-color: #222; } #load2 body:after { content: ""; z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75)); background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75)); background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75)); background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75)); background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75)); } #load2 .spinner { position: relative; font-size: 100px; width: 1em; height: 1em; margin: 100px auto; border-radius: 50%; background: #123456; box-shadow: inset 0 0 0 .12em rgba(0,0,0,0.2), 0 0 0 .12em rgba(255,255,255,0.1); background: -webkit-linear-gradient(#ea2d0e 50%, #fcd883 50%), -webkit-linear-gradient(#fcd883 50%, #ea2d0e 50%); background: -moz-linear-gradient(#ea2d0e 50%, #ffdd72 50%), -moz-linear-gradient(#ffdd72 50%, #ea2d0e 50%); background: -ms-linear-gradient(#ea2d0e 50%, #ffdd72 50%), -ms-linear-gradient(#ffdd72 50%, #ea2d0e 50%); background: -o-linear-gradient(#ea2d0e 50%, #ffdd72 50%), -o-linear-gradient(#ffdd72 50%, #ea2d0e 50%); background: linear-gradient(#ea2d0e 50%, #ffdd72 50%), linear-gradient(#ffdd72 50%, #ea2d0e 50%); background-size: 50% 100%, 50% 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; opacity: 0.7; -webkit-animation: mask 3s infinite alternate; -moz-animation: mask 3s infinite alternate; -ms-animation: mask 3s infinite alternate; -o-animation: mask 3s infinite alternate; animation: mask 3s infinite alternate; } @-webkit-keyframes mask { 25% { -webkit-transform: rotate(270deg); } 50% { -webkit-transform: rotate( 90deg); } 75% { -webkit-transform: rotate(360deg); } 100% { -webkit-transform: rotate(180deg); } } @-moz-keyframes mask { 25% { -moz-transform: rotate(270deg); } 50% { -moz-transform: rotate( 90deg); } 75% { -moz-transform: rotate(360deg); } 100% { -moz-transform: rotate(180deg); } } @-ms-keyframes mask { 25% { -ms-transform: rotate(270deg); } 50% { -ms-transform: rotate( 90deg); } 75% { -ms-transform: rotate(360deg); } 100% { -ms-transform: rotate(180deg); } } @-o-keyframes mask { 25% { -o-transform: rotate(270deg); } 50% { -o-transform: rotate( 90deg); } 75% { -o-transform: rotate(360deg); } 100% { -o-transform: rotate(180deg); } } @keyframes mask { 25% { transform: rotate(270deg); } 50% { transform: rotate( 90deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(180deg); } }

ေနာက္တဆင့္အေနနဲ႕ ကုဒ္တစ္ခု ထပ္ရွာပါ့မယ္  <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="load2"> <div class="spinner"> <i class="sphere"></i> </div> </div> </div> <!-- End Loader -->

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

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


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

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