الجمعة، 21 يونيو 2013
الجمعة, يونيو 21, 2013

شرح طريقة اضافة اداة الإشتراك عبر البريد الإلكتروني

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله تعالى وبركاته، مرحبا بكم في مدونة محترفي الويب.




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

الإشتراك عبر البريد الإلكتروني.

وتتميز هذه الا‘داة بالا‘ناقة والجمال وسنقوم بتخصيصها بتقنية 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>


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

*250: لتغيير حجم الا‘داة.
*hamedblog: قم بتغيير هذا الإسم بإسم المستخدم الخاص برابط التغدية  (الخلاصات)

انتهى درس اليوم الى اللقاء الى درس اخر وشكرا.

في اتضار رضكم حول الموضوع.

0 التعليقات:

إرسال تعليق