🚀 الأكواد الاحترافية لإضافتها إلى مدونتك على Blogger!
📌 ما الذي سأضيفه الآن؟
✅ 📢 إشعار يختفي تلقائيًا بعد بضع ثوانٍ 🔔
✅ 🎨 تأثير ظهور تدريجي عند تحميل الصفحة (Fade-In Effect) ✨
✅ 🎭 زر تبديل الخطوط داخل المدونة 🖋️
✅ 🖼️ زر تحميل الصور عند النقر عليها (Lazy Load Images) 📷
✅ 📊 أداة لعرض إحصائيات المقالات (عدد المشاهدات، الإعجابات، إلخ) 📈
✅ 🔄 زر تحديث الصفحة بدون إعادة تحميلها بالكامل 🔄
✅ ⏳ عرض عداد تنازلي لحدث معين ⏱️
1️⃣ 🔔 إشعار يختفي تلقائيًا بعد 5 ثوانٍ
<div id="auto-dismiss-alert">⚠️ إشعار: هذا مثال لإشعار يختفي تلقائيًا!</div>
<style>
#auto-dismiss-alert {
background: #ffcc00;
padding: 10px;
color: black;
text-align: center;
font-weight: bold;
position: fixed;
top: 0;
width: 100%;
left: 0;
z-index: 9999;
}
</style>
<script>
setTimeout(function() {
document.getElementById("auto-dismiss-alert").style.display = "none";
}, 5000);
</script>
✅ يضيف إشعارًا يظهر عند تحميل الصفحة ثم يختفي تلقائيًا بعد 5 ثوانٍ.
2️⃣ ✨ تأثير ظهور تدريجي عند تحميل الصفحة (Fade-In Effect)
<style>
.fade-in {
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.body.classList.add("fade-in");
});
</script>
✅ يعطي تأثير ظهور جميل لعناصر المدونة عند تحميل الصفحة.
3️⃣ 🖋️ زر تبديل الخطوط داخل المدونة
<button onclick="toggleFont()">🔠 تغيير الخط</button>
<style>
.font1 { font-family: Arial, sans-serif; }
.font2 { font-family: 'Courier New', monospace; }
</style>
<script>
let isFont1 = true;
function toggleFont() {
document.body.className = isFont1 ? "font2" : "font1";
isFont1 = !isFont1;
}
</script>
✅ يسمح للزوار بتغيير الخط بسهولة بين عدة أنماط.
4️⃣ 📷 زر تحميل الصور عند النقر عليها (Lazy Load Images)
<img data-src="https://via.placeholder.com/400" class="lazy-load" width="400" height="300" onclick="loadImage(this)">
<script>
function loadImage(img) {
img.src = img.getAttribute("data-src");
}
</script>
✅ يتم تحميل الصور فقط عند النقر عليها مما يسرّع تحميل المدونة.
5️⃣ 📈 أداة عرض إحصائيات المقالات (عدد المشاهدات، الإعجابات، إلخ)
<div id="article-stats">
👀 عدد المشاهدات: <span id="views">0</span> | ❤️ عدد الإعجابات: <span id="likes">0</span>
</div>
<script>
document.getElementById("views").innerText = Math.floor(Math.random() * 500) + 1;
document.getElementById("likes").innerText = Math.floor(Math.random() * 100) + 1;
</script>
✅ يعرض عددًا وهميًا من المشاهدات والإعجابات لمقالاتك.
6️⃣ 🔄 زر تحديث الصفحة بدون إعادة تحميلها بالكامل
<button onclick="location.reload()">🔄 تحديث الصفحة</button>
✅ يتيح للزوار تحديث الصفحة بسهولة بضغطة زر.
7️⃣ ⏱️ عرض عداد تنازلي لحدث معين
<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>
✅ يعد تنازليًا حتى تاريخ معين، مثل رأس السنة أو حدث مهم.
📌 كيفية إضافة هذه الأكواد في Blogger؟
✅ انتقل إلى “المظهر” (Theme) → “تعديل HTML”.
✅ ألصق الأكواد حيث تريد أن تظهر الميزات داخل <body>.
✅ لحفظ CSS، ضع الأكواد بين <style> ... </style> في <head>.
✅ لحفظ JavaScript، ضع الأكواد بين <script> ... </script> قبل </body>.