اضافة أيقونات التواصل الاجتماعي لقوالب بلوجر 2016.

اضافة أيقونات التواصل الاجتماعي لقوالب بلوجر: اضافة ايقونات التواصل الاجتماعي أو الروابط الإجتماعية اليوم اصبحت أكثر شئ مهم في مدونات بلوجر يمكنك رؤية ذلك في اكبر المدونات في العالم بل كلها لاتتخلى عن ذلك ، وكل مدون يستعمل طريقة لجلب نظر المستخدم ليكون من متابعيه، على المواقع الاجتماعية للوصول لاخر مواضيعه

اضافة أيقونات التواصل الاجتماعي لقوالب بلوجر 2016.

- اليوم نقدم لكم واحدة من اضافات بلوجر الرائعة الخاصة بالمواقع الاجتماعية الخاصة بك ، صندوق ايقونات التواصل الاجتماعي  الذي يسهل للمدون ربط حساباته الإجتماعية بمدونته بطريقة سهلة وأنيقة، يمكنك وضعها في مكان جيد في سيدبار قالب بلوجرلأن ذلك مهم جدا لإستهداف أكبر فئة ممكنة من الزوار عن طريق متابعتك في الفايسبوك والتويتر .

معاينة 

- من أروع الإضافات أيضا :

اضافة أزرار المشاركة بشكل دائري جذاب لمدونات بلوجر 2016.
اضافة روابط المواقع الاجتماعية مع عداد المتابعين 2016.
اضافة ازرار المشاركة فلات لمدونات بلوجر 2016.
- مميزات الاضافة :
1-اضافة  ايقونات التواصل الاجتماعي مصممة لثلاثة مواقع اجتماعية تعتبر هي الأكبر في الأنترنت ، الفايسبوك ، التويتر، وقوقل بليس .
2- تأثير حائم بشكل رائع .
3- إمكانية وضعها في اي مكان تريد أن تظهر فيه على سيدبار قالب بلوجر الخاص بك .
4- الرائع في هاته اضافة  ايقونات التواصل الاجتماعي هو اعتمادها على العلامات فقط لعرض المواقع الاجتماعية الثلاثة يعني في الكثير من الاضافات تجد أنهم يكتبون الاسم كاملا حيب رأيي أن هاته الاضافة افضل أغلبية الناس تعرف هاته المواقع الغنية عن التعريف بدون ايعاز وكفى بالعلامة دليلا لذلك .
5- الآن سوف نبدأ في تركيب الإضافة خطوة خطوة لذا أنصح بأخذ نسخة إحتياطية تحسبا لأي طارئ .
6- لنسخ الكود إضغط مرتين وسطه.
1- الخطوة الأولى : قم بالذهاب للوحة التحكم- القالب - تعديل HTML

  - قم بتحميل كود Css الخاص باضافة  ايقونات التواصل الاجتماعي التالي من هنا

• Css-Icon-Download

  -أو قم بنسخ كود CSS التالي وضعه فوق  <style/>

 .icon {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin: 4px;
  width: 92px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  background-color: #404040;
}

.icon-border {
  position: relative;
}

.icon-border::before,
.icon-border::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}

.icon-border::before {
  z-index: 1;
  -webkit-transition: box-shadow 0.3s;
          transition: box-shadow 0.3s;
}

.icon-border::after {
  z-index: 2;
  background: url("http://i.imgur.com/gOZiqfy.png");
  background-image: url("http://callmenick.com/_development/icons-css3-transitions/img/icons4.svg"), none;
}

/* facebook */
.icon-border.facebook::before {
  box-shadow: inset 0 0 0 48px #3b5998;
}

.icon-border.facebook:hover::before {
  box-shadow: inset 0 0 0 4px #3b5998;
}

.icon-border.facebook::after {
  background-position: 0 0;
}

/* twitter */
.icon-border.twitter::before {
  box-shadow: inset 0 0 0 48px #4099ff;
}

.icon-border.twitter:hover::before {
  box-shadow: inset 0 0 0 4px #4099ff;
}

.icon-border.twitter::after {
  background-position: -96px 0;
}

/* google plus */
.icon-border.googleplus::before {
  box-shadow: inset 0 0 0 48px #d34836;
}

.icon-border.googleplus:hover::before {
  box-shadow: inset 0 0 0 4px #d34836;
}

.icon-border.googleplus::after {
  background-position: -192px 0;
} 

- قم بحفظ القالب .
2- الخطوة الثانية : من لوحة التحكم قم بالذهاب إلى التخطيط - افتح نافذة جديدة وإخترHTML/Javascript  ثم قم بتحميل الكود التالي في ملف Text 

• Html-Java-Icon-download

أو قم بنسخ الكود وضعه داخل الأداة الخاصة بتخطيط قالب بلوجر.

HTML/Javascript 

 <a href="#" class="icon icon-border facebook">facebook</a>
<a href="#" class="icon icon-border twitter">twitter</a>
<a href="#" class="icon icon-border googleplus">google+</a> 

-  غير علامة دياز # بروابط حساباتك الشخصية أو صفحاتك في المواقع المعنية .
- قم بحفظ الاضافة ثم حفظ التخطيط واستمتع بالنتيجة .