أضافة فوتر لشعارك ولأقسام مدونتك لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته مرحبا بالجميع موضوع جديد بعد العودة من جديد للعمل على المدونة وهو موضوع بسيط وقد يهتم به الكثيرون وهو أضافة فوتر مثل الذى يتم أستخدامه فى شركة حسوب الشهيرة.

ويمكنك أستخدامه فى بلوجر لوضع مواقع تواصل مع شعار أو أى شئ تريد أو مدونات أخر لديك ويمكنك معاينة الفوتر فى اى موقع تابع لشركة حسوب مثل موقع خمسات أو معاينة من الرابط التالى .

معاينة الأضافة من موقع خمسات

معاينة

شرح التركيب للإضافة

1. الإضافة تتمثل فى كودين فقط كود وهم html و css
2. الإضافة يمكنك أستخدامها فى مدونه الأن نمر لأول كود هو Css 
3. وسوف توقم بوضع هذه الكود فقط الوسم]]></b:skin>فى مدونتك

#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;
}

1. الأن الخطوة الثانية الخاصة بكود الـ HTML  الذى سوف تضعه فوق حقوق مدونتك

<div id="footer">
        <div class="footer-content">
            <div class="hsoub-logo">
                <a href="#" class="campaign-url" target="_blank">
                  <img src="https://www.hsoub.com/assets/images/hsoub-logo.svg" alt="حسوب"/>
                </a>
            </div>
            <div class="footer-brands">
              <div class="brand-item">
                <a href="#" class="icon brand-mostaql campaign-url" title="منصّة العمل الحر العربية" target="_blank"></a>
                <a href="#" class="url campaign-url" target="_blank">مستقل</a>
              </div>
              <div class="brand-item">
                <a href="#" class="icon brand-khamsat campaign-url" title="سوق بيع وشراء الخدمات المصغّرة" target="_blank"></a>
                <a href="#" class="url campaign-url" target="_blank">خمسات</a>
              </div>
              <div class="brand-item">
                <a href="#" class="icon brand-hsoub campaign-url" title="أعلن على الإنترنت في العالم العربي" target="_blank"></a>
                <a href="#" class="url campaign-url" target="_blank">إعلانات حسوب</a>
              </div>
              <div class="brand-item">
                <a href="#" class="icon brand-academy campaign-url" title="تعلّم وطوّر مهاراتك بلغتك" target="_blank"></a>
                <a href="#" class="url campaign-url" target="_blank">أكاديمية حسوب</a>
              </div>
              <div class="brand-item">
                <a href="#" class="icon brand-io campaign-url" title="ناقش أشخاصًا بنفس اهتماماتك" target="_blank"></a>
                <a href="#" class="url campaign-url" target="_blank">حسوب I/O</a>
              </div>
              <div class="brand-item">
                <a href="#" class="icon brand-suar campaign-url" title="استمتع بأجمل الصور على الإنترنت" target="_blank"></a>
                <a href="#" class="url campaign-url" target="_blank">صور</a>
              </div>
            </div>
        </div>
    </div>

1. الأن يمكنك حفظ القالب ولكن بعد التعديل عليه بخصوص كل ما تريد 
2. هكذا يكون هذه هو موضوع اليوم

بالتوفيق للجميع 

المصدر عالم المدون