إضافة اداة اشترك فى القائمة البريدية اعلى الفوتر

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

اولاٌ : مرحلة تركيب الاداة

تركيب الأداة سهل جداٌ يجب عليك فقط التركيز معى وقراءة المقال جيد حتى لا تقابل صعوبات أولا يجب عليك اخذ نسخة احتياطية من قالبك ثم اذهب قالب تحرير HTML ثم اضغط على قالب وابحث بالضغط على Crtl+F ثم ابحث عن وسم /b:skin

ثم ضع هذا الكود فوقه

/* Subscribe Box By Masrawy-Web.Net */#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}.subscribe-form{clear:both;display:block;overflow:hidden}form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}.subscribe-css-email-field{background: #415471;color: #ccc;margin: 12px 4px;padding: 22px 25px;width: 35%;border: 0;border-radius: 5px;}.subscribe-css-email-button{background: #3cc091;color: #fff;cursor: pointer;font-weight: 700;padding: 15px 31px;margin-left: 20px;text-transform: none;font-size: 19px;border: 0;border-radius: 3px;transition: all .6s;margin: 6px;font-family: Reda-font;}.subscribe-css-email-button:hover{background:#37b185;}#subscribe-css p.subscribe-note{margin: 16px;text-align: center;color:#fff;font-size: 180%;font-weight: 600;line-height: normal;font-family: Reda-font;}#subscribe-css p.subscribe-note span {position: relative;overflow: hidden;font-weight: 700;transition: all .5s;font-family: Reda-font;}#subscribe-css p.subscribe-note span.itatu {font-weight: 600;color: #fff;text-transform: lowercase;font-family: Reda-font;margin: 3px;}#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}#subscribe-css:hover p.subscribe-note span:before{width:100%;}

الأن يجب علينا وضع الاداة فوق الفوتر وهذا تخصيص الأداة فمن الممكن ان يختلف الوسم من لأخر على تصميم كل قالب ولكن انت بحث عن كلمة footer-wrapper
ستجده ويمكن لاتجده ولكن بإمكانك تجده عن طريق الدخول للمدونة الخاص بك وتأتى على الفوتر وتضعط كليك يمين وتأخذ المعرف وتبحث عنه وضع الكود التالى فوقه

<div id='subscribe-css'><p class='subscribe-note'><span>إشترك</span> <span class='itatu'>فى</span>القائمة البريدية</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=/masrawy-web' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=/masrawy-web', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='Zead-Masarawy'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>
<div class='subscribe-wrapper'><div class='subscribe-form'><form action='http://feedburner.google.com/fb/a/mailverify?uri=/masrawy-web' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=/masrawy-web', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input name='uri' type='hidden' value='Zead-Masarawy'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form></div></div></div>

ملحوظات هامة قبل التركيب الكود والحفظ يجب عليك تغير الأشياء التى باللون الأصفر فى الكود وتغيرهم فى حسابك فى Feed Burner

المرحلة الأخيرة من عمل الأداة هيا سهلة جداٌ ارجو التركيز فقط منكم

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