اجمل اضافة للإشتراك في القائمة البريدية للبلوجر

السلام عليكم من بين الآمور الآساسية و المطلوبة في التدوين هي بقاء المدون على إتصال مع زوار موقعه أو مدونته .. و لضمان ذلك نحتاج إلى أداة إشتراك بالقائمة البريدية من أجل أن يسجل زوارنا عناوين بريدهم الإلكتروني و يصلهم جديد موقعنا أو مدونتنا آليا و بشكل دوري .

الإضافة بشكلين آنيقين بلونين مختلفين الآخضر و البنفسجي تسمح للزوار بتسجيل عناوينهم البريدية من أجل البقاء على إتصال دائم بموقعك او مدونتك ، كما يمكن تغيير الآلوان أو الصورة و الخطوط بشكل سلس و طريقة سهلة نظرا لأن الكود ليس فيه أي تعقيد .

طريقة الإضافة

لا يزال موجودًا في لوحة تحكم بلوجر

حدد السمة التنسيق | التخطيط

إختر أضف أداة في المكان الذي تريد ظهور الأداة فيه

إختر HTML/Javascript

أضف الكود (1) او (2) في الأداة ثم غير Angle47 بعنوان feedburner الخاص بك.

الكود الاول


    <style>
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
/***** Email Subscription Widget For Blogger By Https://angle47.com *****/
//@media(max-width:400px) {.sbox{width:109%!important;}}
//@media(max-width:1024px) and (min-width:400px)  {.sbox{width:106.5%!important;}}
.sbox {background:#009abe;text-align:center;width:100%;}
.sbox span {color:#fff;font-family:'Droid Arabic Kufi', serif;font-size:27px;}
.sbox .small {font-size:18px;}
input.boxinput::placeholder {color:#fff;}
.sbox .hatespam {
font-size:15px;}
.sbox .boxinput::placeholder {color:#fff;}
.sbox .boxinput {background:rgba(0,0,0,0.4);color:#fff;border:none;padding-top:13px;padding-bottom:13px;font-family:'Droid Arabic Kufi', serif;margin-bottom:10px;outline:none;transition:.3s;width:86%;text-align:center;border-radius:4px;}
.sbox .boxsubmit {box-shadow:0px 0px 31px 0px rgba(0,0,0,0.2);width:86%;text-align:center;padding-top:13px;padding-bottom:13px;background:#fff;outline:none;border:none;color:#009abe;font-family:'Droid Arabic Kufi', serif;cursor:pointer;border-radius:4px;}
.sbox .boxsubmit:active {background:rgba(0,0,0,0.6);color:#fff;}
.sbox {border-radius:8px!important;padding:0!important;border:none!important;}
.sbox .widget-content {margin:0!important;}
#sidebar-wrap .widget {overflow-x:hidden;}
.sbox {background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;width:100%;}
.sbox .boxsubmit {box-shadow:none!important;border-radius:2px!important;color:#764ba2!important;}
.sbox .boxinput {border-radius:2px!important;}
</style>
<div class='sbox wow rubberBand'>
<center>
<br /><span class='icon'><img height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE9WdiJhK_5VORtCBGtlGrE2_8EZ6VGqxX349HoOZ0jWds_8QqeG2BxdXoKsLvcEiscvPWkSLBMskhjnIyQbxiaHPpFRtMOFRwKoCJqLNd50ykR4S8oABvDVC_o15rFfYLeoQs9pXv99E/s1600/email.png' width='150px'/></span><br/>
</center>
<span>إشترك معنا</span><br /><br />
<span class='small'>
إنظم لقائمتنا البريدية <br />
لتصلك مواضيع موقعنا مباشرة <br />
إلى بريدك الإلكتروني<br />
</span><br /><br />
<center>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=angle47', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true' target='popupwindow'><input class='boxinput' name='EMAIL' placeholder='أدخل بريدك الإلكتروني هنا' type='email' required/>
<input class='boxsubmit' type='submit' value='إشتراك'/><input name='uri' type='hidden' value='angle47'/>
<input name='loc' type='hidden' value='en_US'/></form><br />
<span class='hatespam'><font color="yellow">* </font>نحن لسنا سبام !</span><br /><br />
</center></div>

الكود الثاني


 <style>
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
/***** Email Subscription Widget For Blogger By Https://angle47.com *****/
//@media(max-width:400px) {.sbox{width:109%!important;}}
//@media(max-width:1024px) and (min-width:400px)  {.sbox{width:106.5%!important;}}
.sbox {background:#a7c0c6;text-align:center;width:100%;}
.sbox span {color:#fff;font-family:'Droid Arabic Kufi', serif;font-size:27px;}
.sbox .small {font-size:18px;}
input.boxinput::placeholder {color:#fff;}
.sbox .hatespam {
font-size:15px;}
.sbox .boxinput::placeholder {color:#fff;}
.sbox .boxinput {background:rgba(0,0,0,0.4);color:#fff;border:none;padding-top:13px;padding-bottom:13px;font-family:'Droid Arabic Kufi', serif;margin-bottom:10px;outline:none;transition:.3s;width:86%;text-align:center;border-radius:4px;}
.sbox .boxsubmit {box-shadow:0px 0px 31px 0px rgba(0,0,0,0.2);width:86%;text-align:center;padding-top:13px;padding-bottom:13px;background:#fff;outline:none;border:none;color:#009abe;font-family:'Droid Arabic Kufi', serif;cursor:pointer;border-radius:4px;}
.sbox .boxsubmit:active {background:rgba(0,0,0,0.6);color:#fff;}
.sbox {border-radius:8px!important;padding:0!important;border:none!important;}
.sbox .widget-content {margin:0!important;}
#sidebar-wrap .widget {overflow-x:hidden;}
.sbox {background:linear-gradient(135deg, #3da58b 0%, #135645 100%)!important;width:100%;}
.sbox .boxsubmit {box-shadow:none!important;border-radius:2px!important;color:#764ba2!important;}
.sbox .boxinput {border-radius:2px!important;}
</style>
<div class='sbox wow rubberBand'>
<center>
<br /><span class='icon'><img height='auto' src='http://www.pancarelife.eu/wp-content/uploads/2016/09/newsletter.png' width='150px'/></span><br/>
</center>
<span>إشترك معنا</span><br /><br />
<span class='small'>
إنظم لقائمتنا البريدية <br />
لتصلك مواضيع موقعنا مباشرة <br />
إلى بريدك الإلكتروني<br />
</span><br /><br />
<center>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=angle47', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true' target='popupwindow'><input class='boxinput' name='EMAIL' placeholder='أدخل بريدك الإلكتروني هنا' type='email' required/>
<input class='boxsubmit' type='submit' value='إشتراك'/><input name='uri' type='hidden' value='angle47'/>
<input name='loc' type='hidden' value='en_US'/></form><br />
<span class='hatespam'><font color="yellow">* </font>نحن لسنا سبام !</span><br /><br />
</center></div>

إحفظ الأداة

معـــايـنـــة الاكواد

الكود الاول

إشترك معنا

إنظم لقائمتنا البريدية
لتصلك مواضيع موقعنا مباشرة
إلى بريدك الإلكتروني

* نحن لسنا سبام !

الكود الثاني

إشترك معنا

إنظم لقائمتنا البريدية
لتصلك مواضيع موقعنا مباشرة
إلى بريدك الإلكتروني

* نحن لسنا سبام !

شرح كود أداة اشتراك عبر البريد الإلكتروني

هذا الكود عبارة عن أداة اشتراك عبر البريد الإلكتروني (Email Subscription Widget) مصممة لمدونات بلوجر. الأداة تسمح للزوار بالاشتراك في القائمة البريدية لتلقي تحديثات الموقع مباشرة على بريدهم الإلكتروني. إليك شرح تفصيلي لكل جزء من الكود:

الجزء الخاص بالتنسيق (CSS)

<style>
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

.sbox {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    text-align: center;
    width: 100%;
    border-radius: 8px !important;
    padding: 0 !important;
    border: none !important;
}

.sbox span {
    color: #fff;
    font-family: 'Droid Arabic Kufi', serif;
    font-size: 27px;
}

.sbox .small {
    font-size: 18px;
}

input.boxinput::placeholder {
    color: #fff;
}

.sbox .hatespam {
    font-size: 15px;
}

.sbox .boxinput {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    padding-top: 13px;
    padding-bottom: 13px;
    font-family: 'Droid Arabic Kufi', serif;
    margin-bottom: 10px;
    outline: none;
    transition: .3s;
    width: 86%;
    text-align: center;
    border-radius: 4px;
}

.sbox .boxsubmit {
    box-shadow: none !important;
    width: 86%;
    text-align: center;
    padding-top: 13px;
    padding-bottom: 13px;
    background: #fff;
    outline: none;
    border: none;
    color: #764ba2;
    font-family: 'Droid Arabic Kufi', serif;
    cursor: pointer;
    border-radius: 2px !important;
}

.sbox .boxsubmit:active {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.sbox .widget-content {
    margin: 0 !important;
}

#sidebar-wrap .widget {
    overflow-x: hidden;
}
</style>

وظيفة هذا الجزء:

@import url(...): يستخدم لاستيراد خط "Droid Arabic Kufi" من Google Fonts لعرض النصوص باللغة العربية بشكل جميل.
.sbox: يُنشئ حاوية للأداة مع خلفية متدرجة (Gradient) من الأزرق إلى البنفسجي، وزوايا مستديرة.
.sbox span: يحدد تنسيق النص الرئيسي داخل الأداة (لون أبيض، حجم خط 27px، وخط "Droid Arabic Kufi").
.small: يحدد تنسيق النص الثانوي (حجم خط 18px).
.boxinput: يحدد تنسيق مربع إدخال البريد الإلكتروني (خلفية شبه شفافة، لون نص أبيض، حواف مستديرة، وحجم عرض 86%).
.boxsubmit: يحدد تنسيق زر "إشتراك" (خلفية بيضاء، لون نص بنفسجي، حواف مستديرة، وحجم عرض 86%).
.boxsubmit:active: يحدد تنسيق الزر عند النقر عليه (خلفية داكنة، لون نص أبيض).
.hatespam: يحدد تنسيق النص الذي يؤكد أن الأداة ليست سبام (حجم خط 15px).

الجزء الخاص بالهيكل (HTML)

<div class='sbox wow rubberBand'>
    <center>
        <br />
        <span class='icon'>
            <img height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE9WdiJhK_5VORtCBGtlGrE2_8EZ6VGqxX349HoOZ0jWds_8QqeG2BxdXoKsLvcEiscvPWkSLBMskhjnIyQbxiaHPpFRtMOFRwKoCJqLNd50ykR4S8oABvDVC_o15rFfYLeoQs9pXv99E/s1600/email.png' width='150px' />
        </span>
        <br />
    </center>
    <span>إشترك معنا</span><br /><br />
    <span class='small'>
        إنظم لقائمتنا البريدية <br />
        لتصلك مواضيع موقعنا مباشرة <br />
        إلى بريدك الإلكتروني<br />
    </span><br /><br />
    <center>
        <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri=angle47", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
            <input class='boxinput' name='EMAIL' placeholder='أدخل بريدك الإلكتروني هنا' type='email' required />
            <input class='boxsubmit' type='submit' value='إشتراك' />
            <input name='uri' type='hidden' value='angle47' />
            <input name='loc' type='hidden' value='en_US' />
        </form>
        <br />
        <span class='hatespam'><font color="yellow">* </font>نحن لسنا سبام !</span><br /><br />
    </center>
</div>

وظيفة هذا الجزء:

<div class='sbox wow rubberBand'>: الحاوية الرئيسية للأداة مع تأثيرات CSS (مثل rubberBand).
<img ... />: صورة رمزية للأداة (رمز البريد الإلكتروني).
<span>إشترك معنا</span>: العنوان الرئيسي للأداة.
<span class='small'>...</span>: نص توضيحي يشرح وظيفة الأداة.
<form ...>: نموذج الاشتراك الذي يستخدم خدمة Google Feedburner لإدارة الاشتراكات.
- action='https://feedburner.google.com/fb/a/mailverify': يُرسل النموذج إلى Google Feedburner.
- onsubmit='window.open(...)': يفتح نافذة منبثقة لتأكيد الاشتراك.
- <input class='boxinput' ... />: مربع إدخال البريد الإلكتروني.
- <input class='boxsubmit' ... />: زر "إشتراك".
- <input name='uri' ... />: يُحدد اسم القائمة البريدية (في هذا المثال: angle47).
- <input name='loc' ... />: يُحدد اللغة (في هذا المثال: en_US).
<span class='hatespam'>...</span>: نص يؤكد أن الأداة ليست سبام.

الجزء الخاص بالتأثيرات (JavaScript)

onsubmit='window.open(...)': يفتح نافذة منبثقة عند النقر على زر "إشتراك" لتأكيد الاشتراك عبر Google Feedburner.

كيف تعمل الأداة؟

إدخال البريد الإلكتروني:
- يدخل الزائر بريده الإلكتروني في المربع المخصص.
النقر على "إشتراك":
- يتم إرسال البريد الإلكتروني إلى Google Feedburner.
- تفتح نافذة منبثقة لتأكيد الاشتراك.
تأكيد الاشتراك:
- يجب على الزائر تأكيد الاشتراك عبر النافذة المنبثقة.

استخدامات الأداة:

جمع الاشتراكات: تسمح لمدونات بلوجر بجمع عناوين البريد الإلكتروني للزوار.
إرسال التحديثات: يمكن إرسال تحديثات الموقع مباشرة إلى المشتركين عبر البريد الإلكتروني.
تحسين التفاعل: تساعد في زيادة تفاعل الزوار مع الموقع.

ملاحظات:

Google Feedburner: الأداة تعتمد على Google Feedburner لإدارة الاشتراكات، لذا يجب إنشاء حساب على Feedburner واستبدال uri=angle47 باسم القائمة البريدية الخاصة بك.
التصميم: يمكن تعديل الألوان، الخطوط، والصور لتناسب تصميم مدونتك.
التوافق: الأداة متوافقة مع أجهزة الكمبيوتر والهواتف الذكية.

هذا الكود يعتبر أداة بسيطة وفعالة لزيادة تفاعل الزوار مع مدونتك وجمع الاشتراكات بسهولة.

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

اجمل اضافة للإشتراك في القائمة البريدية للبلوجر

طريقة الإضافة

الكود الاول

الكود الثاني

معـــايـنـــة الاكواد

الكود الاول

الكود الثاني

شرح كود أداة اشتراك عبر البريد الإلكتروني

الجزء الخاص بالتنسيق (CSS)

وظيفة هذا الجزء:

الجزء الخاص بالهيكل (HTML)

وظيفة هذا الجزء:

الجزء الخاص بالتأثيرات (JavaScript)

كيف تعمل الأداة؟

استخدامات الأداة:

ملاحظات:

إرسال تعليق

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

شرح خاصية background-image مع استخدام عدة صور خلفية

عمل أداة تحويل الأكواد إلى تنسيق آمن باستخدامHTML وCss

كيفية إنشاء صندوق ملاحظات ملون على مدونة

إنشاء زر تنزيل جميل ومثير للإعجاب على بلوجر

إضافة كود أزرار التحكم في حجم الخط من قبل الزوار على بلوجر

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار