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

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


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

- طريقة الإضافة :
1- الدخول إلى لوحة تحكم المدونة.
2- إختر تبويب : " التخطيط "
3- إختر " أضف أداة " في المكان الذي تريد ظهور الأداة فيه
4- إختر " HTML/Javascript
5- أضف الكود في الأداة ثم غير Angle47 بعنوان feedburner الخاص بك.
6- إحفظ الأداة

الصورة توضح كل الخطوات السابقة :



#1 الكود الآول : 




<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://1.bp.blogspot.com/-9-fJaPMneBk/WlMlqltvtOI/AAAAAAAACEM/qEy8USIBQJwky4GJixaeBxlk2WDor-JPgCLcBGAs/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(&#39;https://feedburner.google.com/fb/a/mailverify?uri=angle47&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;); 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>


#2 الكود الثاني :





<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(&#39;https://feedburner.google.com/fb/a/mailverify?uri=angle47&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;); 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>



أتمنى أن تستفيدوا من هذه الإضافة ، نلتقي في شروحات أخرى. بالتوفيق للجميــ‘ع

شارك الموضوع :

إضافات بلوجر

شارك بتعليق :

التعليقات : 4

  1. للاسف سبام وما علاقه مدونه shoutersplanet.blogspot.com بك

    ردحذف
    الردود
    1. أنا جربت على عدة مدونات و لم تصلني في مجلد spam ..
      آولا : الرجاء حاول أن تسجل هنا و أخبرني بالنتيجة :

      https://demo-angle47.blogspot.com/

      ثانيا : الرجاء التأكد أنك مفعل بروتوكول الحماية ssl إذا لم تكن مفعله شاهد الموضوع التالي :

      https://www.angle47.com/2018/02/free-https-ssl-certificate-on-blogger-custom-domain.html

      حذف
  2. اين أضع اسم المستخدم الخاص بي تحديدا

    ردحذف
    الردود
    1. لونت لك الجزء الذي ستغيره في الكود أعلاه في الخطوة 5.
      غير Angle47 بعنوان feedburner الخاص بك.
      موفق

      حذف