جرووا تك

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

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



* -  توجه إلى التخطيط

* - إضافة أداة html/javascript

* - وضع الكود الذي أعجبك داخل الأداة

• صندوق الاشتراك في القائمة البريدية الأخضر

<style>
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
#subscribe-box {background-color:#47cf73;}
#subscribe-box p {font-size: 18px; color: #fff; padding: 10px 20px 0 20px; margin: 0; font-family: 'Noto Sans Kufi Arabic', sans-serif!important; text-align: center;    font-weight: bold;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background: #f9f9f9; color: #bbb; padding: 10px; margin-top: 10px; font-size: 13px; width: 100%; border: 0; transition: all 0.4s ease-in-out; font-family: tahoma; border-radius: 2px!important;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background: #4D504F; color: #fff;font-weight: 700; font-size: 16px; font-family: 'Noto Sans Kufi Arabic', sans-serif!important; border: none; outline: none; width: 100%; cursor: pointer; border-radius: 3px!important; transition: all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} 
</style>
<div id="subscribe-box">
<p class="ar1websub">
اشترك لتصلك حصرياتنا! تطبيقات، ألعاب والمزيد...</p>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=tuneofheart/wIhu, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="الاسم الكريم" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="البريد الالكتروني" />
<input name="uri" type="hidden" value="tuneofheart/wIhu" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="اشترك الآن" />
</form>
</div>
</div>

• صندوق الاشتراك في القائمة البريدية الأسود

<style>
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700;font-family: 'Noto Sans Kufi Arabic', sans-serif!important; line-height: 3em;}
.follow-subscribe-social{padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin-left: 20px;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height: 45px; font-weight: 700; font-size: 16px; color: #fff; text-transform: uppercase; border: none; background-color: #4FC4F6; transition: background-color .2s ease-in-out; font-family: 'Droid Arabic Naskh', serif;}
.subscribe-button:hover{background-color:#00A3CE}
.subscribe-button:focus{outline:0}
</style>
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>اشترك في النشرة البريدية</p>
<form class="subscribe" action='https://feedburner.google.com/fb/a/mailverify?uri=tuneofheart/wIhu' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=tuneofheart/wIhu, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='اسمك المستخدم'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='بريدك الالكتروني'/>
<input class="subscribe-button" type="submit" value="اشترك الان" />
</form>
</div>

• صندوق الاشتراك في القائمة البريدية الأحمر

<style>
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
/* Subscribe Box */
.widget-content{padding:0}
.subscribe-wrapper h8{font-weight: 700; margin: 0 auto 10px auto; text-align: center; font-size: 25px; line-height: 1.8; font-family: 'Noto Sans Kufi Arabic', sans-serif!important;}
.subscribe-wrapper p{margin:0 auto;opacity:.95;text-align:center;font-family: 'Droid Arabic Naskh', serif; font-size: 14px;}
.subscribe-wrapper{color:#fff;background:#e83e3b;margin:0;padding:20px;}
.subscribe-form{clear:both;display:block;margin:5px 0 10px 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:rgba(0,0,0,0.2);color:#fff;margin:0 0 15px;padding:0.962em 1.847em;width:100%;border:none;text-align:center;outline:0}
.subscribe-css-button{background: #fff!important; color: #E83E3B!important; cursor: pointer; font-weight: 700; padding: 7px; width: 100%; border: 0; font-size: 15px; text-transform: uppercase; transition: all .3s; font-family: 'Noto Sans Kufi Arabic', sans-serif!important;}
.subscribe-css-button:hover{color:#aaa!important;transition:all 0.3s ease-in;}
</style>
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h8>احصل على أجدد مواضيعنا
</h8>
<p>اشترك بنشرتنا البريدية وتوصل بأشياء مثيرة للإهتمام.</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh" class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=tuneofheart/wIhu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="tuneofheart/wIhu" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="ادخل بريدك الإلكتروني" />
<input class="subscribe-css-button" title="" type="submit" value="اشترك الآن" />
</form>
</div>
</div></div>

* - قم بتغيير كل ما به tuneofheart/wIhu بإسم رابط خلاصتك

* - قم بتغيير رمز # إلى رابك صفحتك الإجتماعية 

أي تساؤل أتركوه في التعليقات و سوف أجيب على الأسئلة بإذن الله.