اضافة صندوق الاشتراك بالبريد الالكتروني بشكل فلاتي رائع

<link href='https://dl.dropboxusercontent.com/s/ga9ipblygtdebw8/GESSTwoMediumRegular.css' rel='stylesheet' type='text/css'/>
    <div id='byard-emailsubsocial'>
                <div class='heading'>
                سجل دخولك في ثواني
                </div>
                     <p>سجل باستخدام بريدك الإلكتروني لاستلام رسائل بأحدث المقالات والدروس .</p>
                <div class='emailsub'>
                <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ebd3h', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                <input type='text' name='name' placeholder='اسمك' />
                <input type='text' name='email' placeholder='بريدك الإلكتروني' />
                <input type="hidden" value="ebd3h" name="uri"/>
                <input type="hidden" name="loc" value="en_US"/>
                            <input value="Sign Up Now!" class="button" type="submit" />

                </form>
                </div>

     <style type='text/css'>
         #byard-emailsubsocial {
          width: 325px;
          height: 330px;
          border: 1px solid #ddd;
            border-radius: 5px 5px 0px 0px;
         }
         #byard-emailsubsocial .heading {
    padding: 15px 25px;
    line-height: 35px;
    font-size: 24px;
    font-weight: 600;
    font-family: GESSTwoMediumRegular;
    color: rgb(170, 170, 170);
    text-align: center;
    text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
    background: none repeat scroll 0% 0% rgb(247, 247, 247);
         }
       #byard-emailsubsocial p {
        font-family: GESSTwoMediumRegular;
        font-size: 13px;
        color: rgb(170, 170, 170);
        line-height: 25px;
        padding: 10px 20px 0 20px;
        margin: 0;
       }
       #byard-emailsubsocial .emailsub {
        padding: 0px 20px 10px 20px;
       }
       #byard-emailsubsocial .emailsub input {
        color: rgb(170, 170, 170);
        padding: 10px;
        margin-top: 10px;
        font-size: 15px;
        font-family: GESSTwoMediumRegular;
        width: 92%;
        border: 1px solid #ccc;
        border-bottom: 2px solid #ccc;
        border-radius: 5px;
        transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
       }
       #byard-emailsubsocial .emailsub input:focus {
        border-color:#F4836A;
        outline: none;
        box-shadow: 0 0 2px 1px #F4836A;
       }
       #byard-emailsubsocial .emailsub .button {
        background: #F4836A;
        color: white!important;
        border:none;
        outline: none;
        border-bottom: 3px solid #B3614E;
        transition:background .4s linear;
        width: 90%;
        margin-right: 5%;
        margin-left: 5%;
        font-weight: 600;
        cursor:pointer;
       }
       #byard-emailsubsocial .emailsub .button:hover{
        background: #DD7761;
       }


    #credits {
    margin: 0 auto!important;
    margin-top: -10px!important;
    width: 160px;
    }
end code by ebd3h.blogspot.com
         </style></div>