🚀 مزيد من التخصيص والاحترافية لصفحات Blogger!
📌 ما الذي سأضيفه الآن؟
✅ 📜 إضافة زر تحميل PDF للصفحات الثابتة 📥
✅ 🔄 إنشاء جدول محتويات تلقائي للصفحات الطويلة 📑
✅ 📌 تثبيت شريط إعلان أعلى الصفحات مع إمكانية إغلاقه 🔔
✅ 🔍 تحسين البحث داخل الصفحة لمساعدة المستخدمين 🔎
✅ 🎭 تأثير عرض تدريجي للنصوص في الصفحة ✨
✅ 🖼️ عرض صور متحركة عند التمرير (Parallax Scrolling Effect) 🌟
✅ 🎶 إضافة موسيقى خلفية تعمل تلقائيًا 🎵
1️⃣ 📥 إضافة زر تحميل PDF للصفحات الثابتة
📌 يمكنك السماح للزوار بتحميل محتوى الصفحة كملف PDF بسهولة.
<button onclick="downloadPageAsPDF()">📄 تحميل هذه الصفحة</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script>
function downloadPageAsPDF() {
var { jsPDF } = window.jspdf;
var doc = new jsPDF();
doc.text(document.body.innerText, 10, 10);
doc.save("الصفحة.pdf");
}
</script>
✅ يسمح للزوار بحفظ الصفحة بصيغة PDF لقراءتها لاحقًا.
2️⃣ 📑 إنشاء جدول محتويات تلقائي للصفحات الطويلة
📌 يتم إنشاء قائمة مرتبة تعتمد على العناوين داخل الصفحة.
<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>
✅ يساعد المستخدمين في التنقل بسهولة داخل الصفحة.
3️⃣ 🔔 تثبيت شريط إعلان أعلى الصفحات مع إمكانية إغلاقه
📌 يمكن استخدامه كإعلان أو تنبيه هام.
<div id="top-banner">
⚠️ عرض خاص: تابع مدونتنا الآن للحصول على تحديثات مهمة!
<button onclick="document.getElementById('top-banner').style.display='none'">❌</button>
</div>
<style>
#top-banner {
background: #ffcc00;
text-align: center;
padding: 10px;
font-weight: bold;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
}
</style>
✅ يمكن للزوار إغلاق الشريط بسهولة.
4️⃣ 🔎 تحسين البحث داخل الصفحة لمساعدة المستخدمين
📌 يسمح للمستخدمين بالبحث عن أي كلمة داخل الصفحة بسهولة.
<input type="text" id="search-box" placeholder="🔍 ابحث في هذه الصفحة...">
<button onclick="searchText()">🔎 بحث</button>
<script>
function searchText() {
let searchTerm = document.getElementById("search-box").value;
if (searchTerm) {
window.find(searchTerm);
}
}
</script>
✅ يساعد الزوار في العثور على المعلومات بسرعة داخل الصفحة.
5️⃣ ✨ تأثير عرض تدريجي للنصوص في الصفحة
📌 يجعل النصوص تظهر بشكل تدريجي عند التمرير لزيادة التفاعل.
<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>
✅ يجعل تجربة القراءة أكثر ديناميكية وجاذبية.
6️⃣ 🌟 عرض صور متحركة عند التمرير (Parallax Scrolling Effect)
📌 يضيف تأثيرًا جميلاً للصور عند تمرير الصفحة.
<div class="parallax"></div>
<style>
.parallax {
background-image: url('https://via.placeholder.com/1200x500');
height: 300px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
✅ يعطي المدونة مظهرًا احترافيًا وحديثًا.
7️⃣ 🎵 إضافة موسيقى خلفية تعمل تلقائيًا
📌 يمكنك تشغيل موسيقى خفيفة للزوار عند فتح الصفحة.
<audio autoplay loop>
<source src="https://www.example.com/music.mp3" type="audio/mpeg">
</audio>
✅ يمكن استبدال "https://www.example.com/music.mp3" بأي رابط ملف صوتي.
📌 كيفية إضافة هذه الأكواد إلى Blogger؟
✅ انتقل إلى “الصفحات” (Pages) → “صفحة جديدة”.
✅ ألصق الأكواد التي تريدها داخل الصفحة.
✅ احفظ الصفحة وانشرها.