Change the appearance of Feedburner Email Subscription Form

ازاي تغير شكل الفيد بيرنر بتاعك عشان تخليه متناسق مع شكل المدونه

Original post

اول حاجه اللينك بتاعك هيبق بالشكل ده


<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=Your feed ID here', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=Your feed ID here" name="url"/><input type="hidden" value="your blog name" name="title"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p></form>


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

background: #00BB11

بعد هذا الكود

text-align:center;

ليطبح كما في الشكل التالي

<form style="border:1px solid #ccc;padding:3px;text-align:center;background: #00BB11;"

ثانيا .......لاضافه صوره كخلفيه لمربع السبسكربشن
قم باضافه هذا الكود

background: url(your image url here);

بعد هذا الكود

text-align:center;

ليصبح هكذا

<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;background: url(your image url here);"

ثالثا.......لتغيير عرض مربع السبسكربشن
قم بتغيير هذا الكود

width:140px

وقم باضافه الر قم الذي تحتاجه بدلا من 140

رابعا......اضافه الكلا م وهي كلمه
enter your email here
الي مربع السبسكربش

قم بالبحث عن هذا الكود ثم قم بعد ذلك بازالته

<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>

وقم باستبداله بهذا الكود مع وضعه في نفس مكان الكود القديم

<input type="text" style="width:240px" name="email" value="Enter your email address" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>

خامسا......تغيير طول الجزء الذي تستطيع ان تكتب داخله الايميل
قم باضافه هذا الكود بكامله
height:22px;

وذلك بعد الكود

style="width:255px;

سادسا......تغيير لون وشكل الخد في مربع السبسكربشن
قم باضافه هذا الكود
font-size:15px;color:#AA33FF

بعد هذا الكود
style="width:255px;

سابعا.....لازاله الجزء او الرابط للفيد بيرنر اسفل مربع السبسكربشن
فقط قم بازاله هذا الكود

<p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p>