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

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

                 <!-- Start Andi-Techno.blogspot.com Loader --><br /> <script type='text/javascript'> //<![CDATA[ $(function() { setTimeout(function() { $('#xgenloader-screen').fadeOut(); }, 5000); }); //]]> </script><br /> <div id='xgenloader-screen'> <div id="load2"> <div class="spinner"> <i class="sphere"></i><br /> </div> </div> </div> <!-- End Loader -->

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

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

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

***************************************

ဘလော့ခရီးသည်သို့ { ဒီမှာ } သွားလိုက်ပါ

လယ်တီမြေသားသို့{ ဒီမှာ } သွားလိုက်ပါ