صفحة الفهرس (الأرشيف)
بواسطة morbah |
صفحة الفهرس (Sitemap) مهمة جداً لمساعدة الزوار في الوصول لمحتواك القديم، ومفيدة لمحركات البحث.
<style>
/* كود تنسيق الفهرس */
#sitemap-container { font-family: 'Tajawal', sans-serif; }
.sitemap-tab { display: inline-block; padding: 10px 20px; margin: 0 5px 10px 0; background: var(--bg-hover, #f1f5f9); color: var(--text-secondary, #555); border-radius: 50px; cursor: pointer; font-weight: bold; transition: 0.3s; border: 1px solid var(--border-color, #eee); }
.sitemap-tab:hover, .sitemap-tab.active { background: var(--accent-blue, #3b82f6); color: #fff; border-color: var(--accent-blue, #3b82f6); }
.sitemap-content { display: none; margin-top: 20px; animation: fadeIn 0.5s; }
.sitemap-content.active { display: block; }
.sitemap-post { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border-color, #eee); }
.sitemap-post a { text-decoration: none; color: var(--text-primary, #333); font-weight: 600; flex: 1; transition: 0.2s; }
.sitemap-post a:hover { color: var(--accent-blue, #3b82f6); padding-right: 5px; }
.sitemap-date { font-size: 12px; color: var(--text-secondary, #999); margin-right: 10px; white-space: nowrap; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
</style>
<div id="sitemap-container">
<div id="sitemap-tabs"></div>
<div id="sitemap-results">جاري تحميل المقالات...</div>
</div>
<script>
//<![CDATA[
(function() {
var container = document.getElementById('sitemap-container');
var tabsContainer = document.getElementById('sitemap-tabs');
var resultsContainer = document.getElementById('sitemap-results');
var posts = [];
// جلب المقالات
fetch('/feeds/posts/summary?alt=json&max-results=500')
.then(res => res.json())
.then(data => {
if (data.feed.entry) {
posts = data.feed.entry;
createSitemap();
} else {
resultsContainer.innerHTML = 'لا توجد مقالات.';
}
});
function createSitemap() {
var categories = {};
// تصنيف المقالات
posts.forEach(post => {
if (post.category) {
post.category.forEach(cat => {
if (!categories[cat.term]) categories[cat.term] = [];
categories[cat.term].push(post);
});
}
});
// إنشاء التبويبات
var tabsHtml = '<span class="sitemap-tab active" onclick="filterSitemap(\'all\', this)">الكل</span>';
for (var cat in categories) {
tabsHtml += '<span class="sitemap-tab" onclick="filterSitemap(\'' + cat + '\', this)">' + cat + '</span>';
}
tabsContainer.innerHTML = tabsHtml;
// عرض الكل افتراضياً
filterSitemap('all', tabsContainer.firstChild);
}
window.filterSitemap = function(cat, btn) {
// تفعيل الزر
var tabs = document.querySelectorAll('.sitemap-tab');
tabs.forEach(t => t.classList.remove('active'));
btn.classList.add('active');
// فلترة المقالات
var filteredPosts = [];
if (cat === 'all') {
filteredPosts = posts;
} else {
filteredPosts = posts.filter(p => {
return p.category && p.category.some(c => c.term === cat);
});
}
// عرض النتائج
var html = '';
filteredPosts.forEach(p => {
var title = p.title.$t;
var link = p.link.find(l => l.rel === 'alternate').href;
var date = new Date(p.published.$t).toLocaleDateString('ar-EG');
html += '<div class="sitemap-post"><a href="' + link + '" target="_blank">' + title + '</a><span class="sitemap-date">' + date + '</span></div>';
});
resultsContainer.innerHTML = '<div class="sitemap-content active">' + html + '</div>';
};
})();
//]]>
</script>
📌 طريقة التركيب:
- اذهب إلى لوحة تحكم بلوجر > الصفحات (Pages).
- أنشئ صفحة جديدة بعنوان "الفهرس" أو "Sitemap".
- من إعدادات الصفحة (يسار الشاشة) > خيارات > اختر عدم السماح بالتعليقات.
- حول المحرر إلى وضع عرض HTML.
- انسخ الكود من الصندوق الأسود بالأعلى والصقه في الصفحة.
- اضغط نشر.
<!--انسخ الكود وضعه في صفحة جديدة باسم: صفحة الفهرس (Sitemap)-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap');
.sitemap-doc-wrapper {
font-family: 'Tajawal', sans-serif;
direction: rtl;
text-align: right;
color: #334155;
background: #fff;
padding: 30px;
border-radius: 16px;
border: 1px solid #e2e8f0;
}
.sitemap-header {
text-align: center;
margin-bottom: 40px;
background: #f0fdf4;
padding: 30px;
border-radius: 12px;
border-bottom: 4px solid #10b981;
}
.sitemap-header h1 { margin: 0 0 10px; color: #064e3b; font-weight: 900; font-size: 32px; }
.sitemap-header p { font-size: 16px; color: #065f46; }
/* منطقة الكود */
.code-output {
position: relative;
background: #1e293b;
border-radius: 12px;
padding: 20px;
direction: ltr;
text-align: left;
margin-top: 20px;
border: 1px solid #334155;
}
.code-pre {
color: #6ee7b7;
font-family: monospace;
font-size: 13px;
white-space: pre-wrap;
word-break: break-all;
max-height: 400px;
overflow-y: auto;
}
.copy-code-btn {
position: absolute; top: 15px; right: 15px;
background: rgba(255,255,255,0.15); color: #fff; border: none;
padding: 8px 15px; border-radius: 6px; cursor: pointer;
font-family: 'Tajawal'; font-size: 13px; font-weight: bold;
backdrop-filter: blur(5px); transition: 0.2s;
}
.copy-code-btn:hover { background: #10b981; }
.steps-box {
margin-top: 30px;
padding: 20px;
border: 1px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
}
.steps-box h3 { margin-top: 0; color: #334155; }
.steps-box li { margin-bottom: 10px; }
</style>
<div class="sitemap-doc-wrapper">
<div class="sitemap-header">
<h1>صفحة الفهرس (الأرشيف) 🗺️</h1>
<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhTKO7U3sRikkrF3KMTwdzDJH_brFzc1qb93MZMRj-u7tXTgjJFJsMd84-LGyTb0HkjY0GhvIpwLxzqHT4H9v52YhfYsfhPLxy8r0jYSENCuT57c4SrspOTTw14tR-X-UQt-aSXX9OvX6q0cqpzmawhNWVPHyBsDWkD4cFTR4E_bN0vVZjRLSXeiSyKSBw" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="720" data-original-width="1280" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEhTKO7U3sRikkrF3KMTwdzDJH_brFzc1qb93MZMRj-u7tXTgjJFJsMd84-LGyTb0HkjY0GhvIpwLxzqHT4H9v52YhfYsfhPLxy8r0jYSENCuT57c4SrspOTTw14tR-X-UQt-aSXX9OvX6q0cqpzmawhNWVPHyBsDWkD4cFTR4E_bN0vVZjRLSXeiSyKSBw=s16000-rw" /></a></div><br /><br /><p></p><p>كيفية إنشاء صفحة تجمع كل مقالات مدونتك مصنفة بشكل تلقائي وجميل.</p>
</div>
<p>صفحة الفهرس (Sitemap) مهمة جداً لمساعدة الزوار في الوصول لمحتواك القديم، ومفيدة لمحركات البحث.</p>
<div class="code-output">
<button class="copy-code-btn" onclick="copySitemapCode(this)">نسخ الكود 📋</button>
<div class="code-pre" id="sitemapCode">
<style>
/* كود تنسيق الفهرس */
#sitemap-container { font-family: 'Tajawal', sans-serif; }
.sitemap-tab { display: inline-block; padding: 10px 20px; margin: 0 5px 10px 0; background: var(--bg-hover, #f1f5f9); color: var(--text-secondary, #555); border-radius: 50px; cursor: pointer; font-weight: bold; transition: 0.3s; border: 1px solid var(--border-color, #eee); }
.sitemap-tab:hover, .sitemap-tab.active { background: var(--accent-blue, #3b82f6); color: #fff; border-color: var(--accent-blue, #3b82f6); }
.sitemap-content { display: none; margin-top: 20px; animation: fadeIn 0.5s; }
.sitemap-content.active { display: block; }
.sitemap-post { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border-color, #eee); }
.sitemap-post a { text-decoration: none; color: var(--text-primary, #333); font-weight: 600; flex: 1; transition: 0.2s; }
.sitemap-post a:hover { color: var(--accent-blue, #3b82f6); padding-right: 5px; }
.sitemap-date { font-size: 12px; color: var(--text-secondary, #999); margin-right: 10px; white-space: nowrap; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
</style>
<div id="sitemap-container">
<div id="sitemap-tabs"></div>
<div id="sitemap-results">جاري تحميل المقالات...</div>
</div>
<script>
//<![CDATA[
(function() {
var container = document.getElementById('sitemap-container');
var tabsContainer = document.getElementById('sitemap-tabs');
var resultsContainer = document.getElementById('sitemap-results');
var posts = [];
// جلب المقالات
fetch('/feeds/posts/summary?alt=json&max-results=500')
.then(res => res.json())
.then(data => {
if (data.feed.entry) {
posts = data.feed.entry;
createSitemap();
} else {
resultsContainer.innerHTML = 'لا توجد مقالات.';
}
});
function createSitemap() {
var categories = {};
// تصنيف المقالات
posts.forEach(post => {
if (post.category) {
post.category.forEach(cat => {
if (!categories[cat.term]) categories[cat.term] = [];
categories[cat.term].push(post);
});
}
});
// إنشاء التبويبات
var tabsHtml = '<span class="sitemap-tab active" onclick="filterSitemap(\'all\', this)">الكل</span>';
for (var cat in categories) {
tabsHtml += '<span class="sitemap-tab" onclick="filterSitemap(\'' + cat + '\', this)">' + cat + '</span>';
}
tabsContainer.innerHTML = tabsHtml;
// عرض الكل افتراضياً
filterSitemap('all', tabsContainer.firstChild);
}
window.filterSitemap = function(cat, btn) {
// تفعيل الزر
var tabs = document.querySelectorAll('.sitemap-tab');
tabs.forEach(t => t.classList.remove('active'));
btn.classList.add('active');
// فلترة المقالات
var filteredPosts = [];
if (cat === 'all') {
filteredPosts = posts;
} else {
filteredPosts = posts.filter(p => {
return p.category && p.category.some(c => c.term === cat);
});
}
// عرض النتائج
var html = '';
filteredPosts.forEach(p => {
var title = p.title.$t;
var link = p.link.find(l => l.rel === 'alternate').href;
var date = new Date(p.published.$t).toLocaleDateString('ar-EG');
html += '<div class="sitemap-post"><a href="' + link + '" target="_blank">' + title + '</a><span class="sitemap-date">' + date + '</span></div>';
});
resultsContainer.innerHTML = '<div class="sitemap-content active">' + html + '</div>';
};
})();
//]]>
</script>
</div>
</div>
<div class="steps-box">
<h3>📌 طريقة التركيب:</h3>
<ol>
<li>اذهب إلى لوحة تحكم بلوجر > <b>الصفحات (Pages)</b>.</li>
<li>أنشئ <b>صفحة جديدة</b> بعنوان "الفهرس" أو "Sitemap".</li>
<li>من إعدادات الصفحة (يسار الشاشة) > خيارات > اختر <b>عدم السماح بالتعليقات</b>.</li>
<li>حول المحرر إلى وضع <b>عرض HTML</b>.</li>
<li>انسخ الكود من الصندوق الأسود بالأعلى والصقه في الصفحة.</li>
<li>اضغط <b>نشر</b>.</li>
</ol>
</div>
</div>
<script>
function copySitemapCode(btn) {
const code = document.getElementById('sitemapCode').innerText;
navigator.clipboard.writeText(code).then(() => {
btn.innerText = 'تم النسخ! ✅';
btn.style.background = '#10b981';
setTimeout(() => {
btn.innerText = 'نسخ الكود 📋';
btn.style.background = 'rgba(255,255,255,0.15)';
}, 2000);
});
}
</script>
انا مهتم بمجال التقنية والربح من الانترنت واتطلع لنشر المزيد من المقالات التي تفيدكم
![Author](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240" role="img" aria-label="Default profile avatar"%3E%3Cdefs%3E%3ClinearGradient id="g" x1="0" x2="1" y1="0" y2="1"%3E%3Cstop offset="0" stop-color="%236db3f2"/%3E%3Cstop offset="1" stop-color="%234a90e2"/%3E%3C/linearGradient%3E%3Cfilter id="soft" x="-50%25" y="-50%25" width="200%25" height="200%25"%3E%3CfeDropShadow dx="0" dy="6" stdDeviation="12" flood-opacity="0.12"/%3E%3C/filter%3E%3C/defs%3E%3Cg transform="translate(120,120)"%3E%3Ccircle r="108" fill="url(%23g)" filter="url(%23soft)"/%3E%3Ccircle r="88" fill="rgba(255,255,255,0.06)"/%3E%3C/g%3E%3Cg transform="translate(120,120)"%3E%3Ccircle cx="0" cy="-24" r="28" fill="%23ffffff" fill-opacity="0.95"/%3E%3Cpath d="M-56,64 C-56,36 -36,16 0,16 C36,16 56,36 56,64 L56,76 C56,88 44,100 0,100 C-44,100 -56,88 -56,76 Z" fill="%23ffffff" fill-opacity="0.95"/%3E%3Cellipse cx="0" cy="72" rx="52" ry="12" fill="%23000" opacity="0.04"/%3E%3C/g%3E%3C/svg%3E){kind=avatar}
تعليقات
إرسال تعليق