إضافة أداة المتابعة عبر الشبكات الإجتماعية (مدونات بلوجر)

إضافة أداة المتابعة عبر الشبكات الإجتماعية (شكل رائع)

• اذهب إلى لوحة التحكم الخاصة بمدونتك ثم التخطيط بعد ذلك اضغط على إضافة أداة HTML/Javascript
• الآن انسخ الكود التالي و ضعه داخل الأداة :
  
  
    .btn-sbm:active .btn-sbm-action:after {
    bottom: 3px;
  }
  .btn-sbm-count {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    line-height: 40px;
    font-size: 20px;
    letter-spacing: -1px;
    color: #555;
    text-shadow: 0 1px white;
    background: #e6eff5;
    border-width: 1px 1px 0;
    border-style: solid;
    border-color: #c5c5c5 #bbb;
    border-radius: 8px 8px 0 0;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
  }
  .btn-sbm-count:before, .btn-sbm-count:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #e6eff5;
  }
  .btn-sbm-count:before {
    margin-left: -7px;
    margin-top: 1px;
    border-width: 7px;
    border-top-color: rgba(0, 0, 0, 0.07);
  }
  .btn-sbm-action {
    display: block;
    position: relative;
    line-height: 32px;
    padding: 2px 0 6px;
    font-size: 18px;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    border: solid rgba(0, 0, 0, 0.18);
    border-width: 0 1px;
    border-radius: 0 0 8px 8px;
  }
  .btn-sbm-action:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 6px;
    left: 0;
    right: 0;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
  }
  .btn-sbm-tweet {
    background: #83cfe8;
    background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
    background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
    background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
    background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
    -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
  }
  .btn-sbm-tweet:after {
    -webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
  }
  .btn-sbm-tweet + .btn-sbm-count {
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
  }
  .btn-sbm-like {
    background: #6480bd;
    background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
    background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
    background-image: -o-linear-gradient(top, #6480bd, #3c5894);
    background-image: linear-gradient(to bottom, #6480bd, #3c5894);
    -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
  }
  .btn-sbm-plus {
    background: #626262;
    background-image: -webkit-linear-gradient(top, #626262, #404040);
    background-image: -moz-linear-gradient(top, #626262, #404040);
    background-image: -o-linear-gradient(top, #626262, #404040);
    background-image: linear-gradient(to bottom, #626262, #404040);
    -webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
  }
  </style>
  <br/>
  <div class="container">
       <a href=https://twitter.com/Username rel="nofollow" target="_blank"rel="author"  title="تابعنا عبر التويتر" class="btn-sbm">
        <span class="btn-sbm-action btn-sbm-tweet">تويتر</span>
        <span class="btn-sbm-count">150+</span>
      </a>
      <a href=http://www.facebook.com/modawanatmohamed rel="nofollow" target="_blank" title="صفحتنا على الفايسبوك" class="btn-sbm">
        <span class="btn-sbm-action btn-sbm-like">فايسبوك</span>
        <span class="btn-sbm-count">650+</span>
      </a>
      <a href="Google Plus" class="btn-sbm" target="_blank" rel="author" title="تابعنا على جوجل+">
        <span class="btn-sbm-action btn-sbm-plus">جوجل+</span>
        <span class="btn-sbm-count">140+</span>
      </a><br/>
  </div>
  .
  .
  التعديل على الكود :
  

  • 270px : غيره إذا أردت تغيير حجم الأداة.
  • Username : غيره باسم المستخد الخاص بك على التويتر.
  • +150 : استبدله بعدد المتابعين لديك على التويتر.
  • modawanatmohamed : غيره باسم صفحتك على الفايسبوك.
  • +650 : استبدله بعدد المتابعين لديك على الفاسبوك.
  • Google Plus : غيره برابط صفحتك على جوجل+.
  • +140 : استبدله بعدد المتابعين لديك على جوجل+. 

  
  .
  وبكدة نكون اضفنا الاداة داخل المدونة .... المصدر : مدونة محترف البرامج