الجمعة، 29 سبتمبر 2017

حصريا اضافة مواقع التواصل فى السايدبار بشكل جديد جدا وخرافى

حصريا اضافة مواقع التواصل فى السايدبار بشكل جديد جدا وخرافى

حصريا اضافة مواقع التواصل فى السايدبار بشكل جديد جدا وخرافى

معاينة وتحميل الإضافة


من هنا ويمكنك معاينة الإضافة قبل تركيبها من الرابط التالى.




صورة من الإضافة


حصريا اضافة مواقع التواصل فى السايدبار بشكل جديد جدا وخرافى

شرح التركيبالإضافة سهل جدا فى تركيبها لانها لا تحتوى على الكثير من الإكواد تابع معى.
  • أولا أبحث عن هذا الوسم فى مدونتك]]></b:skin>ثم قم بوضع الكود التالى فوقه.


.social-links li {
  text-align: center;
  border: 1px solid #eee;
  margin-bottom: 30px;
  border-top: 0;
  box-shadow: -0.5px 1px 9px 0px #eee;
  padding: 58px 10px;
}
.social-links li.facebook {
  border-bottom: 5px solid #223f7b;
  color: #223f7b;
}
.social-links li i {
  font-size: 40px;
}
.social-links li a {
  background: #223f7b;
  color: #fff;
  transform: skew(-14deg,0);
  display: inline-block;
  padding: 1px 26px;
  padding-bottom: 5px;
  line-height: 28px;
  font-size: 15px;
  padding-left: 22px;
}
.social-links li p {
  margin-bottom: 14px;
}
.social-links li.instagram a {
  background: #8539b5;
}
.social-links li.twitter a {
  background: #1ea1ef;
}
.social-links li.youtube a {
  background: #cf1f1f;
}
.social-links li.instagram {
  border-bottom: 5px solid #8539b5;
  color: #8539b5;
}
.social-links li.twitter {
  border-bottom: 5px solid #1ea1ef;
  color: #1ea1ef;
}
.social-links li.youtube {
  border-bottom: 5px solid #cf1f1f;
  color: #cf1f1f;
}



  • الأن قوم بحفظ القالب وأنتقل الى التخطيط وقم بأنشاء أضافة جديد فى القائمة الجانبية بأسم HTML/JavaScript وضع بها الكود التالى.



<div class="social-links">
<li class="facebook">
<i class="fa fa-facebook"></i>
<p>إنظم لصفحتنا على فايسبوك بالظغط على زر</p>
<a href="#"><span>إعجاب</span></a>
</li>
<li class="instagram">
<i class="fa fa-instagram"></i>
<p>إنظم لصفحتنا على الانستجرام بالظغط على زر</p>
<a href="#"><span>تابعنا</span></a>
</li>
<li class="twitter">
<i class="fa fa-twitter"></i>
<p>إنظم لصفحتنا على تويتر بالظغط على زر</p>
<a href="#"><span>متابعة</span></a>
</li>
<li class="youtube">
<i class="fa fa-youtube-play"></i>
<p>إنظم لقناتنا على يوتيوب بالظغط على زر</p>
<a href="#"><span>اشتراك</span></a>
</li>
</div>


  • الأن قم بحفظ الإضافة ومبروك عليك الإضافة الجديد فى مدونتك.

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

    إرسال تعليق