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

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

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

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

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

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

►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;} .bubblingG { text-align: center; width:100px; height:63px;margin:10% auto; } .bubblingG span { display: inline-block; vertical-align: middle; width: 13px; height: 13px; margin: 31px auto; background: #7BFF00; -moz-border-radius: 63px; -moz-animation: bubblingG 0.6s infinite alternate; -webkit-border-radius: 63px; -webkit-animation: bubblingG 0.6s infinite alternate; -ms-border-radius: 63px; -ms-animation: bubblingG 0.6s infinite alternate; -o-border-radius: 63px; -o-animation: bubblingG 0.6s infinite alternate; border-radius: 63px; animation: bubblingG 0.6s infinite alternate; } #bubblingG_1 { -moz-animation-delay: 0s; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; } #bubblingG_2 { -moz-animation-delay: 0.18s; -webkit-animation-delay: 0.18s; -ms-animation-delay: 0.18s; -o-animation-delay: 0.18s; animation-delay: 0.18s; } #bubblingG_3 { -moz-animation-delay: 0.36s; -webkit-animation-delay: 0.36s; -ms-animation-delay: 0.36s; -o-animation-delay: 0.36s; animation-delay: 0.36s; } @-moz-keyframes bubblingG { 0% { width: 13px; height: 13px; background-color:#7BFF00; -moz-transform: translateY(0); } 100% { width: 30px; height: 30px; background-color:#FF0000; -moz-transform: translateY(-26px); } } @-webkit-keyframes bubblingG { 0% { width: 13px; height: 13px; background-color:#7BFF00; -webkit-transform: translateY(0); } 100% { width: 30px; height: 30px; background-color:#FF0000; -webkit-transform: translateY(-26px); } } @-ms-keyframes bubblingG { 0% { width: 13px; height: 13px; background-color:#7BFF00; -ms-transform: translateY(0); } 100% { width: 30px; height: 30px; background-color:#FF0000; -ms-transform: translateY(-26px); } } @-o-keyframes bubblingG { 0% { width: 13px; height: 13px; background-color:#7BFF00; -o-transform: translateY(0); } 100% { width: 30px; height: 30px; background-color:#FF0000; -o-transform: translateY(-26px); } } @keyframes bubblingG { 0% { width: 13px; height: 13px; background-color:#7BFF00; transform: translateY(0); } 100% { width: 30px; height: 30px; background-color:#FF0000; transform: translateY(-26px); } }> -->

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

<script type='text/javascript'>//<![CDATA[ $(function() { setTimeout(function() { $('#xgenloader-screen').fadeOut(); }, 5000); }); //]]></script><div id='xgenloader-screen'>
<div class="bubblingG">
<span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div>
</div>
/textarea> aaaa <br>

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

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

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

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

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

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

Follow Me Chaw Ko Ko Facebook.

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

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

CKK - နည္းပညာ

Title : ဘေလာ့ ဖြင့္ဖြင့္ခ်င္း Loading Blog ဆိုတဲ့ စတိုင္ေလးကို CSS3 နဲ႕ ဖန္တီးၾကမယ္-( ၅ )
Description : မဂၤလာပါ သည္ေန႕ ေရးျဖစ္တာေလးကေတာ့ မိမိတို႕ဘေလာ့မွာ ဖြင့္ဖြင့္ျခင္း loader ပုံေလး လည္ေနတာ ကို အလွဆင္ ထည့္ျခင္ပါက နည္းလမ္းေလးဘဲ ျဖစ္ပါတယ္.....
Rating : 5

CKK-နည္းပညာ

မဂၤလာပါ CKK-နည္းပညာမွ ေႏြးေထြးစြာ ၾကိဳဆိုပါတယ္ေနာ္။