أقدم لكم في هاذا الدرس أضافة لبلوجر وهية خاصية المتابعة على مواقع التواصل الأجتماعي يوتيوب, فيس بوك ,تويتر ,أنستقرام, بشكل جميل ومميز .
أولاً : قم بلبحث عن رمز
]]></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>قبل الحفظ قم بوضع روابط صفحاتك على مواقع التواصل مكان # وقم بلحفظ ومبروك عليك الأضافة
add_comment ليست هناك تعليقات:
إرسال تعليق