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

السلام عليكم

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

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

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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc6wJYbsXVs_aP9i6U3uv4B44xwhtEsrIDqqWKaARHCKRUFiawvDyikMEGnU1EbOnmzrGnORfhKM8YyS5b34rEAMnQNguPjnP0iQ6YtAES1EceaTd_Qh5FlPfOjN1bbW13_r8HE3FzROw/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>

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