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

بسم الله الرحمن الرحيم 

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

صورة للاداة :

 طريقة التركيب : 

• ادخل مدونتك 

• ثم التخطيط 

• ثم اضافة اداة HTML/Javascript.

• انسخ هذا الكود والصقه مع تغيير ماسأذكره :

 

ل
<style type="text/css">

.container {

  margin: 0px auto;

  width: 270px;

  text-align: center;

  float: center;

}

.btn-sbm {

  display: inline-block;

  vertical-align: top;

  position: relative;

  margin: 0 5px;

  padding-top: 40px;

  width: 75px;

  font-weight: bold;

  text-align: center;

  text-decoration: none;

  border-radius: 8px;

  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);

  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);

}

.btn-sbm:active {

  margin-top: 3px;

}

.btn-sbm:active .btn-sbm-action {

  padding-bottom: 3px;

  -webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);

  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);

}

.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>



<div class="container">

<a class="btn-sbm" href="https://twitter.com/3alamihtiraf" rel="author" target="_blank" title="تابعنا عبر التويتر">

      <span class="btn-sbm-action btn-sbm-tweet">تويتر</span>

      <span class="btn-sbm-count">150+</span>

    </a>

    <a class="btn-sbm" href="http://www.facebook.com/3alamihtiraf1" rel="nofollow" target="_blank" title="صفحتنا على الفايسبوك">

      <span class="btn-sbm-action btn-sbm-like">فايسبوك</span>

      <span class="btn-sbm-count">650+</span>

    </a>

    <a class="btn-sbm" 
href="https://plus.google.com/100752619210375925158" rel="author" 
target="_blank" title="تابعنا على جوجل+">

      <span class="btn-sbm-action btn-sbm-plus">جوجل+</span>

      <span class="btn-sbm-count">140+</span>

    </a><a href="http://www.3alamihtiraf.co.vu"></a></div>

التغيرات : ابحث عن : 

• 270px : غيره إذا أردت تغيير حجم الأداة ( العرض ) .
• 3alamihtiraf : غيره باسم المستخدم على التويتر.
• +150 : استبدله بعدد المتابعين لديك على التويتر.
• 3alamihtiraf1 : غيره باسم صفحتك على الفايسبوك.
• +650 : استبدله بعدد المتابعين لديك على الفاسبوك.
• 100752619210375925158 : غيره برابط صفحتك على جوجل+.
• +140 : استبدله بعدد المتابعين لديك على جوجل+.
  
  
  

  في حال واجهتك مشكلة ضع تعليقك :)