اضافة صندوق الإشتراك بالقائمة البريدية بشكل إحترافي Subscription Pop Up لمدونات بلوجر

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

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

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

1- اختر لوحة التحكم .

2- من لوحة التحكم اختر قالب ثم اضغط على تحرير قالب : HTML

3- ابحث عن الوسم :
</head>

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BxFbqjck0GDdcGVnVVNtbWFVMzg"></script> 

- ملحوظة / إذا هذا الكود متوفر في مدونتك لا تستخدمه :

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

5- ابحث عن الوسم :
</body>

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

 <!--homeblog7 Feedburner OTP-->
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#popupcc{   background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5sBpaav9tHeQgZiGMkGSeSXRATopwusngtdOUixC_9KBdAh1AJK1I_Y5xJUxRwmqMH-3VNhXb39U5HpXOmPriM5CjOjQRE8MBcIajHlBpSNbnQzZa-S1XHox8j5KDW6jrN7DfIwjIBYEW/s1600/overlay.png&#39;);position:fixed;z-index: 9999990;width:100%;color:#fff;    height:100%;top:0;font-family: &#39;Open Sans Condensed&#39;, sans-serif;display:none;}
#main-box {   position:fixed;top:100px;right:50%;margin-right: -265px;padding:15px;background: #353535;   box-shadow: 0px 0px 3px #000;-moz-box-shadow: 0px 0px 3px #000;-webkit-box-shadow: 0px 0px 3px #000;width:500px;height:auto;z-index:9999999;    }
#main-box h2 {   margin:5px;color:#fafafa; text-align:center;font-weight:normal;text-transform:uppercase;    font-family: &#39;Open Sans Condensed&#39;, sans-serif; }
#popup-body h2{text-align:right; width:300px;}
#popup-body h2 img{width:25px; position:relative; left:5px; }
.body-inner{float:right;width:300px;} .popup-image{float:left} .popup-image img{position:relative;top:10px;}
#main-box h2 img {   border:0; position:relative;top:3px; left:5px;}
#main-box-in {   padding:10px; border-radius: 5px;-webkit-border-radius: 5px;   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);    }
#buttonfeed {    width:30%; color: #fff;-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;box-shadow:inset 0px 1px 0px 0px #cf866c;background:-webkit-gradient(linear, right top, right bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));    background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);    background-color:#d0451b;-moz-border-radius:3px;-webkit-border-radius:3px;    border-radius:3px;border:1px solid #942911;cursor:pointer;font-size:15px;    padding:9px 2px;text-decoration:none;margin: 5px 0px; font-family: &#39;Open Sans Condensed&#39;, sans-serif;   }
#buttonfeed:hover {background: #d0451b;}
#boxfeed {outline: none;padding:10px 2%;width:60%;-moz-boder-radius:3px;-webkit-border-radius:3px;border-radius:3px;background: #333;    color: #fafafa;font-size:15px;   border: 1px solid #333;    box-shadow: inset 0 0 3px #000;    -moz-box-shadow: inset 0 0 3px #000;-o-box-shadow: inset 0 0 3px #000;-webkit-box-shadow: inset 0 0 3px #000;    font-family: &#39;Open Sans Condensed&#39;, sans-serif;   }
#main-box a {   margin:5px;color:#fff;text-decoration:none;text-transform:uppercase;   }
#main-box a img {   position:relative;    left:3px;    top:2px;border:0;   }
#creditcc {   width:200px;padding:5px;margin:auto;text-align:center;   }
</style>
<div id='popupcc'>
<div id='main-box'>
<div id='main-box-in'>
<h2><img src='http://cdn.top4top.co/p_559ykrdz2u1.png' width='32px'/>اشترك معنا للحصول على آخر التحديثات</h2>
<div id='popup-body'>
<div class='body-inner'>
<h2><img src='http://cdn.top4top.co/p_559l4oj03q1.png'/> قوالب بلوجر مجانية </h2>
<h2><img src='http://cdn.top4top.co/p_559l4oj03q1.png'/> إضافات بلوجر مجانية</h2>
<h2><img src='http://cdn.top4top.co/p_559l4oj03q1.png'/> دروس بلوجر مجانية</h2>
</div>
<div class='popup-image'>
<img src='http://cdn.top4top.co/p_559jjbl1or1.png'/>
</div></div>
<!--The Subscribtion Box. Make sure you edit it before saving-->
<center><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=homeblog7; , &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='homeblog7'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput' id='boxfeed' 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='buttonfeed' type='submit' value='انقر هناللإشتراك'/>
</form></center>
<div id='creditcc'>
<a href='http://homeblog7.blogspot.com/' target='_blank'><img src='http://cdn.top4top.co/p_559b18hpvt1.png' width='12px'/>هوم بلوجر</a>~ <a href='JavaScript:void(0)' id='closecc'><img src='http://cdn.top4top.co/p_559los0r4i1.png' width='15px'/>أغلق</a> 
</div>
</div><!--Main in-->
</div><!--main-box-->
</div><!--homeblog7 popup--> 

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

- ابحث بالكود عن " homeblog7 " واستبدله  برابطك عللى  موقع فيد بيرنرFeedburner .