هل تريد بناء قائمة بريدية لمتابعي مدونتك؟
صندوق الاشتراك بالبريد الإلكتروني من أهم الأدوات لأي مدون محترف! يساعدك على جمع إيميلات الزوار وإرسال التحديثات والمقالات الجديدة مباشرة لبريدهم. في هذا الشرح، سنقدم لك تصميماً احترافياً بألوان أزرق جذابة متوافق تماماً مع قالب سيو بلس (SEO Plus).
🎯 لماذا تحتاج صندوق اشتراك؟
زيادة الزوار
إرسال المقالات الجديدة مباشرة للمشتركين يزيد من الزيارات المتكررة.
بناء علاقة
التواصل المباشر مع جمهورك يبني ثقة وولاء للمدونة.
فرص الربح
القائمة البريدية أصل ثمين للتسويق والترويج للمنتجات.
إشعارات فورية
إعلام المشتركين بالمحتوى الجديد بشكل تلقائي.
👀 معاينة صندوق الاشتراك
💻 كود HTML
YOUR_FEEDBURNER_ID بمعرف FeedBurner الخاص بك، أو استخدم خدمة أخرى مثل Mailchimp.
أضف هذا الكود في المكان الذي تريد ظهور صندوق الاشتراك فيه:
<!-- Email Subscribe Box -->
<div class="subscribe-box">
<div class="subscribe-content">
<div class="subscribe-icon">📬</div>
<h3 class="subscribe-title">اشترك في نشرتنا البريدية</h3>
<p class="subscribe-text">احصل على أحدث المقالات والشروحات مباشرة في بريدك!</p>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=YOUR_FEEDBURNER_ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class="subscribe-form">
<input type="email" name="email" placeholder="أدخل بريدك الإلكتروني..." required>
<input type="hidden" value="YOUR_FEEDBURNER_ID" name="uri"/>
<input type="hidden" name="loc" value="ar_AR"/>
<button type="submit">اشترك الآن 🚀</button>
</div>
</form>
<p class="subscribe-privacy">🔒 نحترم خصوصيتك ولن نرسل رسائل مزعجة</p>
</div>
</div>
<!-- End Email Subscribe Box -->🎨 كود CSS - اللون الأزرق (الأساسي)
أضف هذا الكود قبل وسم </head>:
<style>
/* ===== Email Subscribe Box - Blue Theme ===== */
.subscribe-box {
background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
padding: 40px 30px;
border-radius: 20px;
margin: 40px 0;
text-align: center;
box-shadow: 0 15px 40px rgba(0, 119, 182, 0.3);
position: relative;
overflow: hidden;
}
.subscribe-box::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 150px;
height: 150px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
}
.subscribe-box::after {
content: '';
position: absolute;
bottom: -30px;
left: -30px;
width: 100px;
height: 100px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
}
.subscribe-content {
position: relative;
z-index: 1;
}
.subscribe-icon {
font-size: 50px;
margin-bottom: 15px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.subscribe-title {
color: white;
font-size: 1.8em;
margin: 0 0 10px 0;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.subscribe-text {
color: rgba(255,255,255,0.9);
font-size: 1.1em;
margin: 0 0 25px 0;
}
.subscribe-form {
display: flex;
gap: 10px;
max-width: 500px;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
}
.subscribe-form input[type="email"] {
flex: 1;
min-width: 250px;
padding: 15px 20px;
border: none;
border-radius: 50px;
font-size: 16px;
outline: none;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.subscribe-form input[type="email"]:focus {
box-shadow: 0 5px 25px rgba(0,0,0,0.2);
transform: scale(1.02);
}
.subscribe-form button {
background: white;
color: #0077b6;
padding: 15px 35px;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.subscribe-form button:hover {
background: #023e8a;
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.subscribe-privacy {
color: rgba(255,255,255,0.8);
font-size: 0.9em;
margin-top: 15px;
}
/* Responsive */
@media (max-width: 768px) {
.subscribe-box {
padding: 30px 20px;
}
.subscribe-title {
font-size: 1.5em;
}
.subscribe-form {
flex-direction: column;
}
.subscribe-form input[type="email"],
.subscribe-form button {
width: 100%;
min-width: auto;
}
}
</style>🎨 5 نماذج ألوان جاهزة
اختر اللون المناسب لمدونتك! فقط استبدل قيم الألوان في CSS:
1️⃣ أزرق محيطي (الأساسي) 💙
الأنسب لقالب سيو بلس - احترافي وهادئ
background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
color: #0077b6; /* للزر */
2️⃣ بنفسجي كلاسيكي 💜
أنيق وعصري - مناسب للمدونات الإبداعية
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #667eea; /* للزر */
3️⃣ أخضر زمردي 💚
منعش وحيوي - مثالي للمدونات البيئية والصحية
background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
color: #00b09b; /* للزر */
4️⃣ وردي ناري 🩷
جريء وملفت - للمدونات النسائية والموضة
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: #f5576c; /* للزر */
5️⃣ برتقالي ناري 🧡
حيوي ومشرق - للمدونات الرياضية والتحفيزية
background: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
color: #f5af19; /* للزر */
🖼️ معاينة جميع الألوان
اشترك في نشرتنا
اشترك في نشرتنا
اشترك في نشرتنا
اشترك في نشرتنا
اشترك في نشرتنا
📝 خطوات التركيب
أنشئ حساب FeedBurner
اذهب إلى feedburner.google.com وأنشئ feed لمدونتك
افتح قالب بلوجر
اذهب إلى: المظهر → تعديل HTML
أضف كود CSS
الصق كود CSS قبل </head>
أضف كود HTML
الصق كود HTML في الشريط الجانبي أو أسفل المقالات
استبدل YOUR_FEEDBURNER_ID
ضع معرف FeedBurner الخاص بك مكان YOUR_FEEDBURNER_ID
✅ التوافق مع قالب سيو بلس
مصمم خصيصاً لقالب سيو بلس!
الصندوق مصمم بألوان أزرق متوافقة تماماً مع تصميم قالب سيو بلس. لن تحتاج لأي تعديلات إضافية - فقط انسخ والصق!
❓ أسئلة شائعة
هل FeedBurner مجاني؟
نعم، FeedBurner خدمة مجانية من جوجل لإدارة الاشتراكات البريدية.
هل يمكن استخدام Mailchimp بدلاً من FeedBurner؟
نعم! يمكنك استبدال رابط الفورم برابط Mailchimp أو أي خدمة أخرى.
أين أضع صندوق الاشتراك؟
أفضل الأماكن: الشريط الجانبي، أسفل كل مقال، أو في الفوتر.
هل يؤثر على سرعة الموقع؟
لا، الكود خفيف جداً ولا يستخدم أي مكتبات خارجية.
ممتاز! ابدأ ببناء قائمتك البريدية الآن
كل مشترك جديد هو فرصة جديدة لنجاح مدونتك! 💙
