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

1. قم بالذهاب الى لوحة تحكم بلوجر > ثم الى عناصر تصميم الصفحه
2. قم باختيار اداة جديده من نوع جافا سكربت
3. انسخ الكود الموجود بالاسفل وضعه في مربع الاداه

<style>
.mbtbar{width: 100%; float: left;}
.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh74eAwzyGNGmlelwEic0-ohI223UC_xvMxb_ZSiEvBDyyrYa6q7n41kFqbsgGwnOvKlihHm1SVIXFvvk2s6p6kDNJGNy65L88peRd8hdwI2ePY6NjM4vk47QW387O50qHa2IxZCjkHp10/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwZzQ-vO3GuXgqzaxRYAYClbWPrFNP2Qt_LIT8IKXZcuM5iego_Vdw_txtx2sOHnK_onVhY8WSvmT9XAr5RThGfp6U3r2F-0VeC5uM7gqRQQZQhkzrVjFIAdGbbEZ8436KrcKBLEYs4aM/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZqIKdhqCsjzRCk5hwSZbryL7kIKBchsO7N1MBiQeTuRyiE6J_I9GQYW_wQdBITQLWhzueuCk3YrXeBy3HjVrGCMgfHSyUCteLF3I5n1R9QDgenSCgAb1DS64LpUSkCStsBtd0DrWRBfI/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCyeJ3YxvLTXE6I4O29qi7dgk7Hc2RXeIXdba9-oiG-P35llpxeo7VihQ1SlKslCtwt2xU9s0wuPhP8Eqjs9HyTARviSMmJcS5BJRyVl17YHaLkh3CrjiafVJuc-Fefv3tn0LI7BmTjig/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="mbtbar"><div class="count">Join <span class="bigcount">1675+</span> People Following MBT</div><div class="subicons"><div class="rssicon"><a href="http://www.tqarob.blogspot.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/pages/tqarob" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/tqarob" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tqarob', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" onfocus="if (this.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tqarob" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>

   4.  قم بحفظ الاداه!

كيف تقوم بتعديل الكود بما يتلائم مع مدونتك?

• قم بتغيير هذا الرابط  http://www.tqarob.blogspot.com/feeds/posts/default الي رابط الخلاصات الخاص بك.
• قم بتغيير هذا الرابط http://www.facebook.com/pages/tqarob الي رابط صفحة مدونتك او حسابك الشخصي علي الفيس بوك.
• قم بتغيير هذا الرابط  http://twitter.com/tqarobالي رابط حسابك الشخصي علي تويتر.
• قم بتغيير هذا الرابط http://feedburner.google.com/fb/a/mailverify?uri=tqarob الي رابط حسابك علي موقع فيدبرنر.

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

ان اعجبتك شكل الاضافه يمكنك اتباع ما بالاسفل ...

1. قم بالذهاب الى لوحة تحكم بلوجر > عناصر تصميم الصفحه
2. قم باختيار اداة من نوع جافا سكربت
3. قم بنسخ الكود الموجود بالاسفل وضعه بداخل الاداه.

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoo8pldEEjUnrvSHQLWAjb43hljLQnKzkAT2iEhe6QtRHH7MW0WBNLs5aht4v8CAn5GVHenL1ba4SX5NzyXpdCHhLsQH3V81Mm3dG8KchW2wDmjIrwgT-B1tGlfDQJaVxAIMa3jeN9Q2K2/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;  
width:170px;
color:#666;}
</style>
<div class="mbt-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tqarob', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="tqarob" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

قم باتباع ما بالاسفل لتعديل الكود الموجود بالاعلى بما يتناسب مع مدونتك..

• قم بتغيير الرابط التالي http://feedburner.google.com/fb/a/mailverify?uri=tqarobمع رابط موقع فيدبرنر الخاص بك.
• قم بتغيير تلك العباره tqarob مع اسم خلاصات مدونتك علي فيدبرنر .

قم بحفظ التغييرات وقم بازاحه الاضافه الي القائمه الجانبيه الخاصه بمدونتك..

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

1. قم مجددا بالدخول الى لوحة تحكم بلوجر > تصميم> تحرير HTML
2. قم باخذ نسخه احتياطية من قالب مدونتك .
3. ثم ابحث عن الكود التالي..

]]></b:skin>

    4.   ضع قبله مباشرة الكود الموجود بالاسفل.

/*---Copyrighted MBT's Tutorials---Follow by email---*/
.FollowByEmail .follow-by-email-inner .follow-by-email-address{color:#4DA6FE !important; width:100%;height:22px;font-size:13px;border:1px inset}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit{width:60px;margin:0;border:0;border-radius:4px !important;-moz-border-radius:4px !important;background:#4DA6FE !important;background:rgba(0,0,0,.6);color:#fff;font-size:13px;height:24px;z-index:0}
.follow-by-email-inner .follow-by-email-submit:hover{background:#FF7700 !important;}

طريقة تخصيص الكود بما يتناسب مع مدونتك...

• لتغيير لون الخط قم بتغيير الكود التاللي #4DA6FE .
• لتغيير لون خلفية زر الاشتراك قم بتغيير الكود التالي #4DA6FE
•  لتغيير لون خلفية زر الاشتراك عند مرور الماوس عليه قم بتغيير الكود التالي #   FF7700

انتظرو اليوم باقي الاشكال