404
الصفحة او الكلمة التي تبحث (ي) عنها لا يوجد ما يطابقها

الجمعة، 3 فبراير، 2017

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

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



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

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


  • الإضافة تتمثل فى كودين فقط كود وهم html و css
  • الإضافة يمكنك أستخدامها فى مدونه الأن نمر لأول كود هو Css 
  • وسوف توقم بوضع هذه الكود فقط الوسم]]></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;
}

  • الأن الخطوة الثانية الخاصة بكود الـ 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>

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

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

لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق


مواضيع أخر من المدونة

شارك الموضوع ليستفيد الجميع

ليست هناك تعليقات:

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

إتصل بنا

الإسم الكريم البريد الإلكتروني مهم الرسالة مهم
جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر