إبحث في هذه المدونة

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

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

كيفية اضافة اداة المتابعة عبر البريد الالكتروني:

1- قم باضافة الخط المستعمل في اضافة، اذا كانت مدونتك تحتوي على هذا الخط فلا تقم بضافته وانتقل للمرحلة الثانية.
- اذا لم تكن مدونتك تحتوي على هذا الخط فتابع معي كيفية اضافته لمدونتك.
- قم بالبحث عن الوسم التالي.
/head
عند ايجاده قم بوضع الكود التالي فوقه (اعلاه).
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
2- بعدها قم بنسخ الكود التالي.
<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";
}
.hbzform-inner h4 {
    margin: 5px 0px 0px 0px;
    color: #fff;
    font: 600 15px Droid Arabic kufi, cursive;
}
.hbzemailform {
    width: 240px;
    margin: 10px auto;
}
#hbzemailbox {
    background-color: #ffffff;
    color: #576269;
    width: 208px;
    border: 1px solid #697780;
    padding: 15px;
    text-align: center;
    height: 18px;
    box-sizing: content-box;
    font: 600 11px Droid Arabic kufi, cursive;
}
#hbzemailbutton {
    background-color: rgb(243, 93, 92);
    border: 1px solid rgb(215, 84, 83);
    color: rgb(255, 255, 255);
    width: 240px;
    padding: 10px;
    text-align: center;
    height: 50px;
    margin: 10px auto;
    cursor: pointer;
    font: 600 15px Droid Arabic kufi, cursive;
}
#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("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/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="FbLink " target="_blank" title="Facebook">Facebook</a></li>
   <li class="social-twitter"><a href="TwitterLink" target="_blank" title="Twitter">Twitter</a></li>
   <li class="social-gplus"><a href="Google+Link" target="_blank" title="Google+">Google+</a></li>
   <li class="social-pinterest"><a href="PinterestLink" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="RSSLink" 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=FeedBornerID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='FeedBornerID'/>
    <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>
- ثم قم بدخول الى مدونتك بعدها الى التخطيط ثم انتقال الى اضافة أداة ثم أضف أداة Html/JavaScript.
وقم بلصق الكود داخل هذه اداة.
ملاحظة: اذا لم تكن مدونتك تحتوي على مكتبة font awesome، فلن تظهر لك ايقونات الفيس بوك وتويتر...الخ.
ولحل هذه المشكلة قم باضافة الكود التالي الى فوق الوسم /head.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
لاتنسى تغير تغير ماهو ملون في الكود السابق.
FbLink برابط صفحتك على الفيس بوك.
TwitterLink برابط صفحتك على تويتر.
Google+Link برابط صفحتك على جوجل بلس.
PinterestLink برابط صفحتك على بنترست.
RSSLink برابط خلاصتك.
FeedBornerID تغيره بـ ID الخاص بخلاصة فيدبرنر "feedburner" الخاصة بمدونتكم.

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

ليست هناك تعليقات:

إرسال تعليق