ব্লগার ব্লগে দারুন একটি পেজ লোডিং ইফেক্ট যোগ করুন।

1
486

হ্যালো বন্ধুরা কেমন আছেন সবাই।আমি আল্লাহর রহমতে ভাল আছি।আজ আপনাদের জন্য নিয়ে এসেছি দারুন

একটি টিপস।যাদের একটি ব্লগ সাইট আছে ,আর সেটি যদি হয় ব্লগার ব্লগ,তাদের জন্যেই আমার  এই পোস্ট।

আজ আমি দেখাব কি ভাবে যোগ করবেন ব্লগার ব্লগে  দারুন একটি পেজ লোডিং ইফেক্ট ।

ব্লগার ব্লগে দারুন একটি পেজ লোডিং ইফেক্ট  যোগ করুন। ব্লগার ব্লগে দারুন একটি পেজ লোডিং ইফেক্ট যোগ করুন।

 blogger.com এ লগিন করার পর template বোতাম চাপুন, তারপর Customize বোতাম চাপুন । এবার খুজেঁ বের করুন <body>

এবার <body> এই লেখাটার ঠিক নিচে ,

   

   <div id=’loader’>

<div class=”wrap”>

<div class=”bg”>

<div class=”loading”>

<span class=”title”>loading…</span>

<span class=”text”><data:blog.title/></span>

</div> </div></div></div>

<script src=’//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js’/>

    <script type=’text/javascript’>

        $(window).load(function () {

            setTimeout(function () {

                $(&quot;.wrap&quot;).fadeOut(&quot;slow&quot;);

                setTimeout(function () {

                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)

                }, 1000)

            }, 1000)

        });

    </script>

<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.loading span:after{content:””;display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style>

 
 উপরের কোড গুলে কপি করে পেস্ট করুন,হুম আপনার কাজ শেষ,আপনি যদি সঠিক ভাবে করতে পারেন তাহলে টেমপ্লেট টা সেভ করে আপনার সাইটটা রিফ্রেস করে দেখুন,কোন সমস্যা হলে কমেন্ট করতে ভুলবেন না যেন। 
 অনেক ধন্যবাদ আমার পোস্টটি পড়ার জন্য,সময় থাকলে আমার সাইটটি ঘুরে আসতে পারেন

1 মন্তব্য

একটি উত্তর ত্যাগ