إضافة صندوق الاشترك في النشرة البريدية الي مدونه بلوجر

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

شرح طريقة التركيب

من لوحة التحكم الخاصه ببلوجر اتجه إلى التخطيط وأضف أداة 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="egtec4sub"> اشترك لتصلك حصرياتنا! تطبيقات، ألعاب والمزيد...</p> <div class="emailfield"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=egtec4/TFDh" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=egtec4/TFDh, '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="egtec4" /> <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='http://feedburner.google.com/fb/a/mailverify?uri=egtec4/TFDh' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=egtec4/TFDh, 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' 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 h3{font-weight: 700; margin: 0 auto 10px auto; text-align: center; font-size: 20px; line-height: 1.8; font-family: 'Noto Sans Kufi Arabic', sans-serif!important;} .subscribe-wrapper h3 span{display:inline-block;font-weight:bold;font-size:33px;} .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"> <h3> احصل على أجدد مواضيعنا <span>أول بأول</span></h3> <p> اشترك بنشرتنا البريدية وتوصل بأشياء مثيرة للإهتمام.</p> <div class="subscribe-form"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=egtec4/TFDh" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=egtec4/TFDh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" type="hidden" value="egtec4" /> <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>


التغيرات الاساسيه علي الكود لتخصيصه لمدونتك
1-قم بتغيير كل ما به egtec4/TFDh بإسم رابط خلاصتك
اذا كنت لا تتوفر على رابط خلاصه للفيدبانر فالشرح موجود هنا  لطريقه انشاء خلاصه بعد انشائك للحساب لا تنسى تفعيل خاصية الإشتراك وهي مذكورة في الشرح

2-في الشكل الثاني ادخل صفحه الفيس الخاصه بك وصفحه التويتر وصفحه جوجل الخاصه بك ان وجد

ان واجهتك مشكله اترك لنا تعليق اسفل الموضوع وسنجيبك

اذا كان لديك اي استفسار في مجال التقنيه راسلنا عبر صفحتنا علي الفيس

Posted in: دروس بلوجر