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

السلام عليكم و رحمة الله تعالى و بركاته إخواني الكرام زوار و متتبعي و محبي هذه المدونة اداة الإشتراك عبر البريد الإلكتروني هي اداة مميزة ولها فوائد كثيرة منها 




  • كسب جمهور متابع لتدويناتك باستمرار 
  • كسب زياراة دائمة ومستمرة
  • تسويق منتجاتك 
  • الترويج لأي مشروع أو فكرة تود طرحها عن طريق ارسال رسائكل جماعية الى متابعي مدونتك

ولهذا اود ان اطرح عليكم موضوع في هذ التدوينة  اتناول فيه كيفية اضافة  أداة جميلة و جديدة و الكثير من المدونين يبحثون عنها, و هي عبارة عن صندوق للإشتراك عبر البريد الإلكتروني كما في مدونات الووردبريس, تتميز هذه الأداة بالجمالية و الاحترافية و طريقة تخصيصها بتقنية 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="hlla-sport" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
                        <center>
            <input class="button45" type="submit" value="اشترك الآن" /></center></form>
    </div>


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


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

هناك 9 تعليقات:

  1. شكرااا لك

    معهد ارباحي

    www.arba7i.com

    ردحذف
  2. العفو يا أخي وشكراً لتعليقك الرائع

    ردحذف
  3. السلام عليك اخي
    كيف انضم إلى المدونة واب ويب ؟
    هل عن طريق الفايس بوك ام عن طريق الويب اي الهوتمايل ؟
    شكرا

    ردحذف
  4. أخي هذا الموضوع منقول من مدونتي المرجو ذكر المصدر أو حذفه و شكرا

    ردحذف
  5. الأخ "Admin "

    الموضوع كتبه احد المدونين ، اعتذر عن هذا، ارجوا ان ترسل لي رابط الموضوع حتى اتحقق وسأقوم بذكر المصدر أو حذفه نهائيا ان شئت ذالك، اعتذر مرة ثانية.

    ردحذف
  6. مشكور اخي الكريم
    اريد منك كود التعليق هذا
    ابمابلي starnasro@gmail.com

    ردحذف
  7. شكرا موقع خليجي الإخباري

    www.5aliji.com

    ردحذف