كيفية إضافة خريطة موقع HTML في Blogger (4 أنماط جديدة)

 <ul></ul>

    <نوع البرنامج النصي = "نص/جافا سكريبت">
        فار نومبوست = 100؛ // قم بتغيير هذه القيمة إذا كان لديك أكثر من 100 مشاركة
        وظيفة العرضrecentposts(json) {
            var sitemap = document.getElementById("sitemap");
            for (var i = 0; i < json.feed.entry.length; i++) {
                إدخال var = json.feed.entry[i];
                var posttitle = input.title.$t;
                فار بوستورل؛
                لـ (var k = 0; k <entry.link.length; k++) {
                    إذا (entry.link[k].rel == 'alternate') {
                        posturl = input.link[k].href;
                        استراحة؛
                    }
                }
                var listItem = document.createElement("li");
                listItem.innerHTML = `<a href="${posturl}">${posttitle}</a>`;
                sitemap.appendChild(listItem);
            }
        }

        var script = document.createElement("script");
        script.src = " https://example.com /feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
        document.body.appendChild(script);
    </script>
<نمط>
 #خريطة الموقع {
            نوع نمط القائمة: لا شيء؛
            الحشو: 0؛
            الهامش: 0;
            الهامش: تلقائي؛
            لون الخلفية: #f8f9fa؛
            نصف قطر الحدود: 5 بكسل؛
            ظل الصندوق: 0 2px 5px rgba(0, 0, 0, 0.1);
            الحد الأدنى للارتفاع: 800 بكسل؛ 
            الانتقال: كل 0.3 ثانية سهولة؛ 
        }

        #خريطة الموقع لي {
            الحشو: 8 بكسل 15 بكسل؛
            الحد السفلي: 1 بكسل صلب #e0e0e0؛
            الانتقال: الخلفية 0.2 ثانية، التحويل 0.2 ثانية؛
            الانتقال: الخلفية 0.2 ثانية؛
            الحد الأيسر: 4 بكسل أسود خالص؛
          الهامش السفلي: 4 بكسل؛
        }
   #خريطة الموقع:hover{
     الحد الأيسر: 4 بكسل أزرق خالص؛ تحويل: ترجمةY(-2px);}

        #خريطة الموقع li:last-child {
            الحد السفلي: لا شيء؛
        }

        #خريطة الموقع أ {
            زخرفة النص: لا شيء؛
            اللون: أسود؛
            حجم الخط: 19 بكسل؛
            عرض: كتلة؛
          الانتقال: اللون 0.2 ثانية؛
        }

        #خريطة الموقع أ:تحوم {
            اللون: أزرق؛
        }
    </نمط>

 <ul></ul>

<نوع البرنامج النصي = "نص/جافا سكريبت">
    فار نومبوست = 100؛ // قم بتغيير هذه القيمة إذا كان لديك أكثر من 100 مشاركة
    وظيفة العرضrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        for (var i = 0; i < json.feed.entry.length; i++) {
            إدخال var = json.feed.entry[i];
            var posttitle = input.title.$t;
            فار بوستورل؛
            
            // استخراج التسميات (إن وجدت) وإنشاء الروابط
            var postlabels = '';
            إذا (إدخال. الفئة) {
                postlabels = input.category.map(cat => {
                    تسمية فار = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).ينضم(' ')؛
            } آخر {
                postlabels = '<span class="no-label">بدون تسمية</span>';
            }

            لـ (var k = 0; k <entry.link.length; k++) {
                إذا (entry.link[k].rel == 'alternate') {
                    posturl = input.link[k].href;
                    استراحة؛
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class="post-item">
                    <a href="${posturl}" class="post-title">${posttitle}</a>
                    <div class="post-labels">${postlabels</div>
                </div>`;
            sitemap.appendChild(listItem);
        }
    }

    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(script);
</script>

<نمط>
    #خريطة الموقع {
        نوع نمط القائمة: لا شيء؛
        الحشو: 0؛
        الهامش: 0;
        الهامش: تلقائي؛
        لون الخلفية: #f8f9fa؛
        نصف قطر الحدود: 5 بكسل؛
        ظل الصندوق: 0 2px 5px rgba(0, 0, 0, 0.1);
        الحد الأدنى للارتفاع: 800 بكسل؛
        الانتقال: كل 0.3 ثانية سهولة؛
    }

    #خريطة الموقع لي {
        الحشو: 8 بكسل 15 بكسل؛
        الحد السفلي: 1 بكسل صلب #e0e0e0؛
        الانتقال: الخلفية 0.2 ثانية، التحويل 0.2 ثانية؛
        الحد الأيسر: 4 بكسل أسود خالص؛
        الهامش السفلي: 4 بكسل؛
    }

    #خريطة الموقع:hover {
        الحد الأيسر: 4 بكسل أزرق خالص؛
        تحويل: ترجمةY(-2px);
    }

    #خريطة الموقع li:last-child {
        الحد السفلي: لا شيء؛
    }

    .ما بعد البند {
        العرض: فليكس؛
        ضبط المحتوى: مسافة بين؛
        محاذاة العناصر: مركز؛
    }

    .ما بعد العنوان {
        زخرفة النص: لا شيء؛
        اللون: أسود؛
        حجم الخط: 19 بكسل؛
        عرض: كتلة؛
        الانتقال: اللون 0.2 ثانية؛
    }

    .بعد العنوان:تحوم {
        اللون: أزرق؛
    }

    .ما بعد التسميات {
        العرض: فليكس؛
        الفجوة: 5 بكسل؛
    }

    .زر التسمية {
    لون الخلفية: #48525c؛
    اللون: #ffffff؛
    الحشو: 0px 20px؛
    نصف قطر الحدود: 5 بكسل؛
    زخرفة النص: لا شيء؛
    حجم الخط: 14 بكسل؛
    ارتفاع الخط: 25 بكسل؛
    الانتقال: سهولة لون الخلفية بمقدار 0.2 ثانية؛
}

    .زر التسمية:تحوم {
        لون الخلفية: #0056b3؛
    }

    .لا التسمية {
        اللون: #555؛
        حجم الخط: 14 بكسل؛
    }

    /* مستجيبة */
    @media (أقصى عرض: 768 بكسل) {
        .ما بعد البند {
            الاتجاه المرن: العمود؛
            محاذاة العناصر: البداية المرنة؛
        }

        .ما بعد التسميات {
            الهامش العلوي: 5 بكسل؛
        }
    }
</نمط>

 <div class="filter-container">
    <label for="labelFilter">التصفية حسب التصنيف: </label>
    <select onchange="filterByLabel()">
        <option value="all">الكل</option>
    </حدد>
</div>

<ul></ul>

<نوع البرنامج النصي = "نص/جافا سكريبت">
    var allPosts = []; // قم بتخزين كافة المشاركات هنا
    var UniqueLabels = new Set(); // لتخزين التسميات الفريدة

    // جلب وعرض المشاركات الأخيرة
    وظيفة العرضrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        allPosts = json.feed.entry; // قم بتخزين جميع المشاركات للتصفية

        // إنشاء تسميات فريدة للمرشح
        allPosts.forEach(وظيفة(إدخال) {
            إذا (إدخال. الفئة) {
                enter.category.forEach(function(cat) {
                    UniqueLabels.add(cat.term);
                });
            }
        });

        // قم بملء القائمة المنسدلة للمرشح بالتسميات
        var labelFilter = document.getElementById("labelFilter");
        UniqueLabels.forEach(وظيفة(التسمية) {
            خيار فار = document.createElement("option");
            option.value = label;
            option.textContent = label;
            labelFilter.appendChild(option);
        });

        DisplayPosts(allPosts); // في البداية عرض جميع المشاركات
    }

    // وظيفة لعرض المشاركات التي تمت تصفيتها
    وظيفة عرض المشاركات (المشاركات) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; // مسح المشاركات الحالية

        المشاركات.forEach(وظيفة(إدخال) {
            var posttitle = input.title.$t;
            فار بوستورل؛
            var postlabels = '';

            إذا (إدخال. الفئة) {
                postlabels = input.category.map(cat => {
                    تسمية فار = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).ينضم(' ')؛
            } آخر {
                postlabels = '<span class="no-label">بدون تسمية</span>';
            }

            لـ (var k = 0; k <entry.link.length; k++) {
                إذا (entry.link[k].rel == 'alternate') {
                    posturl = input.link[k].href;
                    استراحة؛
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class="post-item">
                    <a href="${posturl}" class="post-title">${posttitle}</a>
                    <div class="post-labels">${postlabels</div>
                </div>`;
            sitemap.appendChild(listItem);
        });
    }

    // وظيفة تصفية المشاركات حسب التصنيف المحدد
    وظيفة تصفيةByLabel() {
        var SelectedLabel = document.getElementById("labelFilter").value;

        إذا (selectedLabel === "الكل") {
            DisplayPosts(allPosts); // عرض كافة المشاركات إذا تم تحديد "الكل".
        } آخر {
            فار filteredPosts = allPosts.filter(function(entry) {
                return input.category &&entry.category.some(cat => cat.term === SelectLabel);
            });
            DisplayPosts(filteredPosts); // عرض المشاركات التي تمت تصفيتها فقط
        }
    }

    // تحميل المشاركات الأخيرة باستخدام البرنامج النصي
    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(script);
</script>

<نمط>
    /* تصميم القائمة المنسدلة للمرشح */
    حاوية التصفية {
        الهامش: 20 بكسل 0؛
        محاذاة النص: مركز؛
    }

    #labelFilter {
        الحشو: 5 بكسل 10 بكسل؛
        حجم الخط: 16 بكسل؛
    }

    /* خريطة الموقع وأنماط عناصر النشر */
    #خريطة الموقع {
        نوع نمط القائمة: لا شيء؛
        الحشو: 0؛
        الهامش: 0;
        الهامش: تلقائي؛
        لون الخلفية: #f8f9fa؛
        نصف قطر الحدود: 5 بكسل؛
        ظل الصندوق: 0 2px 5px rgba(0, 0, 0, 0.1);
        الحد الأدنى للارتفاع: 800 بكسل؛
        الانتقال: كل 0.3 ثانية سهولة؛
    }

    #خريطة الموقع لي {
        الحشو: 8 بكسل 15 بكسل؛
        الحد السفلي: 1 بكسل صلب #e0e0e0؛
        الانتقال: الخلفية 0.2 ثانية، التحويل 0.2 ثانية؛
        الحد الأيسر: 4 بكسل أسود خالص؛
        الهامش السفلي: 4 بكسل؛
    }

    #خريطة الموقع:hover {
        الحد الأيسر: 4 بكسل أزرق خالص؛
        تحويل: ترجمةY(-2px);
    }

    #خريطة الموقع li:last-child {
        الحد السفلي: لا شيء؛
    }

    .ما بعد البند {
        العرض: فليكس؛
        ضبط المحتوى: مسافة بين؛
        محاذاة العناصر: مركز؛
    }

    .ما بعد العنوان {
        زخرفة النص: لا شيء؛
        اللون: أسود؛
        حجم الخط: 19 بكسل؛
        عرض: كتلة؛
        الانتقال: اللون 0.2 ثانية؛
    }

    .بعد العنوان:تحوم {
        اللون: أزرق؛
    }

    .ما بعد التسميات {
        العرض: فليكس؛
        الفجوة: 5 بكسل؛
    }

    .زر التسمية {
        لون الخلفية: #48525c؛
        اللون: #ffffff؛
        الحشو: 0px 20px؛
        نصف قطر الحدود: 5 بكسل؛
        زخرفة النص: لا شيء؛
        حجم الخط: 14 بكسل؛
        ارتفاع الخط: 25 بكسل؛
        الانتقال: سهولة لون الخلفية بمقدار 0.2 ثانية؛
    }

    .زر التسمية:تحوم {
        لون الخلفية: #0056b3؛
    }

    .لا التسمية {
        اللون: #555؛
        حجم الخط: 14 بكسل؛
    }

    /* مستجيبة */
    @media (أقصى عرض: 768 بكسل) {
        .ما بعد البند {
            الاتجاه المرن: العمود؛
            محاذاة العناصر: البداية المرنة؛
        }

        .ما بعد التسميات {
            الهامش العلوي: 5 بكسل؛
        }
    }
</نمط>

 <div class="filter-container">
    <button class="filter-button">الكل</button>
    <!--سيتم إدراج أزرار التسمية ديناميكيًا هنا-->
</div>

<ul></ul>

<نوع البرنامج النصي = "نص/جافا سكريبت">
    var allPosts = []; // قم بتخزين كافة المشاركات هنا
    var UniqueLabels = new Set(); // لتخزين التسميات الفريدة

    وظيفة العرضrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        allPosts = json.feed.entry; // قم بتخزين جميع المشاركات للتصفية

        allPosts.forEach(وظيفة(إدخال) {
            إذا (إدخال. الفئة) {
                enter.category.forEach(function(cat) {
                    UniqueLabels.add(cat.term);
                });
            }
        });

        var filterContainer = document.querySelector('.filter-container');
        UniqueLabels.forEach(وظيفة(التسمية) {
            زر var = document.createElement("button");
            Button.className = "زر التصفية"؛
            Button.textContent = label;
            Button.onclick = function() { filterByLabel(label); };
            filterContainer.appendChild(button);
        });

        DisplayPosts(allPosts); // عرض كافة المشاركات في البداية
    }

    وظيفة عرض المشاركات (المشاركات) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; // امسح قائمة خريطة الموقع

        المشاركات.forEach(وظيفة(إدخال) {
            var posttitle = input.title.$t;
            فار بوستورل؛
            var postlabels = '';

            إذا (إدخال. الفئة) {
                postlabels = input.category.map(cat => {
                    تسمية فار = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    return `<a href="${labelurl}" class="label-button">${label}</a>`;
                }).ينضم(' ')؛
            } آخر {
                postlabels = '<span class="no-label">بدون تسمية</span>';
            }

            لـ (var k = 0; k <entry.link.length; k++) {
                إذا (entry.link[k].rel == 'alternate') {
                    posturl = input.link[k].href;
                    استراحة؛
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class="post-item">
                    <a href="${posturl}" class="post-title">${posttitle}</a>
                    <div class="post-labels">${postlabels</div>
                </div>`;
            sitemap.appendChild(listItem);
        });
    }

    وظيفة تصفيةByLabel(التسمية) {
        إذا (التسمية === 'الكل') {
            DisplayPosts(allPosts);
        } آخر {
            فار filteredPosts = allPosts.filter(function(entry) {
                return enter.category &&entry.category.some(cat => cat.term === label);
            });
            DisplayPosts(filteredPosts);
        }
    }

    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(script);
</script>

<نمط>
    /* نمط حاوية التصفية */
    حاوية التصفية {
        محاذاة النص: مركز؛
        الهامش: 20 بكسل 0؛
    }

    /* أزرار التصفية على شكل حبوب منع الحمل */
    زر التصفية {
        لون الخلفية: #007bff؛
        الحدود: لا شيء؛
        اللون: أبيض؛
        الحشو: 10 بكسل 20 بكسل؛
        الهامش: 5 بكسل؛
        نصف قطر الحدود: 5 بكسل؛
        حجم الخط: 16 بكسل؛
        المؤشر: المؤشر؛
        الانتقال: سهولة لون الخلفية بمقدار 0.3 ثانية؛
    }

    .زر التصفية:تحوم {
        لون الخلفية: #0056b3؛
    }

    /* نمط خريطة الموقع وعناصر النشر */
    #خريطة الموقع {
        نوع نمط القائمة: لا شيء؛
        الحشو: 0؛
        الهامش: 0;
        الهامش: تلقائي؛
        لون الخلفية: #f8f9fa؛
        نصف قطر الحدود: 5 بكسل؛
        ظل الصندوق: 0 2px 5px rgba(0, 0, 0, 0.1);
        الحد الأدنى للارتفاع: 800 بكسل؛
        الانتقال: كل 0.3 ثانية سهولة؛
    }

    #خريطة الموقع لي {
        الحشو: 8 بكسل 15 بكسل؛
        الحد السفلي: 1 بكسل صلب #e0e0e0؛
        الانتقال: الخلفية 0.2 ثانية، التحويل 0.2 ثانية؛
        الحد الأيسر: 4 بكسل أسود خالص؛
        الهامش السفلي: 4 بكسل؛
    }

    #خريطة الموقع:hover {
        الحد الأيسر: 4 بكسل أزرق خالص؛
        تحويل: ترجمةY(-2px);
    }

    #خريطة الموقع li:last-child {
        الحد السفلي: لا شيء؛
    }

    .ما بعد البند {
        العرض: فليكس؛
        ضبط المحتوى: مسافة بين؛
        محاذاة العناصر: مركز؛
    }

    .ما بعد العنوان {
        زخرفة النص: لا شيء؛
        اللون: أسود؛
        حجم الخط: 19 بكسل؛
        عرض: كتلة؛
        الانتقال: اللون 0.2 ثانية؛
    }

    .بعد العنوان:تحوم {
        اللون: أزرق؛
    }

    .ما بعد التسميات {
        العرض: فليكس؛
        الفجوة: 5 بكسل؛
    }

    .زر التسمية {
        لون الخلفية: #48525c؛
        اللون: #ffffff؛
        الحشو: 0px 20px؛
        نصف قطر الحدود: 5 بكسل؛
        زخرفة النص: لا شيء؛
        حجم الخط: 14 بكسل؛
        ارتفاع الخط: 25 بكسل؛
        الانتقال: سهولة لون الخلفية بمقدار 0.2 ثانية؛
    }

    .زر التسمية:تحوم {
        لون الخلفية: #0056b3؛
    }

    .لا التسمية {
        اللون: #555؛
        حجم الخط: 14 بكسل؛
    }

    /* مستجيبة */
    @media (أقصى عرض: 768 بكسل) {
        .ما بعد البند {
            الاتجاه المرن: العمود؛
            محاذاة العناصر: البداية المرنة؛
        }

        .ما بعد التسميات {
            الهامش العلوي: 5 بكسل؛
        }
    }
</نمط>