أداة الإشتراك عبر البريد الإلكتروني (شكل احترافي)

 

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

لإضافة هاته الأداة إلى مدونتك المرجو تتبع الخطوات التالية :

• توجه إلى لوحة التحكم في مدونتك و اختر منها » تصميم ثم » إضافة أداة و من النافذة المنبثقة اختر أداة HTML/Javascript.
• انسخ الكود التالي و الصقه داخل الأداة.

<style>

    .subscriptionboc

    {

    border-style:solid;

    border-width:2px;

    border-color:#000;

    padding:20px;

    width:250px;

        background:#fff;

    transition: box-shadow .777s;

    -webkit-transition: box-shadow .777s;

    -moz-transition: box-shadow .777s;

    -o-transition: box-shadow .777s;

    -ms-transition: box-shadow .777s;

    }

    .paratraf

    {

         font-size:20px;

        font-family:"Helvetica";

        text-align:center;

    color:#000;

    }

    .feed-links{display:none;}

    .enteremail

    {

       background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;

        border-radius: 4px 4px 4px 4px;

        box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;

        color: #8B8B8B;

        padding: 10px 40px;

    border-style:solid;

    border-width:2px;

    border-color:#CACACA;

    }

    .forspace

    {

        padding:15px;

    }

    .button45

    {

         background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;

        border: 0 none;

        border-radius: 4px 4px 4px 4px;

        color: #000000;

        cursor: pointer;

        font-family: "Helvetica","Lucida Grande",Tahoma,sans-serif;

        font-weight: bold;

        padding: 10px 40px;

        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

        background:#29A3DB;

        border: 0 none;

        border-radius: 4px 4px 4px 4px;

        color: #FFFFFF;

        cursor: pointer;

        font-family: "Lucida Grande",Tahoma,sans-serif;

        font-weight: bold;

        padding: 10px 40px;

        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

    }

    </style> 
    <div class="subscriptionboc"> 
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hamedblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div class="paratraf">اشترك معنا و كن السباق في التوصل بمستجداتنا.</div><p>         <div class="forspace"> 
                <center> 
                    <input class="enteremail" type="text" style="width:140px" name="email" value="بريدك الإلكتروني..." onfocus="if (this.value == &quot;بريدك الإلكتروني...&quot;) {this.value = &quot;&quot;}"/></center></div> 
            </p> 
            <input type="hidden" value="hamedblog" name="uri"/> 
            <input type="hidden" name="loc" value="en_US"/> 
                        <center> 
            <input class="button45" type="submit" value="اشترك الآن" /></center></form>
    </div>

التعديل على الكود :

• 205 : لتغيير حجم الأداة.
• hamedblog : غير هذا الإسم باسم المستخدم الخاص برابط التغذية (الخلاصات)

مع تحيااتي