صندوق الاشتراك مثل مدونة المحترف

بسم الله الرحمان الرحيم في درسنا لهدا اليوم سنوق بإضافة خاصية مهمة وهي صندوق الاشتراك .

تابع الشرح :

نقوم بدخول الى لوحة تحكم بلوجر ثم الى تخطيط بعدها نقوم بضغط على اضافة اداة واختر HTML/Javascirpt

وقم باضافة الكود التالى .

<div class='clear'></div><div class='widget HTML' id='HTML1'> <div class='widget-content'> <center><div class="sub"> <h5>ضع إيميلك ليصلك كل جديد المدونة</h5> <div class="ins"> <div id='sleek-subscribe'> <form action='http://feedburner.google.com/fb/a/mailverify?uri=professional-ma ' class='signform' method='post' target='_new'> <input class='txt2' name='email' onblur='if (this.value == '') {this.value = 'ضع اميلك هنا';}' onfocus='if (this.value == 'ضع اميلك هنا') {this.value = '';}' value='ضع اميلك هنا'/> <input class='btn2' type='submit' value=' '/> </form> </div> </div> </div> <style>.sub{width:300px;height:130px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSdaR3Hiqs2iiOaM0-VIMKiFU0kf8Ve_0E5d4mFiFvEMP38pP-1j3Y90TaZ91nzRiYKu1ExBpEEsdMPAKCzZFAQpJIpRZMwcCn1vkPSQPtPu9G5LzdbKUXJis0qiQcNRLad7srkZt968/s1600/bg.png);}.sub h5{color:#2d2d2d;font:22px arial;margin:0;padding:25px 0 0 0;text-align:center;}.sub .ins{width:261px;height:35px;margin:12px auto 0;}.sub .ins .txt2{border:1px solid #E1E1E1;background:white;font:12px Tahoma,Geneva,sans-serif;color:silver;padding:10px 7px 9px 7px;margin:0px;float:right;text-align:right;width:136px;}.sub .ins .btn2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH9ABBv04WGYRDme9q2XmXHGfqWI7uV8Qf4RZD-rIei8Fp8CYyfN2SmUP_m8uUqpNAvmaI_-iJT8yBF-YWrldQPF2fpNFwCmYpUnfHUOb8vK5JPFzGb0TzznNCeQhbW7YCfTUQMo2fGfo/s1600/send.png);float:left;border:none;width:104px;height:33px;cursor:pointer;margin-top:1px;}</style></center> </div> <div class='clear'></div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=4333142131555820750&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=sidebar-left-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='تحرير'> <img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span></span></div>

مع تغيير كلمة professional-ma باللونة الاحمر باسم خلاصتة مدونتك

الان اظغط على حفظ واذهب الى مدونتك ومبرووكـ عليك الاضافة.