كود فانوس رمضان مع تهنئه لمدونه بلوجر

طريقة التركيب في بلوجر (خطوة بخطوة)

اتبع هذه الخطوات البسيطة لإضافة الكود لمدونتك:

تسجيل الدخول: قم بالدخول إلى لوحة تحكم Blogger.
الانتقال إلى التنسيق: من القائمة الجانبية اليمنى (أو اليسرى حسب لغة لوحة التحكم)، اختر التنسيق (Layout).
إضافة أداة: ابحث عن أي منطقة مكتوب فيها إضافة أداة (Add a Gadget). (يفضل اختيار منطقة "العمود الجانبي" أو "تذييل الصفحة" لكن الكود سيظهر في الأعلى في كل الأحوال بسبب خاصية fixed).
اختيار النوع: من القائمة المنبثقة، اختر HTML/JavaScript.
نسخ ولصق الكود:
- في خانة العنوان (Title): اتركها فارغة (لكي لا يظهر عنوان فوق الفانوس).
- في خانة المحتوى (Content): قم بلصق الكود الذي قمتُ بتوليده لك في الرد السابق بالكامل.
الحفظ: اضغط على زر حفظ (Save)، ثم اضغط على أيقونة الحفظ العامة في أسفل يسار الشاشة لتثبيت التغييرات على المدونة.

كيفية التعديل على الكود (اختياري)

إذا أردت تخصيص الكود أكثر، يمكنك البحث عن القيم التالية وتغييرها:

تغيير الجهة: ابحث عن right: 20px; وغير كلمة right إلى left إذا أردت نقله للجهة اليسرى.
تغيير رسالة التهنئة: ابحث عن الجملة التالية في الكود وغير النص بين الأقواس: <h2>رمضان مبارك</h2> <p>كل عام وأنتم بخير...</p>
تغيير لون الإضاءة: ابحث عن الكود fill: #ffcc00; وغير كود اللون إلى أي لون تفضله (مثلاً الأخضر #00ff00).

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* حاوية الفانوس */
.ramadan-lantern-container {
position: fixed;
top: 0;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
}

/* الحبل */
.lantern-rope {
width: 2px;
height: 50px;
background: linear-gradient(to bottom, #444, #999);
}

/* تصميم الفانوس وحركته */
.lantern-svg {
width: 80px;
height: auto;
filter: drop-shadow(0 0 10px rgba(255, 200, 0, 0.6));
transform-origin: top center;
animation: swing 3s ease-in-out infinite alternate;
cursor: pointer;
transition: transform 0.3s ease;
}

.lantern-svg:hover {
filter: drop-shadow(0 0 15px rgba(255, 220, 0, 0.9));
}

@keyframes swing {
0% { transform: rotate(-5deg); }
100% { transform: rotate(5deg); }
}

.lantern-light {
animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
0% { fill: #ffcc00; opacity: 0.7; }
100% { fill: #ffaa00; opacity: 1; }
}

/* نافذة التهنئة المنبثقة */
.ramadan-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 10000;
backdrop-filter: blur(3px);
}

.ramadan-modal-content {
background: #fff;
padding: 30px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
border: 3px solid #d4af37;
max-width: 300px;
width: 80%;
position: relative;
animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes popIn {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.ramadan-modal-content h2 {
color: #b8860b;
margin-bottom: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ramadan-modal-content p {
color: #444;
line-height: 1.6;
margin-bottom: 20px;
}

.close-btn {
background: #d4af37;
color: white;
border: none;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
transition: background 0.3s;
}

.close-btn:hover {
background: #b8860b;
}

/* إخفاء على الشاشات الصغيرة جداً إذا لزم الأمر */
@media (max-width: 480px) {
.lantern-svg { width: 60px; }
.lantern-rope { height: 30px; }
}
</style>
</head>
<body>

<div class="ramadan-lantern-container">
<div class="lantern-rope"></div>

<svg id="ramadanLantern" class="lantern-svg" viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg">
<path d="M50 5 L80 40 H20 L50 5Z" fill="#d4af37" stroke="#b8860b" stroke-width="2"/>
<circle cx="50" cy="5" r="3" fill="#d4af37" />
<path d="M20 40 L10 110 H90 L80 40 Z" fill="#b8860b" stroke="#8b4513" stroke-width="2"/>
<rect x="30" y="50" width="40" height="50" rx="5" class="lantern-light" />
<path d="M10 110 L20 140 H80 L90 110 Z" fill="#d4af37" stroke="#b8860b" stroke-width="2"/>
<path d="M55 65 A10 10 0 1 0 55 85 A8 8 0 1 1 55 65" fill="#8b4513" opacity="0.5"/>
</svg>
</div>


<div id="ramadanModal" class="ramadan-modal-overlay">
<div class="ramadan-modal-content">
<h2>رمضان مبارك</h2>
<p>كل عام وأنتم بخير، أعاده الله علينا وعليكم بالخير واليمن والبركات.</p>
<button class="close-btn" onclick="closeRamadanModal()">شكراً</button>
</div>
</div>

<script>
const lantern = document.getElementById('ramadanLantern');
const modal = document.getElementById('ramadanModal');

// فتح النافذة عند الضغط على الفانوس
lantern.onclick = function() {
modal.style.display = 'flex';
};

// إغلاق النافذة
function closeRamadanModal() {
modal.style.display = 'none';
}

// إغلاق النافذة عند الضغط خارجها
window.onclick = function(event) {
if (event.target == modal) {
closeRamadanModal();
}
};
</script>

</body>
</html>