إضافة قائمة بريدية إحترافية لمدونات بلوغر

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

توجه إلى تخطيط إضافة أدات HTML/JAVASCIOT

وأضف هدا الكود

<div class="vidvid" id='it9an-emailsubsocial'>

            <div class='heading'>

            القائمة البريدية

            </div>

                 <p>سجل الان وتوصل بجديد مدونتنا</p>

            <div class='emailsub'>

            <form action='http://feedburner.google.com/fb/a/9olchy' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/9olchy?uri=كود مدونتك', '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="it9an.com" name="uri"/>

            <input type="hidden" name="loc" value="en_US"/>

                        <input value="تسجيل الان" class="button" type="submit" />




            </form>

            </div>







            </div>




 <style type='text/css'>

     #it9an-emailsubsocial {

      width: 300px;

      height: 330px;

      border: 1px solid #ddd;

        border-radius: 5px 5px 0px 0px;

     }

     #it9an-emailsubsocial .heading {

padding: 15px 25px;

line-height: 35px;

font-size: 26px;

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);

     }

   #it9an-emailsubsocial p {

    font-size: 13px;

    color: rgb(170, 170, 170);

    line-height: 25px;

    padding: 10px 20px 0 20px;

    margin: 0;

   }

   #it9an-emailsubsocial .emailsub {

    padding: 0px 20px 10px 20px;

   }

   #it9an-emailsubsocial .emailsub input {

    color: rgb(170, 170, 170);

    padding: 10px;

    margin-top: 10px;

    font-size: 15px;

    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;

   }

   #it9an-emailsubsocial .emailsub input:focus {

    border-color:#F4836A;

    outline: none;

    box-shadow: 0 0 2px 1px #F4836A;

   }

   #it9an-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%;

    cursor:pointer;

   }

   #it9an-emailsubsocial .emailsub .button:hover{

    background: #DD7761;

   }




     </style>

لا تنسى تغيير لون لاحمر 9olchy

وأتمنى أن يعجبكم موضوعي وإلى القاء ولدعمتا علقواا