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

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

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

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

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

ထည့္နည္းကလည္းသိပ္မခက္ခဲပါဘူးေနာ္ ေအာက္မွာ ေသျခာ ရွင္းျပထားပါတယ္...

►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;}
 /* DEMO 1 */ #horizontal-load 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.5));     background: 
-moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), 
rgba(0,0,0,0.5));     background: -ms-radial-gradient(center center, 
circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));     background: 
-o-radial-gradient(center center, circle cover, rgba(0,0,0,0), 
rgba(0,0,0,0.5));     background: radial-gradient(center center, circle 
cover, rgba(0,0,0,0), rgba(0,0,0,0.5)); } #horizontal-load .bar { 
font-size: 20px;     width: 10em;     height: 1em;     position: 
relative;     margin: 100px auto;     border-radius: .5em;     
background: rgba(255,255,255,0.6);     box-shadow:         0 0 0 .05em 
rgba(100,100,100,0.075),         0 0 0 .25em rgba(0,0,0,0.1),         
inset 0 .1em .05em rgba(0,0,0,0.1),         0 .05em 
rgba(255,255,255,0.7); } #horizontal-load .bar:after {     content: 
"Please wait.";     position: absolute;     left: 25%;     top: 150%;   
  font-family: 'Carrois Gothic', sans-serif;     font-size: 1em;     
color: #555;     text-shadow: 0 .05em rgba(255,255,255,0.7); } 
#horizontal-load .bar .sphere {     border-radius: 50%;     width: 1em; 
    height: 100%;     background: -webkit-linear-gradient(#eee, #ddd);  
   background: -moz-linear-gradient(#eee, #ddd);     background: 
-ms-linear-gradient(#eee, #ddd);     background: 
-o-linear-gradient(#eee, #ddd);     background: linear-gradient(#eee, 
#ddd);     box-shadow:         inset 0 .15em .1em rgba(255,255,255,0.3),
         inset 0 -.1em .15em rgba(0,0,0,0.15),         0 0 .25em 
rgba(0,0,0,0.3);     display: block;     -webkit-animation: slide 1.75s 
ease-in-out infinite alternate;     -moz-animation: slide 1.75s 
ease-in-out infinite alternate;     -ms-animation: slide 1.75s 
ease-in-out infinite alternate;     -o-animation: slide 1.75s 
ease-in-out infinite alternate;     animation: slide 1.75s ease-in-out 
infinite alternate; } @-webkit-keyframes slide {     to { margin-left: 
90%; } } @-moz-keyframes slide {     to { margin-left: 90%; } } 
@-ms-keyframes slide {     to { margin-left: 90%; } } @-o-keyframes 
slide {     to { margin-left: 90%; } } @keyframes slide {     to { 
margin-left: 90%; } }

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

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

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

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

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

Labels

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

0 blogger-facebook:

Post a Comment

Popular Posts

Test Footer

Most Read