ব্লগারে যোগ করুন প্রিমিয়াম অ্যানিমেটেড গেইমিং প্রগ্রেস বার (Free HTML/CSS Code)

বর্তমানে ওয়েবসাইট কাস্টমাইজেশনের ক্ষেত্রে শুধুমাত্র তথ্য প্রদানই যথেষ্ট নয়, বরং সাইটের ভিজ্যুয়াল অ্যাপিল বা সৌন্দর্য ভিজিটরদের ধরে রাখতে বড় ভূমিকা পালন করে। বিশেষ করে যারা গেইমিং, টেকনোলজি বা টিউটোরিয়াল নিয়ে ব্লগিং করেন, তাদের জন্য সাধারণ স্ট্যাটিক এলিমেন্টের চেয়ে অ্যানিমেটেড এলিমেন্ট অনেক বেশি কার্যকর। আজ আমি আপনাদের জন্য নিয়ে এসেছি একটি Ultra-Premium Animated Gaming Progress Bar, যা আপনার ব্লগার সাইটকে দেবে একটি আধুনিক এবং প্রো-গেইমিং লুক।

গেইমিং প্রগ্রেস বার কেন ব্যবহার করবেন?

একটি প্রগ্রেস বার সাধারণত কোনো কাজের অগ্রগতি বা পরিসংখ্যান দেখানোর জন্য ব্যবহৃত হয়। তবে আমাদের এই বিশেষ ডিজাইনটি সাধারণ বার থেকে আলাদা কারণ:

ইন্টারেক্টিভ এনিমেশন: এতে মুভিং স্ট্রাইপ (Moving Stripes) এবং ফ্ল্যাশিং গ্লো ইফেক্ট রয়েছে যা ব্যবহারকারীর দৃষ্টি আকর্ষণ করে।
নিয়ন থিম: সাইবারপাঙ্ক বা নিয়ন গ্লোয়িং কালার কম্বিনেশন আপনার সাইটকে অন্যান্য সাধারণ সাইট থেকে আলাদা করে তুলবে।
বহুমুখী ব্যবহার: এটি আপনি আপনার স্কিল লেভেল, কোনো ফাইল ডাউনলোডের অগ্রগতি, বা গেইমিং প্রোফাইল স্ট্যাটাস দেখানোর জন্য ব্যবহার করতে পারেন।

এই উইজেটটির প্রধান বৈশিষ্ট্যসমূহ:

১. Responsive Design: এটি যেকোনো স্ক্রিন সাইজ বা ডিভাইসে (মোবাইল, ট্যাব, পিসি) স্বয়ংক্রিয়ভাবে মানিয়ে নেয়। ২. Smooth Transition: এক ভ্যালু থেকে অন্য ভ্যালুতে যাওয়ার সময় এটি খুব স্মুথলি এনিমেট করে। ৩. Lightweight Code: কোনো ভারী জাভাস্ক্রিপ্ট লাইব্রেরি ছাড়াই এটি তৈরি করা হয়েছে, ফলে আপনার সাইটের লোডিং স্পিডে কোনো প্রভাব ফেলবে না। ৪. Fully Customizable: আপনি চাইলে খুব সহজেই এর কালার, হাইট এবং টেক্সট আপনার থিমের সাথে মিলিয়ে পরিবর্তন করতে পারবেন।

ব্লগারে কিভাবে সেটআপ করবেন?

এই প্রিমিয়াম প্রগ্রেস বারটি আপনার সাইটে যুক্ত করা খুবই সহজ। নিচের ধাপগুলো অনুসরণ করুন:

১. আপনার ব্লগার ড্যাশবোর্ডে গিয়ে Layout এ ক্লিক করুন। ২. যেখানে এটি দেখাতে চান সেখানে Add a Gadget থেকে HTML/JavaScript অপশনটি বেছে নিন। ৩. নিচের বক্সে দেওয়া সম্পূর্ণ কোডটি কপি করে সেখানে পেস্ট করুন। ৪. আপনি যদি নির্দিষ্ট কোনো পোস্টে এটি দিতে চান, তবে পোস্ট এডিটরের HTML View-তে গিয়ে কোডটি পেস্ট করে দিন।

কাস্টমাইজ করার নিয়ম:

আপনি যদি এর কালার পরিবর্তন করতে চান, তবে কোডের একদম শুরুতে থাকা :root অংশে গিয়ে --neon-blue এবং --neon-purple এর হেক্স কোড পরিবর্তন করে দিন। এছাড়া প্রশ্ন বা লেভেলের নাম পরিবর্তন করতে skill-name ক্লাসের ভেতরের টেক্সটটি আপনার পছন্দমতো লিখে দিন।

আশা করি এই অ্যানিমেটেড গেইমিং প্রগ্রেস বারটি আপনার ওয়েবসাইটের ইউজার এক্সপেরিয়েন্সকে নতুন মাত্রা দেবে। এই ধরনের আরও প্রিমিয়াম রিসোর্স ফ্রিতে পেতে আমাদের সাইট PDF Pedia BD নিয়মিত ভিজিট করুন এবং আপনার বন্ধুদের সাথে শেয়ার করুন। কোনো সমস্যা হলে কমেন্টে জানাতে ভুলবেন না।

🎬 লাইভ ডেমো দেখতে ভিডিওটি সম্পূর্ন দেখুন - 👇

নিচে সম্পূর্ণ কোডটি দেওয়া হলো:👇

Code Copy with Hover Effect

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ultimate Gaming Progress Bar - Fixed for Blogger</title>
    <style>
        /* ব্লগার রিসেট স্টাইল */
        #gaming-progress-container, 
        #gaming-progress-container * {
            box-sizing: border-box !important;
            margin: 0;
            padding: 0;
            line-height: normal;
        }

        @import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;700&display=swap');

        #gaming-progress-container {
            --neon-blue: #00d2ff;
            --neon-purple: #bd40ff;
            --bg-dark: #0f0f23;
            
            background-color: var(--bg-dark);
            font-family: 'Hind Siliguri', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            width: 100%;
            border-radius: 15px;
            color: white;
            margin: 15px 0;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .gp-inner-card {
            width: 100%;
            max-width: 550px;
            padding: 25px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .gp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .gp-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--neon-blue);
            text-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
        }

        .gp-percentage {
            font-weight: bold;
            color: var(--neon-purple);
            font-size: 1.1rem;
        }

        /* প্রগ্রেস বার কন্টেইনার */
        .gp-progress-wrapper {
            width: 100%;
            height: 22px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 50px;
            padding: 3px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* ফিল অ্যানিমেশন */
        .gp-progress-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
            border-radius: 50px;
            position: relative;
            transition: width 1.5s cubic-bezier(0.1, 0.5, 0.5, 1);
            box-shadow: 0 0 15px var(--neon-blue);
        }

        /* মুভিং স্ট্রাইপ ইফেক্ট */
        .gp-progress-fill::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.15) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.15) 50%,
                rgba(255, 255, 255, 0.15) 75%,
                transparent 75%,
                transparent
            );
            background-size: 20px 20px;
            animation: gpMoveStripes 1s linear infinite;
        }

        @keyframes gpMoveStripes {
            0% { background-position: 0 0; }
            100% { background-position: 20px 0; }
        }

        .gp-controls {
            margin-top: 25px;
            display: flex;
            gap: 8px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .gp-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--neon-blue);
            color: var(--neon-blue);
            padding: 8px 15px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: bold;
            transition: 0.3s;
            font-family: inherit;
        }

        .gp-btn:hover {
            background: var(--neon-blue);
            color: #000;
            box-shadow: 0 0 15px var(--neon-blue);
        }
    </style>
</head>
<body>

<div id="gaming-progress-container">
    <div class="gp-inner-card">
        <div class="gp-header">
            <span class="gp-title">গেইমিং লেভেল: প্রো</span>
            <span class="gp-percentage" id="gp-perc-val">0%</span>
        </div>
        
        <div class="gp-progress-wrapper">
            <div class="gp-progress-fill" id="gp-fill-bar"></div>
        </div>

        <div class="gp-controls">
            <button class="gp-btn" onclick="gpUpdate(25)">২৫%</button>
            <button class="gp-btn" onclick="gpUpdate(50)">৫০%</button>
            <button class="gp-btn" onclick="gpUpdate(85)">৮৫%</button>
            <button class="gp-btn" onclick="gpUpdate(100)">১০০%</button>
        </div>
    </div>
</div>

<script>
    function gpUpdate(val) {
        document.getElementById('gp-fill-bar').style.width = val + '%';
        document.getElementById('gp-perc-val').innerText = val + '%';
    }

    // অটো এনিমেশন অন লোড
    window.addEventListener('load', function() {
        setTimeout(() => gpUpdate(75), 800);
    });
</script>

</body>
</html>

ব্লগারে যোগ করুন প্রিমিয়াম অ্যানিমেটেড গেইমিং প্রগ্রেস বার (Free HTML/CSS Code)

গেইমিং প্রগ্রেস বার কেন ব্যবহার করবেন?

এই উইজেটটির প্রধান বৈশিষ্ট্যসমূহ:

ব্লগারে কিভাবে সেটআপ করবেন?

কাস্টমাইজ করার নিয়ম:

Post a Comment

Follow Us

টাকা ০.০০

نموذج الاتصال