هده الاضافة نقدمها لكم بلونين مختلفين حتى تناسب أدوقكم وتناسب مدوناتكم
تركيب الإضافة
الاضافة تتكون من جزئيين الجزاء الأول هو ملف CSS هو ملف تنسيق الاضافة بحيث يحتوي على تنسيق الألوان وترتيب الشكل, وهو يتكون من جزئيين كل جزئ يختلف في الشكل والألوان. نبدى أولى في تركيب CSS
لتركيب CSS نتوجه الى لوحة تحكم المدونة ثم المظهر ثم تحرير HTML ثم نبحث ]]></b:skin> عن ونضع فوقة/اعلاء كواد احد الإشكال
.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
text-align: center;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0px;
text-decoration: none;
display: block;
padding: 10px 1px 10px 10px;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li a.social-btn-twitter {
background: #1da1f2;
color:#fff;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align:center ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li a.social-btn-youtube {
background: #cd201f;
color:#fff;
}
.kt-social-buttons-widget li a.social-btn-instagram {
background: #405de6;
color:#fff;
}
.kt-social-buttons-widget li a:hover {
color: #0a0a0a !important;
background:#f8f8f8 !important;
الشكل الأول
الشكل الثاني
.kt-social-buttons-widget ul { list-style: none; padding-left: 0; text-align: center; } .kt-social-buttons-widget li a { font-size: 10px; text-transform: uppercase; letter-spacing: 0px; text-decoration: none; display: block; color: #0a0a0a; padding: 10px 1px 10px 10px; background:#f8f8f8; } .kt-social-buttons-widget ul li { width: 100%; margin-bottom: 10px; } .kt-social-buttons-widget li:hover a.social-btn-twitter { background: #1da1f2; color:#fff; } .kt-social-buttons-widget li a i { float: right; width: 35px; height: 14px; line-height: 14px; text-align:center ; margin: 0; padding: 0 0 0 10px; font-size: 14px; } .kt-social-buttons-widget li a i { border-left: 1px solid #666; line-height: 14px; } .kt-social-buttons-widget li:hover a.social-btn-facebook { background: #3b5998; color:#fff; } .kt-social-buttons-widget li:hover a.social-btn-youtube { background: #cd201f; color:#fff; } .kt-social-buttons-widget li:hover a.social-btn-instagram { background: #405de6; color:#fff; }
ألان نأتي الى تركيب وسوم الاضافة نذهب الى التخطيط تم نختار المكان المناسب ثم نضغط "إضافة أداة" تم أضف HTML/JavaScrip واكتب عنوان مناسب في صندوق العنوان وضع الكود التالي في صندوق النص. وضغط حفظ
الكود اضغط هنا
الشكل األول سهل التركيب و تتواجد به 6 مواقع
للتواصل اإلجتماعي و يركب فقط من صفحة التخطيط.
1 .توجه الى لوحة تحكم بلوجر الخاصة بمدونتك.
2 .حدد المدونة التي تود إضافة مواقع التواصل
االجتماعي إليها إذا كنت تتوفر على اكتر من واحدة.
3 .توجه بعدها الى قسم التخطيط، ثم حدد مكان
إظهار لالضافة بعدها انقر على إضافة أداة، ثم إختر
.HTML/JavaScript
4 .اكتب عنوان مناسب لالضافة، مثال تابعونا على
مواقع تواصل اجتماعي ، حساباتنا على مواقع
التواصل، ثم قم بنسخ الكود أسفله التالي مع تغيير
الروابط الموجودة روابط حساباتك، ثم حفظ األداة
<div class='social-to'> <ul> <li class='facebook'><a href='رابط الفيس بوك الخاص بك '><span class='social-name'><i class='fa fa-facebook'></i></span><span class='social-count'>+ 86 ألف</span><span class='social-type'>متابع</span></a></li> <li class='twitter'><a href='رابط تويتر'><span class='social-name'><i class='fa fa-twitter'></i></span><span class='social-count'>+1.5k</span><span class='social-type'>متابع</span></a></li> <li class='rss'><a href='رابط رس'><span class='social-name'><i class='fa fa-rss'></i></span><span class='social-count'>+25 ألف</span><span class='social-type'>مشترك</span></a></li> <li class='googleplus'><a href='رابط جوجل بلس'><span class='social-name'><i class='fa fa-google-plus'></i></span><span class='social-count'>+ 78 ألف</span><span class='social-type'>متابع</span></a></li> <li class='youtube'><a href='رابط قناتك'><span class='social-name'><i class='fa fa-youtube'></i></span><span class='social-count'>+11 ألف</span><span class='social-type'>مشترك</span></a></li> <li class='instagram'><a href='رابط انستجرام'><span class='social-name'><i class='fa fa-instagram'></i></span><span class='social-count'>+2.7k</span><span class='social-type'>متابع</span></a></li> </ul> </div> <style>/* Social Media */ .social-to ul li.rss a{ background:#ffac35} .social-to ul li.googleplus a{ background:#DD4B39} .social-to ul li.twitter a{ background:#4cadf7} .social-to ul li.facebook a{ background:#416dcb} .social-to ul li.instagram a{ background:#4586bb} .social-to ul li.youtube a{ background:#e4312a} .social-to ul li .social-type{ float:left} .social-to ul li .social-name{ float:right; margin-left:8px} .social-to ul li a{ display:block; border-bottom:3px solid rgba(0,0,0,0.09); margin-bottom:8px; color:#fff; padding:10px 18px; font-size:18px; border-radius:4px; </style>
بعد ان تقوم بالذهاب الى لوحة التحكم
ثم تحرير HTML المدونة.
تقوم بضغط على اخصار البحث F + CTRL.
يظهر مربع البحث نضع [[<>/skin:b >ثم
.ENTRER
ونضع فوقة/اعالء كواد احد اإلشكال التالية
حسب ختيارك
مرحبا بكم في جريدة وموقع كلام فور يو