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

بسم الله الرحمن الرحيم
والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم
السلآم عليكم ورحمة الله وبركاته
إضافة أداة المتابعة عبر الشبكات الإجتماعية ( مع عدد المتابعين )
هذه الأداة تتضمن ثلاث مواقع يستعملها أغلب المدونين و هي (تويتر – فايسبوك – جوجل+) و كما أن هذه الأداة تتميز بشكلها الرائع و الخفة و التباث, بالإضافة إلى أنها تمكنك من تحديد عدد المتابعين لديك في كل موقع من مواقع الشبكات الإجتماعية.





صورة للاداة :

مثال حي للاداة : 




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

• ادخل مدونتك 
• ثم التخطيط 
• ثم اضافة اداة 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/jetara" 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/jetara1" 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.7loll.blogger.com/"></a></div>

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

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

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

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة

صورة التدوينة

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

ملخص التدوينة:

بسم الله الرحمن الرحيم والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم السلآم عليكم ورحمة ا...

goust

الساعه : 2013-05-12T12:49:00+03:00

تاريخ : 12‏/05‏/2013

من : المملكة العربيه السعوديه

التعليقات : 2

انشرها :

تاق :