🚀 الأكواد المميزة التي يمكنك إضافتها إلى مدونتك على Blogger!
📌 ما الذي سأضيفه الآن؟
✅ 🕹️ أداة تحويل النصوص إلى صوت (Text-to-Speech) 🔊
✅ 📄 زر تحميل المقال كملف PDF 📥
✅ 📌 قائمة التنقل الجانبية القابلة للفتح والإغلاق (Sidebar Menu) 📜
✅ 📅 ويدجت عرض الوقت والتاريخ الحالي 🕰️
✅ 🖼️ معرض صور متحرك داخل المقالات 🎞️
✅ 💬 زر واتساب عائم للتواصل مع الزوار 📲
✅ 💡 تأثيرات جميلة عند التمرير والضغط على الروابط ✨
1️⃣ 🔊 أداة تحويل النصوص إلى صوت (Text-to-Speech)
<button onclick="speakText()">🔊 استمع إلى هذا المقال</button>
<script>
function speakText() {
let text = document.body.innerText;
let speech = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(speech);
}
</script>
✅ هذه الميزة تجعل المدونة أكثر سهولة للأشخاص الذين يفضلون الاستماع بدلاً من القراءة.
2️⃣ 📥 زر تحميل المقال كملف PDF
<button onclick="downloadPDF()">📄 تحميل المقال PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script>
function downloadPDF() {
var { jsPDF } = window.jspdf;
var doc = new jsPDF();
doc.text(document.body.innerText, 10, 10);
doc.save("المقال.pdf");
}
</script>
✅ يتيح للزوار تحميل المقالات وقراءتها لاحقًا بدون اتصال بالإنترنت.
3️⃣ 📜 قائمة التنقل الجانبية القابلة للفتح والإغلاق (Sidebar Menu)
<button onclick="toggleMenu()">📌 فتح القائمة</button>
<div id="sidebar">
<a href="#">🏠 الرئيسية</a>
<a href="#">📝 مقالات</a>
<a href="#">📩 تواصل معنا</a>
</div>
<style>
#sidebar {
position: fixed;
left: -250px;
top: 0;
width: 250px;
height: 100%;
background: #007bff;
padding: 20px;
transition: 0.3s;
color: white;
}
#sidebar a {
display: block;
color: white;
margin: 10px 0;
}
</style>
<script>
function toggleMenu() {
var sidebar = document.getElementById("sidebar");
if (sidebar.style.left === "0px") {
sidebar.style.left = "-250px";
} else {
sidebar.style.left = "0px";
}
}
</script>
✅ قائمة جانبية جميلة يمكن إظهارها وإخفاؤها بسهولة.
4️⃣ 🕰️ ويدجت عرض الوقت والتاريخ الحالي
<div id="clock">⏳ تحميل الوقت...</div>
<script>
function updateClock() {
var now = new Date();
document.getElementById("clock").innerText = now.toLocaleString();
}
setInterval(updateClock, 1000);
</script>
✅ يتم تحديث الوقت في الوقت الحقيقي ويعرض التاريخ والوقت الحالي.
5️⃣ 🎞️ معرض صور متحرك داخل المقالات
<div class="slideshow">
<img src="image1.jpg" class="slide" style="display:block;">
<img src="image2.jpg" class="slide">
<img src="image3.jpg" class="slide">
</div>
<style>
.slideshow img { width: 100%; height: auto; display: none; }
</style>
<script>
var slides = document.querySelectorAll(".slide");
var index = 0;
function showSlides() {
slides.forEach(slide => slide.style.display = "none");
slides[index].style.display = "block";
index = (index + 1) % slides.length;
}
setInterval(showSlides, 3000);
</script>
✅ معرض صور ديناميكي يتغير تلقائيًا كل 3 ثوانٍ.
6️⃣ 📲 زر واتساب عائم للتواصل مع الزوار
<a href="https://wa.me/YOUR-NUMBER" target="_blank" id="whatsapp">💬 تواصل معنا</a>
<style>
#whatsapp {
position: fixed;
bottom: 20px;
right: 20px;
background: #25D366;
color: white;
padding: 10px 15px;
border-radius: 50px;
text-decoration: none;
}
</style>
✅ استبدل "YOUR-NUMBER" برقم هاتفك ليتمكن الزوار من التواصل معك مباشرة.
7️⃣ ✨ تأثيرات جميلة عند التمرير والضغط على الروابط
<style>
a:hover {
background: yellow;
transition: 0.3s;
}
</style>
✅ عند تمرير الماوس فوق الروابط، ستتغير الخلفية إلى اللون الأصفر بشكل سلس.
📌 كيفية إضافة هذه الأكواد في Blogger؟
✅ انتقل إلى “المظهر” (Theme) → “تعديل HTML”.
✅ ألصق الأكواد حيث تريد أن تظهر الميزات داخل <body>.
✅ لحفظ CSS، ضع الأكواد بين <style> ... </style> في <head>.
✅ لحفظ JavaScript، ضع الأكواد بين <script> ... </script> قبل </body>.