شرح اضافة صندوق الاشتراك فى المدونة add-email-Subscribeعن طريق البريد الاكترونى

 شرح اضافة صندوق الاشتراك  فى المدونة add-email-Subscribeعن طريق البريد الاكترونى

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

ناتى للشرح

1- اذهب الى لوحة التحكم

blogger.com 
 ثم تخطيط
2- اضغط على اضافة اداة
3- اختار الاداة التى  تريد اضافتها فى  مدونتك
لاضافة الاكواد اضغط على اداة
HTML/JavaScript
  اداة جافا/ او هتميل
لمعرة كيفية اضافة اداه ادخل هنا 

شرح بالصور اضافة اداه فى مدونة بلوجر Add tools  
 يمكن تغير اللون الازرق حسب ماتريد او تركه كما هو
 ويتم تغير اللون الاحمر بما يناسب مدونتك
  اضف الكود التالى
 

 

<div class="fixed-widget"><div class="widget-container">
  <h1> تابع احدث البرامج وشرح ادوات بلوجر يوميا </h1>
<p>إشترك معنا ليصلك كل جديد مجانا</p>
<fieldset class="inputs">
<form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=program-4', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input id="email" class="email" type="text" value="أدخل بريدك..." style="width: 192px; font-size: 15px;" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" name="email" />
<input type="hidden" value="program-4" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<fieldset class="submit">
<input class="sean orange-btn" type="submit" value="إشترك" name="commit" />
</fieldset>
</form>
</fieldset>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;
  ">
<a style="color:#094BA9;" href="http://www.program-4.com/">subcription</a></span>
</div>
</div>
<style>
.fixed-widget p {
    background: url("http://im34.gulfup.com/RQxWW.jpg") no-repeat scroll center top transparent;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    height: 50px;
    margin: 0 0 10px;
    padding-top: 4px;
    text-align: center;
    text-shadow: 1px 1px 1px #111111;
}
.fixed-widget input[type="text"], .fixed-widget input[type="email"] {
    border: 1px solid #094BA9;
    color: #555555;
    display: block;
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    margin: 0 0 10px;
    padding-right: 6px;
    width: 192px;
}

.fixed-widget a:hover {
    color: #000000;
    text-decoration: none;
}
.fixed-widget fieldset, .fixed-widget form {
    margin: 0 auto;
    width: 210px;
}
.fixed-widget form {
    border-top: 1px solid #0B50B1;
}
.fixed-widget fieldset.inputs {
    border: 0px;
    border-top: 1px solid #FFFFFF;
    padding-top: 10px;
}
.fixed-widget fieldset.inputs label {
    display: block;
    padding: 0 0 5px;
}
.fixed-widget fieldset.submit {
    border: 0px;
    padding: 1 50 10px;
}
.fixed-widget .orange-btn {
    background: url("http://im38.gulfup.com/pVC3T.png") repeat-x scroll center top #0A53B9;
    border: 1px solid #0A53B9;
    box-shadow: 1px 1px 1px #094AA7 inset;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    font-size: 18px;
    font-style: normal;
    height: 30px;
    line-height: 28px;
    padding: 0px 8px;
    text-decoration: none;
    text-shadow: 1px 1px 1px #094AA7;
    text-transform: uppercase;
}
.fixed-widget .orange-btn:hover {
    background: url("http://im38.gulfup.com/pVC3T.png") repeat-x scroll center bottom #0E4AA3;
}
.fixed-widget .orange-btn:active {
    position: relative;
    top: 1px;
}
.fixed-widget {
 
    width: 300px;
}
.widget-container {
    background: url("") no-repeat scroll center top #0E4AA3;
 
}
.fixed-widget h1 {
    background: url("http://im40.gulfup.com/7jvc3.png") no-repeat scroll center top #0E4AA3;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 900;
    height: 60px;
    line-height: 39px;
    margin: 0;
    padding-bottom: 10px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 1px #093F92;
}
</style>