كيفية اضافة القائمة البريدية بشكل جديد واحترافي 2018 لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

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

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

1- ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- من لوحة التحكم اختر قالب ، ثم تحرير قالب .

3- ابحث عن الوسم :

4- اضف الكود التالي فوقه .

 /*------- Subscribe Box By Home Blogger
---------------------------------------- */
.subscribe-box {
box-shadow: 2px 2px 2px 2px #000;
padding: 30px;
background: #000;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.sub-box {
text-align: center;
}
.subscribe-heading {
background: #FEBD17;padding: 9px;

font-size: 14px;
font-family: oswald;
border-radius: 8px;
box-shadow: 2px 2px 1px #000;
text-shadow: 2px 2px 1px #000;
padding-right: 10px;
padding-top: 8px;
color: #FFF;
border: 2px dashed #fff;
padding-left: 10px;
}
.sub-icon {
float: left;
font-size: 81px;
margin-right: 15px;
text-shadow: 0px 2px 1px #FFFFFF;
color: #FEBD17;
margin-top: 22px;
}
.subscribe-content {
margin-top: 27px;
font-size: 12px;
color: #FFF;
text-align: justify;
text-shadow: 0px 0px 1px #818181;
font-family: -webkit-body;
}
#email-form {
margin-right: 0;
font-family: oswald;
font-size: 12px;
color: #818181;
transition: .3s;
width: 100%;
margin-bottom: 10px;
height: 43px;
border: 2px solid #DFDFDF;
padding: 10px;
}
#email-button:hover {
background: #646464;
}
#email-form:hover {
border-color:#000;
}
#email-button {
background: #FEBD17;
border: 0;
width: 100%;
color: #FFF;
font-size: 12px;
font-family: oswald;
height: 43px;
border-radius: 6px;
transition: .3s all;
}
#email-button:hover {
color: #FFF;
}
#HTML10 {
margin-top: 43px!important;
}
#email-button2 {
background: #FEBD17;
border: 0;
width: 85px;
color: #FFF;
font-size: 12px;
font-family: oswald;
height: 43px;
border-radius: 6px;
transition: .3s all;
}
#email-button2:hover {
background:#969696;
}
#email-form2 {
margin-right: 0;
font-family: oswald;
font-size: 12px;
color: #818181;
transition: .3s;
width: 161px;
height: 43px;
border: 2px solid #DFDFDF;
padding: 10px;
}
#email-button:hover {
background: #646464;
}
#email-form2:hover {
border-color:#000;
}

/* Widget social links */
.social-links-widget a{
display:inline-block;
line-height:50px;
width:50px;
height:50px;
float:right;
background:#444;
color:#fff !important;
font-size:18px;
text-decoration:none;
text-align:center;
margin:0 0 10px 10px;
/*border-radius*/
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:100px;
box-shadow: 0px 0px 7px 7px #FFF;
}
.social-links-widget a.social-links-facebook{
background:#3b5998;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-gplus{
background:#dd4b39;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-linkedin{
background:#0976b4;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-pinterest{
background:#cc2127;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-twitter{
background:#55acee;
border:0px solid;
transition:all .3s;
}
a.social-links-facebook:hover{
background: #2B4680;
transition: all .3s;
border-right: 5px solid #183874;
}
a.social-links-gplus:hover{
background: #BA3D2E;
border-right: 5px solid #963327;
transition: all .3s;
}
a.social-links-linkedin:hover{
background: #086194;
border-right: 5px solid #074F77;
transition: all .3s;
}
a.social-links-pinterest:hover{
background: #AD191E;
border-right: 5px solid #84161A;
transition: all .3s;
}
a.social-links-twitter:hover{
background: #4A94CD;
border-right: 5px solid #37729E;
transition: all .3s;
}
.credits {
  color: #9E9E9E;
  font-size: 7px;
  float: left;
}

5- حفظ القالب .

6- بعد ذلك اختر تخطيط من لوحة التحكم ثم اختر اضافة أداة :

7- اضف الكود التالي داخل صندوق الأدة ثم احفظ .

 <div class="subscribe-box"><div class="sub-box">
  <div class="subscribe-heading">
  <i class="fa fa-envelope-o"></i> اشترك معنا
  </div>
  <div class="sub-icon">
  <i class="fa fa-envelope"></i>
</div><div class="subscribe-content">
    أخي الفاضل ...أختي الفاضلة ...هل أعجبتكم مواضيعنا ؟ فقط ضع إيميلك في المربع أدناه وانقر زر الاشتراك ! ستحصل على جميع التحديثات على علبة الوارد الخاصة بك دون أي متاعب !</div>
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ضع هنا اليوزرنيم', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" style="
    margin-top: 20px;
">
<input name="uri" type="hidden" value="ضع هنا اليوزرنيم" />
<input name="loc" type="hidden" value="en_US" />
<input class="email-form" id="email-form" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;ادخل بريدك الإلكتروني ...&quot;;}" onfocus="if (this.value == &quot;ادخل بريدك الإلكتروني ...&quot;) {this.value = &quot;&quot;}" type="text" value="ادخل بريدك الإلكتروني ..." />
<input id="email-button" title="" type="submit" value="إشترك" />
</form>
<div class="sub-box" style="
    margin-top: 30px;
"><div class="subscribe-heading" id="heading2" style="
">
  تابعونا على مواقع الاجتماعية
  </div></div>
<div class="social-links-widget cf" style="
    margin-top: 34px;
    margin-left: 10px;
">
<a class="social-links-facebook" href="http://www.facebook.com/ضع هنا اليوزرنيم" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="social-links-gplus" href="http://www.google.com/ضع هنا اليوزرنيم" target="_blank">
<i class="fa fa-google-plus"></i>
</a> 

<a class="social-links-pinterest" href="http://www.pinterest.com/ضع هنا اليوزرنيم" target="_blank">
<i class="fa fa-pinterest"></i>
</a>
<a class="social-links-twitter" href="http://www.twitter.com/ضع هنا اليوزرنيم" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div></div></div>

<div class='credits'>
تم تصميمها بواسطة : HOME BLOGGER
</div>

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

- ملحوظة / التعديلات مشروحة داخل الكود .

انقر هنا للمعاينة