السلام عليكم ورحمة الله وبركاته مرحبا بالجميع موضوع جديد بعد العودة من جديد للعمل على المدونة وهو موضوع بسيط وقد يهتم به الكثيرون وهو أضافة فوتر مثل الذى يتم أستخدامه فى شركة حسوب الشهيرة.
ويمكنك أستخدامه فى بلوجر لوضع مواقع تواصل مع شعار أو أى شئ تريد أو مدونات أخر لديك ويمكنك معاينة الفوتر فى اى موقع تابع لشركة حسوب مثل موقع خمسات أو معاينة من الرابط التالى .
معاينة الأضافة من موقع خمسات
شرح التركيب للإضافة
- الإضافة تتمثل فى كودين فقط كود وهم html و css
- الإضافة يمكنك أستخدامها فى مدونه الأن نمر لأول كود هو Css
- وسوف توقم بوضع هذه الكود فقط الوسم]]>فى مدونتك
#footer {
padding: 50px 10px 20px 10px;
}
.footer-content {
overflow: hidden;
max-width: 100%;
margin: 0 auto;
direction: rtl;
}
.hsoub-logo {
max-width: 160px;
margin: 0 auto;
}
.hsoub-logo img {
width: 100%;
}
.footer-brands {
text-align: center;
margin-top: 25px;
}
.brand-item {
display: inline-block;
width: 104px;
height: 80px;
text-align: center;
padding: 10px;
}
.brand-hsoub, .brand-khamsat, .brand-mostaql, .brand-academy, .brand-io, .brand-suar {
background: rgba(0, 0, 0, 0) url("https://static.hsoubcdn.com/footer/img/brands-colors.svg") no-repeat scroll 0 0;
display: block;
margin: 0 auto;
height: 40px;
width: 40px;
outline: medium none;
margin-bottom: 8px;
}
.brand-item a.url {
display: inline-block;
text-decoration: none;
text-align: center;
color: #313335;
font: 400 13px tahoma;
width: 100px;
}
.brand-mostaql {
background-position: left -105px;
}
.brand-khamsat {
background-position: left -208px;
}
.brand-hsoub {
background-position: left -1px;
}
.brand-academy {
background-position: left -416px;
}
.brand-io {
background-position: left -312px;
}
.brand-suar {
background-position: left -520px;
}
- الأن الخطوة الثانية الخاصة بكود الـ HTML الذى سوف تضعه فوق حقوق مدونتك
- الأن يمكنك حفظ القالب ولكن بعد التعديل عليه بخصوص كل ما تريد
- هكذا يكون هذه هو موضوع اليوم
بالتوفيق للجميع
المصدر عالم المدون