ব্লগার ওয়েবসাইটে প্রি লোডার বা পেজ লোডিং ইফেক্ট তৈরী করুন সহজেই। Animated Page Loading effects for blogger

ব্লগারের আরো একটি পোস্টে সবাইকে স্বাগতম। আজকের এই পোস্ট আমরা দেখব কিভাবে আপনার ব্লগার ওয়েবসাইটে একটি এনিমেটেড প্রী লোডার বা পেজ লোডিং ইফেক্ট তৈরী করতে পারবেন খুব সহজে।

প্রী-লোডিং বা পেজ লোডিং ইফেক্ট কি?

প্রী-লোডিং বা পেজ লোডিং ইফেক্ট হল একটি ছোট্ট অ্যানিমেশন বা লোগো যা একটি ওয়েবসাইট বা অ্যাপ লোড হওয়ার সময় প্রদর্শিত হয়। এটি ব্যবহারকারীদের জানানোর জন্য একটি উপায় যে ওয়েবসাইট বা অ্যাপটি এখনও লোড হচ্ছে এবং তারা এটি ব্যবহার করতে পারবে না বা কিছুক্ষণ অপেক্ষা করতে হবে।

পেজ লোডিং এর সুবিধা কি?

প্রী-লোডিং ইফেক্টের বেশ কয়েকটি সুবিধা রয়েছে:

• উন্নত অভিজ্ঞতা (UX): প্রী-লোডিং ইফেক্ট ব্যবহারকারীদের জানানোর জন্য একটি উপায় যে ওয়েবসাইট বা অ্যাপটি এখনও লোড হচ্ছে। এটি ব্যবহারকারীদের হতাশ বোধ করা থেকে বিরত রাখতে পারে এবং ওয়েবসাইট বা অ্যাপের সামগ্রিক ব্যবহারকারী অভিজ্ঞতা উন্নত করতে পারে।
• Bounce Rate কমানো: যদি একটি ওয়েবসাইট বা অ্যাপ দীর্ঘ সময় ধরে লোড হতে থাকে, তাহলে ব্যবহারকারীরা হতাশ হয়ে ওয়েবসাইট বা অ্যাপটি ছেড়ে চলে যেতে পারে। প্রী-লোডিং ইফেক্টগুলি ব্যবহারকারীদের ওয়েবসাইট বা অ্যাপটি ছেড়ে যাওয়া থেকে বিরত রাখতে পারে এবং বাউন্স রেট হার কমাতে পারে।
• উন্নত ব্র্যান্ডিং: প্রী-লোডিং ইফেক্টগুলি ব্র্যান্ডের চিহ্ন বা লোগো ব্যবহার করে ব্র্যান্ডিং উপাদান হিসাবে ব্যবহার করা যেতে পারে। এটি ব্যবহারকারীদের ওয়েবসাইট বা অ্যাপের সাথে সংযোগ স্থাপন করতে এবং ব্র্যান্ডের সচেতনতা বাড়াতে সাহায্য করতে পারে।

ব্লগার ওয়েবসাইটে প্রী লোডিং ইফেক্ট তৈরী করার উপায়:

• ব্লগার ড্যাশবোর্ড থেকে থিম সেকশনে যান।
• "Edit Html" সিলেক্ট করুন।
• ]]></b:skin> লিখে সার্চ দিন এবং নিচের কোড গুলো এর উপর পেস্ট করে দিন। মোবাইল দিয়ে এডিট করতে এই পোস্ট পড়ে দেখুন।

/* Preloader effect by Peakfiction . top */

.preloader {

    position: fixed;

    width: 100%;

    height: 100vh;

    background: #f7f7f2;

    left: 0;

    top: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transition: all 400ms;

    z-index: 2000;

}

.preloader.hide {

    opacity: 0;

    pointer-events: none;

}

.preloader .preloader-text {

    color: #838383;

    text-transform: uppercase;

    letter-spacing: 8px;

    font-size: 15px;

}

.preloader .dots-container {

    display: flex;

    margin-bottom: 48px;

}

.preloader .dot {

    background: red;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    margin: 0 5px;

}

.preloader .dot.red {

    background: #ef476f;

    animation: bounce 1000ms infinite;

}

.preloader .dot.green {

    background: #06d6a0;

    animation: bounce 1000ms infinite;

    animation-delay: 200ms;

}

.preloader .dot.yellow {

    background: #ffd166;

    animation: bounce 1000ms infinite;

    animation-delay: 400ms;

}

@keyframes bounce {

    50% {

        transform: translateY(16px);

    }

    100% {

        transform: translateY(0);

    }

}

• এবার আবার </body> লিখে সার্চ করুন এবং নিচের কোড গুলো এর উপর পেস্ট করে দিন।

<div class='preloader'>
        <div class='dots-container'>
            <div class='dot red'/>
            <div class='dot yellow'/>
            <div class='dot green'/>
        </div>
        <div class='preloader-text'>
             Loading...Wait a Moment
        </div>
    </div>
<script>
const preloader = document.querySelector(&quot;.preloader&quot;);
const preloaderDuration = 500;
const hidePreloader = () =&gt; {
    setTimeout(() =&gt; {
        preloader.classList.add(&quot;hide&quot;);
    }, preloaderDuration);
}
window.addEventListener(&quot;load&quot;, hidePreloader);
</script>

• থিমটি সেভ করে দিন।

প্রী-লোডিং ইফেক্টগুলি আপনার ওয়েবসাইট বা অ্যাপের ব্যবহারকারী অভিজ্ঞতা উন্নত করার একটি দুর্দান্ত উপায়। আপনি আপনার ওয়েবসাইট বা অ্যাপের জন্য সঠিক প্রী-লোডিং ইফেক্ট নির্বাচন করে আপনার ব্র্যান্ডের জন্য একটি অনন্য এবং আকর্ষণীয় লুক তৈরি করতে পারেন।