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

سأقدم لك أربعة أشكال !
الأشكال الأربعة بنفس التصميمّ، لكن بألوان مختلفة، لنأتي ونتعرف عليهما، نبدأ على بركة الله تعالى.
#طريقة التركيب:
نقوم بأضافة الكود الخاص بالشكل المعين في أداة HTML، أو أن كنت تملك موقع فبأمكانك أضافته حسب رغبتكّ، نأتي ونتعرف عليهما.
#معاينة
الشكل الأول:
اللون الكحلي.


<style>
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
#subscribe-box {background-color:#293a49;}
#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;}
#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: #00cdff; 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="0prof0">
أشترك في الموقع</p>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=0prof0" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=0prof0, '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="0prof0" />
<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);
#subscribe-box {background-color:#444;}
#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;}
#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: #00cdff; 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="0prof0">
أشترك في الموقع</p>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=0prof0" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=0prof0, '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="0prof0" />
<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);
#subscribe-box {background-color:#27ae60;}
#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;}
#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: #00cdff; 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="0prof0">
أشترك في الموقع</p>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=0prof0" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=0prof0, '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="0prof0" />
<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);
#subscribe-box {background-color:yallow;}
#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;}
#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: #00cdff; 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="0prof0">
أشترك في الموقع</p>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=0prof0" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=0prof0, '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="0prof0" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="اشترك الآن" />
</form>
</div>
</div>

#التعديلات اللازمة:
قم بتغيير رمز 0prof0، بالأسم المستخدم الخاص بك في التغذية، Feedburner.





أقرأ:

أكون قد وصلت إلى نهاية هذا الموضوع، أتمنى أن تكون أستفدت من الموضوع ولو بالقليل، كان معكم عبد الرحمن وصفي، آمل أن يقدر الله البقاء واللقاء مره أخرّى، والسلام عليكم ورحمة الله وبركاته.

أكتب تعليقك:

0 تعليق: