🔧 🚀 الأكواد المميزة لإضافتها إلى Blogger الخاص بك!
📌 ما الذي سأضيفه الآن؟
✅ 📢 إشعار منبثق عند زيارة الصفحة لأول مرة 🔔
✅ 🖼️ تأثير تكبير الصور عند تمرير الماوس (Hover Zoom Effect) 🔍
✅ 📄 زر لطباعة المقال مباشرة 🖨️
✅ 🎯 أداة “منشورات ذات صلة” داخل المقالات 🔗
✅ 💡 أداة حساب عدد الكلمات داخل المقالات 📊
✅ 🔗 إنشاء رابط مشاركة قصير تلقائيًا لكل مقال 📝
✅ 🎭 تأثير الكتابة الحية داخل العناوين (Typewriter Effect) ⌨️
1️⃣ 🔔 إشعار منبثق عند زيارة الصفحة لأول مرة
<script>
document.addEventListener("DOMContentLoaded", function() {
if (!sessionStorage.getItem("visited")) {
alert("👋 مرحبًا بك في مدونتنا! لا تنسَ الاشتراك لمتابعة آخر التحديثات 🚀");
sessionStorage.setItem("visited", "true");
}
});
</script>
✅ لن يظهر هذا الإشعار مجددًا حتى يتم تحديث المتصفح.
2️⃣ 🔍 تأثير تكبير الصور عند تمرير الماوس (Hover Zoom Effect)
<style>
.img-hover-zoom img {
transition: transform 0.3s ease-in-out;
}
.img-hover-zoom:hover img {
transform: scale(1.2);
}
</style>
<div class="img-hover-zoom">
<img src="https://via.placeholder.com/300" width="300" height="200">
</div>
✅ يضيف تأثير تكبير سلس للصور عند تمرير الماوس عليها.
3️⃣ 🖨️ زر لطباعة المقال مباشرة
<button onclick="window.print()">🖨️ طباعة المقال</button>
✅ يمكن للزوار طباعة المقال بنقرة واحدة!
4️⃣ 🔗 أداة “منشورات ذات صلة” داخل المقالات
<div id="related-posts">
<h3>🔗 مقالات ذات صلة</h3>
<ul>
<li><a href="/search?q=تقنية">🖥️ آخر أخبار التقنية</a></li>
<li><a href="/search?q=صحة">💪 نصائح صحية</a></li>
<li><a href="/search?q=ريادة+الأعمال">🚀 ريادة الأعمال</a></li>
</ul>
</div>
✅ يعرض مقالات مشابهة للموضوع الحالي لجذب المزيد من القراء.
5️⃣ 📊 أداة حساب عدد الكلمات داخل المقالات
<div id="word-count">📝 عدد الكلمات: <span id="wordCount">0</span></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
let text = document.body.innerText;
document.getElementById("wordCount").innerText = text.split(" ").length;
});
</script>
✅ يعرض عدد الكلمات الموجودة في المقال تلقائيًا.
6️⃣ 📝 إنشاء رابط مشاركة قصير تلقائيًا لكل مقال
<button onclick="copyShortLink()">🔗 نسخ الرابط المختصر</button>
<script>
function copyShortLink() {
let shortUrl = window.location.origin + "/p/" + Math.random().toString(36).substring(7);
navigator.clipboard.writeText(shortUrl);
alert("✅ تم نسخ الرابط المختصر: " + shortUrl);
}
</script>
✅ يسمح للزوار بمشاركة مقالاتك برابط قصير وسهل.
7️⃣ ⌨️ تأثير الكتابة الحية داخل العناوين (Typewriter Effect)
<h1 id="typewriter"></h1>
<script>
let text = "مرحبًا بك في مدونة KURDO6606 🚀";
let i = 0;
function typeEffect() {
if (i < text.length) {
document.getElementById("typewriter").innerHTML += text.charAt(i);
i++;
setTimeout(typeEffect, 100);
}
}
window.onload = typeEffect;
</script>
✅ يضيف تأثير الكتابة المتدرجة عند تحميل الصفحة.
📌 كيفية إضافة هذه الأكواد في Blogger؟
✅ انتقل إلى “المظهر” (Theme) → “تعديل HTML”.
✅ ألصق الأكواد حيث تريد أن تظهر الميزات داخل <body>.
✅ لحفظ CSS، ضع الأكواد بين <style> ... </style> في <head>.
✅ لحفظ JavaScript، ضع الأكواد بين <script> ... </script> قبل </body>.