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

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

في هذا الدرس سوف نتعرف على كيفية إضافة أداة "صندوق إشترك فى خدمة رسائل مدونة بلوجر" والذي يعتبر من أهم الأدوات التي يجب أن تتوفر عليها كل مدونة ,وتكمن أهميتها في جعل كل مشترك في هذه الخدمة دائما على إطلاع على كل جديد المدونة و ذلك بتوصله بكل موضوع جديد كتبته على مدونتك عن طريق بريده الإلكتروني ،أليست هذه الخدمة رائعة حقاً ؟ كلنا نعلم الطريقة التقليدية لإضافة هذه الأداة و ذلك عن طريق الحصول على الكود من موقع فيد بيرنرFeedburner ولكن هذه الإضافة التي أقترحها عليكم تتضمن كذلك دعوة الزوار

معاينة

طريقة التركيب

الذهاب إلى بلوجر >> تخطيط >> إضافة أداة
اختيار HTML /javascript
لصق هذا الكود في النافذة التي سوف تظهر.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' 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=mudwnp', '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="mudwnp" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
                        <input value="اشترك الان!" class="button" type="submit" />

            </form>
            </div>

<p id='credits'>Powered By : <a href='http://www.mudwnp.blogspot.com'>Mudwnp</a></p>

            </div>

 <style type='text/css'>
     #byard-emailsubsocial {
      width: 300px;
      height: 330px;
      border: 1px solid #ddd;
        border-radius: 5px 5px 0px 0px;
     }
     #byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
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: open sans;
    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: open sans;
    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;
}
     </style>

اهم الملاحظات حول الكود

استبدل Mudwnp مع اسم فيدبرنر الخاص بك. 
استبدل ما هو بالعربي بالكلمات التي تريدها
انقر فوق حفظ! 

في امان الله