لا بد أن القائمة البريدية أمر مهم في المدونات والمواقع، حيث أنها تفيد المشترك وصاحب الموقع، مما يستفيد المشترك من خلال البقاء على الأطلاع بجديد الموقع ويسفيد صاحب الموقع من خلال الحصول على متابعين، وذلك يساعد على تحسين الموقع من خلال السيو والحصول على ثقة من جهة محركات البحث، وفي هذا الموضو سنتطرق إلى كيفية أضافة صندوق الأشتراك بشكل رائع وأحترافي.
سأقدم لك أربعة أشكال !
الأشكال الأربعة بنفس التصميمّ، لكن بألوان مختلفة، لنأتي ونتعرف عليهما، نبدأ على بركة الله تعالى.
#طريقة التركيب:
نقوم بأضافة الكود الخاص بالشكل المعين في أداة HTML، أو أن كنت تملك موقع فبأمكانك أضافته حسب رغبتكّ، نأتي ونتعرف عليهما.
#معاينة
الشكل الأول:
اللون الكحلي.
سأقدم لك أربعة أشكال !
الأشكال الأربعة بنفس التصميمّ، لكن بألوان مختلفة، لنأتي ونتعرف عليهما، نبدأ على بركة الله تعالى.
#طريقة التركيب:
نقوم بأضافة الكود الخاص بالشكل المعين في أداة 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 == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" 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 == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" 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 == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" 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 == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" 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.
أقرأ:
أكون قد وصلت إلى نهاية هذا الموضوع، أتمنى أن تكون أستفدت من الموضوع ولو بالقليل، كان معكم عبد الرحمن وصفي، آمل أن يقدر الله البقاء واللقاء مره أخرّى، والسلام عليكم ورحمة الله وبركاته.
قم بتغيير رمز 0prof0، بالأسم المستخدم الخاص بك في التغذية، Feedburner.
أقرأ:
10 دورات مجانية ومدفوعة مقدمة من جوجل لتعليم برمجة وتطوير تطبيقات أندرويد
إليك مواضيع مهمة لك على موقع المحترف الأردني تختص في البرمجة:
كتاب مدفوع لتعليم لغة Java أحصل عليه مجانا
أفضل كورس مجاني لتعلم وأحتراف لغة HTML بالعربية خلال ساعتين
مجموعة أدوات للبرمجة قيمتها 1000$ أحصل عليها مجاناً الان
كتاب تعليم وأحتراف لغة Php مجانا
كتاب تعليم وأحتراف لغة C++ مجاناً
إليك مواضيع مهمة لك على موقع المحترف الأردني تختص في البرمجة:
كتاب مدفوع لتعليم لغة Java أحصل عليه مجانا
أفضل كورس مجاني لتعلم وأحتراف لغة HTML بالعربية خلال ساعتين
مجموعة أدوات للبرمجة قيمتها 1000$ أحصل عليها مجاناً الان
كتاب تعليم وأحتراف لغة Php مجانا
كتاب تعليم وأحتراف لغة C++ مجاناً
أكون قد وصلت إلى نهاية هذا الموضوع، أتمنى أن تكون أستفدت من الموضوع ولو بالقليل، كان معكم عبد الرحمن وصفي، آمل أن يقدر الله البقاء واللقاء مره أخرّى، والسلام عليكم ورحمة الله وبركاته.
Post a Comment