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

  • الصفحة غير موجودة ، 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>

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

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

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



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

    مواضيع قد تهمك ايضا

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

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

    Mohon Aktifkan Javascript!Enable JavaScript

    إتصل بنا

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