إضافة صندوق الإشتراك عبر البريد الالكتروني باربعة أشكال مختلفة لمدونات بلوجر

شارك مع اصدقائك:

أغبى خطوة تقوم بها على بلوجر هي عدم و ضع أداة الاشتراك عبر البريد الالكتروني، لان هذه الأداة تساعد زوار مدونتك على الحصول على أخر التحديثات مباشرة على البريد الالكتروني.
فمِن خلال اضافة اداة المتابعة عبر البريد الالكتروني الى مدونة بلوجر ستضمن رجوع الزوار اليك مما يكسبك ترافيك Traffic عالي للمدونة و يزيد في الارتفاع مع الوقت و كذلك سيزيد تفاعل الزوار على المدونة.

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

إضافة صندوق الإشتراك عبر البريد الالكتروني باربعة أشكال مختلفة لمدونات بلوجر

اذا كنت تريد اضافة صندوق الاشتراك عبر البريد الالكتروني في الشريط الجانبي، فهذا سيكون جيد و لكن أسفل مواضيع بلوجر او في نافذة منبثقة سيكون أفضل.

ما هو الفيدبورنر feedburner و كيف يعمل؟

جوجل فيدبورنر google feedburner هو أشهر خدمات RSS على الويب، عندما يقوم اي شخص بالاشتراك بواسطة البريد الالكتروني الخاص به على مدونتك بلوجر و يقوم بتفعليه فيقوم الفيدبورنر بتقديم أحدث المشاركات الخاصة بك للمشترك على البريد الالكتروني الخاص به.

كيف أُنشا فيدبورنر feedburner خاص بمدونتي؟

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

قم بالولوج الى موقع جوجل فيدبورنر و اختر المدونة التي تريد عمل لها صندوق الاشتراك عبر البريد الالكتروني بعد ذلك اضغط على أيقونة RSS من الاعلى كما هو موضح في الصورة.

لتظهر عندك صفحة بها مشاركات مدونتك، انت الذي يهمك أخذ ما بعد / مثلا:

الرابط ككًُل يعتبر رابط الـRSS الخاص بالمدونة اما بالاحمر فهو ID

خطوات اضافة صندوق الاشتراك بالنشرة البريدية باشكال احترافية لمدونات بلوجر

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

1- صندوق الاشتراك عبر البريد الالكتروني بشكل رائع و منسق

من مميزات هذه الاضافة:

• أغلبية ازرار التواصل الاجتماعي
• زر اعجاب الفيسبوك و المتابعة على تويتر
• خلفية جذابة
• ستايل انيق

<style type="text/css">
.hbzsignup-form {
    background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Bxg0qRd8eHgfcC3wVEADn59_o4cVLHBHfoYXkwtvtdTPc4R8IPAao9lP6jSldsE9UQURuKHBy0u6ReqZlJD5vxSZeM3ngEfb2vq6asMxYUqivdIslGyGCvTwWO2X4_K0NHLE1ig2zPrx/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;
    height: 150px;
    width: 250px;
    margin: 10px auto 60px auto;
}

.hbzform-inner p {
    text-align: center;
    color: #fff;
    padding: 10px;
    font: bold 18px "trebuchet MS","Tahoma";
}

.hbzemailform {
    margin: 120px auto 5px;
    width: 215px;
}

#hbzemailbox {
    background: #FEFEFE none repeat scroll 0% 0%;
    border: medium none;
    font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;
    box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
    padding: 7px;
    box-sizing: content-box;
    height: 15px;
    width: 100%;
}
#hbzemailbutton {
    background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
    box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;
    border: medium none;
    color: #FFF;
    cursor: pointer;
    font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;
    padding: 6px;
    border-radius: 5px;
    height: 27px;
    width: 231px;
margin-top: 10px;
}

#hbzemailbutton:hover {
    background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
}

.hbzsocial-icons {
    margin-top: 111px;
    overflow: hidden;
    display: block;
    text-align: center;
}

.hbzsocial-icons ul {
    display: inline-block;
    margin: 0 auto !important;
    text-align: center;
    padding: 0px
}

.hbzsocial-icons ul li {
    background: transparent !important;
    border: none !important;
    float: left;
    list-style-type: none !important;
    margin: 0 4px 10px !important;
    padding: 0 !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}

.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFi7o6I19VafMxlbQUQzibb8plGPFVY7EeeFrrOKeE-f8Qg-dZ_jwHvJsYo1pvIVNxEwNqBjwpl8p-nCuFqHJk7DjEjZUzz2bDBEKmGfZZNHpijSn87nMuJE6FAOi6hXqgEyAttzY0Z36o/s1600/sprite_32x32.png") no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 38px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s; width: 38px;
}

.hbzsocial-icons ul li.social-facebook a {
    background-color: #3b5998;
    background-position: -60px 3px;
}

.hbzsocial-icons ul li.social-twitter a {
    background-color: #00aced;
    background-position: -253px 3px;
}

.hbzsocial-icons ul li.social-gplus a {
    background-color: #dd4b39;
    background-position: -93px 3px;
}

.hbzsocial-icons ul li.social-pinterest a {
    background-color: #cb2027;
    background-position: -157px 3px;
}

.hbzsocial-icons ul li.social-rss a {
    background-color: #F87E12;
    background-position: -189px 3px;
}
.hbzsocial-icons ul li a:hover {
    background-color: #333;
}

.hbzsocial-like {
    display: block;
    text-align: center;
}

.hbzsocial-like tbody, .hbzsocial-like tbody tr {
    display: block;
}

.hbzfb-likes {
    display: inline-block;
    padding-bottom: 15px;
    margin-right: 5px;
}

.hbztw-follow {
    display: inline
}

</style>

<div>
 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <p>إشترك ليصلك جديد المواضيع.</p>
  </div>
  <div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[feedborner ID]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[feedborner ID]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='أدخل البريد الالكتروني...'/>
    <input id='hbzemailbutton' title='' type='submit' value='إشترك'/>
   </form>
  </div>
 </div>

 <div class="hbzsocial-icons">
  <ul>
   <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
  </ul>
 </div>

 <table class='hbzsocial-like'>
  <tbody>
   <tr>
    <td class='hbzfb-likes'>
     <div id="fb-root">
     </div>
     <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
     </script>
     <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
     </div>
    </td>
    <td class='hbztw-follow'>
     <a href="[Twitter url]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
     </script>
    </td>
   </tr>
  <tbody>
 </table>
</div>

2- صندوق المتابعة عبر البريد الالكتروني احترافي لمدونات بلوجر

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

<style type="text/css">
.hbzsub {
    background-color: #1E293B;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 10px rgb(30, 41, 59);
}

.hbzemailform {
    width: 239px;
    margin: 10px auto;
}

.hbzform-inner h4 {
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    font: bold 18px/40px "trebuchet MS","Tahoma";
}

#hbzemailbox {
    background-color: #FFF;
    border: 1px solid #FFF;
    border-radius: 7px 0px 0px 7px;
    height: 20px;
    padding: 6px;
    box-sizing: content-box;
}

#hbzemailbutton {
    background-color: #F0553B;
    border: 1px solid #F0553B;
    color: #FFF;
    height: 34px;
    border-radius: 0px 7px 7px 0px;
    margin-left: -4px;
    font-weight: 600;
    cursor: pointer;
}

#hbzemailbutton:hover {
    background-color: #1E293B;
    border: 1px solid #FFF;
    box-shadow: 0 0 5px #ddd;
}

.hbzsocial-like {
    background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6MD9Wmdnp5HFvWM_TmsMwLTHtxkwRUdKBg1I9Pit0wWFuj784_wZ45RTtVbq3G_sl3iOpAsuLsW5oIr07aybZNy_6de_0SJvl24J8ZlUugdkxod3ykI7VEAnyxactfapayxQep9cswJ1h/s1600/Facebook-twitter-rectangle.png") no-repeat scroll center center / 250px 157px;
    width: 250px;
    height: 120px;
    margin: 10px auto;
}

.hbzfb-likes {
    margin-top: 90px;
    margin-left: 20px;
    position: absolute;
    display: block;
    box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73);
}

.hbztw-follow {
    display: block;
    margin-left: 152px;
    position: absolute;
    margin-top: 89px;
    box-shadow: 0 0 10px rgba(2, 81, 173, 0.59);
    height: 20px;
}
</style>

<div class="hbzsub">
 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <h4>أحصل على آخر التحديثات مباشرة على بريدك الالكتروني</h4>
  </div>
  <div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[FeedBorner ID]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[FeedBorner ID]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='أدخل البريد الالكتروني هنا...'/>
    <input id='hbzemailbutton' title='' type='submit' value='اشترك'/>
   </form>
  </div>
 </div>
<table class='hbzsocial-like'>
  <tbody>
   <tr>
    <td class='hbzfb-likes'>
     <div id="fb-root">
     </div>
     <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
     </script>
     <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
     </div>
    </td>
    <td class='hbztw-follow'>
     <a href="[Twitter url]" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
     </script>
    </td>
   </tr>
  </tbody>
 </table>
</div>

3- اضافة أداة المتابعة عبر البريد الالكتروني بشكل رائع و منسق و خلفية داكنة الى مدونات بلوجر

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

<style type="text/css">
.hbzsub {
    background-color: rgb(87, 98, 105);
    width: 100%;
    height: 100%;
    padding: 5px;
    box-shadow: 0px 0px 5px rgb(87, 98, 105);
}

.hbzform-inner {
    text-align: center;
    color: rgb(255, 255, 255);
    font: bold 16px "trebuchet MS","Tahoma";
}

.hbzemailform {
    width: 240px;
    margin: 10px auto;
}

#hbzemailbox {
    background-color: #798187;
    color: #FFF;
    width: 208px;
    border: 1px solid #697780;
    padding: 15px;
    text-align: center;
    height: 18px;
    box-sizing: content-box;
}

#hbzemailbutton {
    background-color: rgb(243, 93, 92);
    border: 1px solid rgb(215, 84, 83);
    color: rgb(255, 255, 255);
    width: 240px;
    font: bold 16px "trebuchet MS","Tahoma";
    padding: 15px;
    text-align: center;
    height: 50px;
    margin: 10px auto;
    cursor: pointer;
}

#hbzemailbutton:hover {
    background-color: #E64C4B;
    border: 1px solid #BF4A49;
}

.hbzsignup-form {
    margin-top: 15px;
}

.hbzsocial-icons {
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid rgb(133, 133, 133);
    width: 230px;
    display: block;
    margin: 20px auto;
}

.hbzsocial-icons ul {
    margin: 0px auto !important;
    text-align: center;
    padding: 0px !important;
    display: inline-block;
}

.hbzsocial-icons ul li {
    background: transparent none repeat scroll 0% 0% !important;
    border: medium none !important;
    float: left;
    list-style-type: none !important;
    padding: 0px !important;
    margin: 0px 2px !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}

.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFi7o6I19VafMxlbQUQzibb8plGPFVY7EeeFrrOKeE-f8Qg-dZ_jwHvJsYo1pvIVNxEwNqBjwpl8p-nCuFqHJk7DjEjZUzz2bDBEKmGfZZNHpijSn87nMuJE6FAOi6hXqgEyAttzY0Z36o/s1600/sprite_32x32.png") no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 34px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s;
    width: 34px;
}

.hbzsocial-icons ul li.social-facebook a {
    background-position: -62px 1px;
}

.hbzsocial-icons ul li.social-facebook a:hover {
    background-color: #3b5998;
}

.hbzsocial-icons ul li.social-twitter a {
    background-position: -254px 1px;
}

.hbzsocial-icons ul li.social-twitter a:hover {
    background-color: #00aced;
}

.hbzsocial-icons ul li.social-gplus a {
    background-position: -95px 0px;
}

.hbzsocial-icons ul li.social-gplus a:hover {
    background-color: #dd4b39;
}

.hbzsocial-icons ul li.social-pinterest a {
    background-position: -159px 1px;
}

.hbzsocial-icons ul li.social-pinterest a:hover {
    background-color: #cb2027;
}

.hbzsocial-icons ul li.social-rss a {
    background-position: -190px 0px;
}

.hbzsocial-icons ul li.social-rss a:hover {
    background-color: #F87E12;
}

</style>

<div class="hbzsub">

<div class="hbzsocial-icons">
  <ul>
   <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
  </ul>
 </div>

 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <h4>إشترك في النشرة البريدية</h4>
  </div>
  <div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[FeedBorner ID]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[FeedBorner ID]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='البريد الالكتروني الخاص بك'/>
    <input id='hbzemailbutton' title='' type='submit' value='إشترك'/>
   </form>
  </div>
 </div>
</div>

4- اضافة صندوق الاشتراك عبر البريد الالكتروني بمميزات متعددة على بلوجر

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

<style type="text/css">
    .hbzsub {
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        border: 1px dashed #ddd;
    }
  
    .hbzsube {
        color: rgb(255, 255, 255);
        background-color: rgb(11, 172, 227);
        padding: 10px 0;
        text-align: center;
        font: bold 15px "trebuchet MS", "Tahoma";
        width: 100%;
    }
  
    .hbzemailform {
        width: 235px;
        margin: 10px auto;
    }
  
    #hbzemailbox {
        background-color: #FFF;
        color: #747474;
        width: 211px;
        border: 1px solid #D8D8D8;
        padding: 7px;
        height: 18px;
        display: inline-block;
        vertical-align: top;
        box-shadow: inset 0px 0px 5px #c2c2c2;
        box-sizing: content-box;
        font-size: 13px;
    }
  
    #hbzemailbutton {
        background-color: rgb(243, 93, 92);
        border: 1px solid rgb(215, 84, 83);
        color: rgb(255, 255, 255);
        width: 226px;
        font: bold 13px "trebuchet MS", "Tahoma";
        padding: 7px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        height: 30px;
margin-top: 10px;
    }
  
    #hbzemailbutton:hover {
        background-color: #E64C4B;
        border: 1px solid #BF4A49;
    }
  
    .hbzsignup-form {
        margin-top: 15px;
    }
  
    .hbzsocial-icons {
        overflow: hidden;
        text-align: center;
        display: block;
        margin: 20px auto;
    }
  
    .hbzsocial-icons ul {
        margin: 0px auto !important;
        text-align: center;
        padding: 0px !important;
        display: inline-block;
    }
  
    .hbzsocial-icons ul li {
        background: transparent none repeat scroll 0% 0% !important;
        border: medium none !important;
        float: left;
        list-style-type: none !important;
        padding: 0px !important;
        margin: 0px 5px !important;
    }
  
    .hbzsocial-icons ul li::before,
    .hbzsocial-icons ul li::after {
        display: none !important;
    }
 
    .hbzsocial-icons ul li a {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFi7o6I19VafMxlbQUQzibb8plGPFVY7EeeFrrOKeE-f8Qg-dZ_jwHvJsYo1pvIVNxEwNqBjwpl8p-nCuFqHJk7DjEjZUzz2bDBEKmGfZZNHpijSn87nMuJE6FAOi6hXqgEyAttzY0Z36o/s1600/sprite_32x32.png") no-repeat scroll 0 0;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        display: block;
        height: 34px;
        overflow: hidden;
        text-indent: -999px;
        transition: all 0.25s linear 0s;
        width: 34px;
    }
  
    .hbzsocial-icons ul li a:hover {
        background-color: #aeaeae !important;
    }
  
    .hbzsocial-icons ul li.social-facebook a {
        background-position: -62px 1px;
        background-color: #3b5998;
    }
  
    .hbzsocial-icons ul li.social-twitter a {
        background-position: -254px 1px;
        background-color: #00aced;
    }
  
    .hbzsocial-icons ul li.social-gplus a {
        background-position: -95px 0px;
        background-color: #dd4b39;
    }
  
    .hbzsocial-icons ul li.social-pinterest a {
        background-position: -159px 1px;
        background-color: #cb2027;
    }
  
    .hbzsocial-icons ul li.social-rss a {
        background-position: -190px 0px;
        background-color: #F87E12;
    }
</style>
<div class="hbzsub">
    <div class="hbzsube">اشترك مجانا في القائمة البريدية</div>
    <div class='hbzsignup-form'>
        <div class='hbzemailform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[FeedBorner ID]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='[FeedBorner ID]' /> <input name='loc' type='hidden' value='en_US' /> <input id='hbzemailbox' name='email' required='' type='text' placeholder='البريد الالكتروني الخاص بك' /> <input id='hbzemailbutton' title='' type='submit' value='إشترك!' /> </form>
        </div>
        <div class="hbzsube">تواصل معنا</div>
        <div class="hbzsocial-icons">
            <ul>
                <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
                <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
                <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
                <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
                <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
            </ul>
        </div>
        <div style="width: 230px; margin: 0px auto;">
            <div id="fb-root"></div>
            <script>
                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) return;
                    js = d.createElement(s);
                    js.id = id;
                    js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));
            </script>
            <div class="fb-page" data-href="[Fb url]" data-width="230" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-hide-cover="true" data-show-facepile="true">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="[Fb url]"><a href="[Fb url]">[Fb Page Name]</a></blockquote>
                </div>
            </div>
        </div>
    </div>
</div>

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

بعد اختيارك الاداة التي ستقوم باضافتها الى مدونتك قم بنسخ الكود الخاص بها، و ألصقه في محرر نصوص لديك (Notepad) و غير ما يجب تغييره.

• [FeedBorner ID] غيره بـ ID الفيدبرونر (الذي حددناه سابقا).
•  [Fb url] غيره برابط صفحتك على الفيسبوك.
• [Twitter url] رابط حسابك على التويتر.
• [Google+ url] رابط حسابك على Google+.
• [Pinterest url] رابط حسابك على Pinterest.
• [RSS url] غيره برابط RSS الذي عيناه سابقا.
• [Twitter Username] غيره باسم مستخدم حسابك على التويتر.

اذا كان لديك نوع خط مميز لمدونتك فيجب تغيير trebuchet MS بنوع الخط الخاص بمدونتك..

و من ثم أعد نسخ الكود المُعدل و قم بالولوج الى مدونتك و من ثم التخطيط و أضف أداة Html/JavaScript  جديدة و قم بلصق الكود في مكانه و أخيرا احفظ الأداة.

الى هنا وصلت الى نهاية الموضوع و الذي كان تحت عنوان إضافة صندوق الإشتراك عبر البريد الالكتروني باربعة أشكال مختلفة لمدونات بلوجر.
لاتنسى الاشتراك في النشرة البريدية للمدونة و مشاركة الموضوع و ترك تعليق بالاسفل و الى اللقاء في مواضيع جديدة.