search
› › › اضافة صندوق الإشتراك في المدونة بـ 3 أشكال احترافية
اضافة صندوق الإشتراك في المدونة بـ 3 أشكال احترافية

اضافة صندوق الإشتراك في المدونة بـ 3 أشكال احترافية

بواسطة 28‏/02‏/2018 تعليق Edit
إضافة صندوق الإشتراك في المدونة بـ 3 أشكار إحترافية
السلام عليكم ورحمة الله تعالى وبركاته

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

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

مشاهدة عرض توضيحي


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

تابع معي ...

أولا توجه الى لوحة تحكم مدونتك  من هنا 
2 - التخطيط >> إضافة أداة html >>
3 - إختر الشكل الذي يناسبك وفقا لتصميم مدونتك وأضف الكود الخاص به في أداة html جديدة

صندوق الإشتراك في المدونة الشكل (1)
إضافة صندوق الإشتراك في المدونة بـ 3 أشكار إحترافية

الكود الخاص بالإضافة 
<style type="text/css">
.hbzsignup-form {
    background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe2iJLHIVWvX-U7Zcd6WZzY2rZ6kOlZF0BHgPTfT0IaCJKWFx_W9BcjBIn77mqmwdsrOJLYrLbbfEtIH9K6EC7IzuTS9CMTOFO4Y3hphG4nc1GhPqbSOi7sOwglD_l5GiWojQFQAAP6ekv/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 "flat-jooza","Tahoma";
}

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

#hbzemailbox {
    background: #FEFEFE none repeat scroll 0% 0%;
    border: medium none;
    font: 12px/12px "flat-jooza",Helvetica,Arial,sans-serif;
    margin-right: 5px;
    box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
    padding: 7px;
    box-sizing: content-box;
    height: 12px;
    vertical-align: top;
    display: inline-block;
}
#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: 11px/13px "flat-jooza",Helvetica,Arial,sans-serif;
    padding: 6px;
    border-radius: 5px;
    height: 27px;
    display: inline-block;
}

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

.hbzsocial-icons {
    margin: 20px 0 0;
    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: right;
    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/AVvXsEidRhAyK51mWFFzik7rdg91g8W9ugIXASs0nvOQq5d_tmwB0wMG3JBCcvrQaZlofcGvFFjqrTK2WUIbIR0D8y1bJ4Lc1BdDhvogLq3aenKMHOEUkcJJ23KTZIAeHyVOdeUwXdwJgYymw9T7/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=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <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>
 </tbody></tbody></table>
</div> 
صندوق الإشتراك في المدونة الشكل (2)
إضافة صندوق الإشتراك في المدونة بـ 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","flat-jooza";
}

.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","flat-jooza";
    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/AVvXsEidRhAyK51mWFFzik7rdg91g8W9ugIXASs0nvOQq5d_tmwB0wMG3JBCcvrQaZlofcGvFFjqrTK2WUIbIR0D8y1bJ4Lc1BdDhvogLq3aenKMHOEUkcJJ23KTZIAeHyVOdeUwXdwJgYymw9T7/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=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <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>
صندوق الإشتراك في المدونة الشكل (3)
إضافة صندوق الإشتراك في المدونة بـ 3 أشكار إحترافية

الكود الخاص بالإضافة 
<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 "flat-jooza", "Tahoma";
        width: 100%;
    }
 
    .hbzemailform {
        width: 235px;
        margin: 10px auto;
    }
 
    #hbzemailbox {
        background-color: #FFF;
        color: #747474;
        width: 130px;
        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: 85px;
        font: bold 13px "flat-jooza", "Tahoma";
        padding: 7px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        height: 34px;
    }
 
    #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/AVvXsEidRhAyK51mWFFzik7rdg91g8W9ugIXASs0nvOQq5d_tmwB0wMG3JBCcvrQaZlofcGvFFjqrTK2WUIbIR0D8y1bJ4Lc1BdDhvogLq3aenKMHOEUkcJJ23KTZIAeHyVOdeUwXdwJgYymw9T7/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=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]' /> <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] ">العربي ويب</a></blockquote>
                </div>
            </div>
        </div>
    </div>
</div>
خطوات تخصيص صندوق الإشتراك

تابع معي ...

إستبدل [Your Blog uri] بمعرف حسابك على feedburner
إستبدل [Fb url] برابط صفحتك على facebook
إستبدل [Twitter url] برابط حسابك على twitter
إستبدل [Google+ url] برابط حسابك على plus.google
إستبدل [Pinterest url] برابط حسابك على Pinterest
إستبدل [RSS url] برابط حسابك على feedburner

وأخيرا إضغط على حفظ الأداة وتوجه لمدونتك لمشاهدة النتيجة

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

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

إدعمنا لكي نستمر في تقديم المزيد

0 تعليق على "اضافة صندوق الإشتراك في المدونة بـ 3 أشكال احترافية"

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel