السلام عليكم ورحمه الله وبركاتة اليوم معنا اضافة مواقع التواصل الأجتماعي في السايد بار هذه الأضافة اصدقائي من مدونة "عالم المدون" نشكره على الأضافة لانها فريده لا يوجد شخص قام بتنزيلها على مدونته ولمن يريد ان يرى الموضوع من مدونة عالم المدون : يضغط هنا
صورة الأضافة
- كيفية التركيب
.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>
الان قم بحفظ الأضافة و مبروك لك تلك الأضافة الجميلة
- مع جدير الذكر ان هذه الأضافة من مدونة " عالم المدون " ولمن يريد ان يرى الموضوع من عالم المدون : يضغط هنا
يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع