أكواد لتحسين صفحات Blogger وجعلها أكثر تميزًا!

📌 هذه الأكواد مخصصة لتحسين الصفحات الثابتة في Blogger، مثل “من نحن”، “اتصل بنا”، “سياسة الخصوصية”، إلخ.

🎭 1️⃣ إضافة تأثير الكتابة الحية للعناوين (Typewriter Effect)

📌 يجعل العناوين تظهر بتأثير كتابة تلقائي عند تحميل الصفحة.

<h1 id="typewriter"></h1>

<script>

let text = "مرحبًا بك في مدونة KURDO6606 🚀";

let i = 0;

function typeEffect() {

    if (i < text.length) {

        document.getElementById("typewriter").innerHTML += text.charAt(i);

        i++;

        setTimeout(typeEffect, 100);

    }

}

window.onload = typeEffect;

</script>

✅ كيفية إضافته:

• ألصقه داخل أي صفحة ثابتة ليظهر العنوان بهذا التأثير الجميل.

📝 2️⃣ إضافة عداد لكلمات الصفحة تلقائيًا

📌 يعرض عدد الكلمات داخل الصفحة تلقائيًا.

<div id="word-count">📝 عدد الكلمات: <span id="wordCount">0</span></div>

<script>

document.addEventListener("DOMContentLoaded", function() {

    let text = document.body.innerText;

    document.getElementById("wordCount").innerText = text.split(" ").length;

});

</script>

✅ كيفية إضافته:

• ألصقه داخل أي صفحة، وسيظهر عدد الكلمات تلقائيًا عند تحميل الصفحة.

📆 3️⃣ إضافة التقويم داخل صفحة لمتابعة الأحداث القادمة

📌 يتيح لك عرض جدول زمني للأحداث داخل صفحة “فعاليات” أو “أخبار”.

<iframe src="https://calendar.google.com/calendar/embed?src=YOUR_CALENDAR_ID" style="border: 0" width="100%" height="400" frameborder="0" scrolling="no"></iframe>

✅ كيفية إضافته:

• استبدل "YOUR_CALENDAR_ID" بمعرف تقويم Google الخاص بك.

• ألصقه داخل أي صفحة ثابتة.

📊 4️⃣ إضافة عداد تنازلي لحدث معين داخل صفحة

📌 يُستخدم لعرض العد التنازلي لحدث مهم، مثل إطلاق منتج أو تحديث المدونة.

<div id="countdown">⏳ العد التنازلي: <span id="timer"></span></div>

<script>

let countDownDate = new Date("Dec 31, 2024 23:59:59").getTime();

setInterval(function() {

    let now = new Date().getTime();

    let distance = countDownDate - now;

    let days = Math.floor(distance / (1000 * 60 * 60 * 24));

    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

    let seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("timer").innerText = `${days} أيام ${hours} ساعات ${minutes} دقائق ${seconds} ثوانٍ`;

    if (distance < 0) {

        document.getElementById("countdown").innerText = "🎉 الحدث بدأ!";

    }

}, 1000);

</script>

✅ كيفية إضافته:

• استبدل التاريخ بـ التاريخ الفعلي للحدث الخاص بك.

• ألصقه داخل صفحة “فعاليات” أو “تحديثات المدونة”.

🎶 5️⃣ إضافة مشغل موسيقى بسيط داخل الصفحة

📌 يمكنك إضافة موسيقى خلفية لصفحات معينة.

<audio controls autoplay>

    <source src="https://www.example.com/music.mp3" type="audio/mpeg">

</audio>

✅ كيفية إضافته:

• استبدل "https://www.example.com/music.mp3" برابط ملف الموسيقى الخاص بك.

• ألصقه داخل أي صفحة ليعمل المشغل تلقائيًا.

🌟 6️⃣ إضافة تأثيرات ظهور عند التمرير (Fade-In Animation)

📌 يجعل النصوص والصور تظهر تدريجيًا عند التمرير لأسفل.

<style>

.fade-in {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}

</style>

<script>

document.addEventListener("scroll", function() {

    let elements = document.querySelectorAll(".fade-in");

    elements.forEach(element => {

        let rect = element.getBoundingClientRect();

        if (rect.top < window.innerHeight) {

            element.style.opacity = "1";

            element.style.transform = "translateY(0)";

        }

    });

});

</script>

<p class="fade-in">✨ هذا النص سيظهر تدريجياً عند التمرير لأسفل.</p>

✅ كيفية إضافته:

• ألصقه داخل أي صفحة، وستظهر التأثيرات عند التمرير.

📄 7️⃣ إضافة قائمة محتويات تلقائية لصفحات طويلة

📌 يتم إنشاء قائمة مرتبة استنادًا إلى العناوين داخل الصفحة.

<div id="table-of-contents">

    <h3>📌 محتويات الصفحة</h3>

    <ul id="toc-list"></ul>

</div>

<script>

document.addEventListener("DOMContentLoaded", function() {

    let headers = document.querySelectorAll("h2, h3");

    let tocList = document.getElementById("toc-list");

    

    headers.forEach((header, index) => {

        let link = document.createElement("a");

        link.textContent = header.innerText;

        link.href = "#" + header.id;

        let listItem = document.createElement("li");

        listItem.appendChild(link);

        tocList.appendChild(listItem);

    });

});

</script>

✅ كيفية إضافته:

• ألصقه داخل أي صفحة تحتوي على عناوين متعددة.

• سيتم إنشاء فهرس تلقائي للصفحة لمساعدة الزوار في التنقل بسهولة.

📌 كيفية إضافة هذه الأكواد في Blogger؟

✅ انتقل إلى “الصفحات” (Pages) → “صفحة جديدة”.

✅ ألصق الأكواد التي تريدها داخل الصفحة.

✅ احفظ الصفحة وانشرها.