إضافة فوتر إحترافي مع أزرار مواقع التواصل الإجتماعي أسفل كل مدونة بلوجر

السلام عليكم ورحمة الله وبركاته

فوتر بلوجر footer blogger

فوتر الموقع أو footer يقع أسفل كل مدونة أو مواقع الويب الأخرى ولا بد أن يكون منسق بشكل جميل حتى يعطي المدونة شكل أكثر فاعلية وجمالاً ولهذا اليوم سوف أقدم لكم طريقة تركيب فوتر إحترافي لمدونات بلوجر له فوائد عديدة وهو سلس وجميل تم تنسيقه وإعادة هيكلته حتى يكون جزء من كل مدونة

مميزات الفوتر:


  • شكل إحترافي منسق تماماً
  • أزرار مواقع التواصل الإجتماعي مع تأثيرات خاصة
  • متوافق مع جميع الأجهزة اللوحية, المكتبية, المحمولة




كيفية تركيب الفوتر على مدونة بلوجر:

أولا توجه إلى لوحة التحكم في مدونتك أختر القالب ثم أنقر على زر   
  بعد ذلك قم بالبحث عن الرمز ]]></b:skin> الآن أضف الكود التالي فوقه مباشرةً:

#footerr {
  background-color: #3E454C;
  bottom: 0;
  color: #7C8EA1;
  font: normal .9em 'Open Sans', sans-serif;
  right: 0;
  padding: 18px 0;

  width: 100%;
}

#footerr a {
  color: #7C8EA1;
  text-decoration: none;
}

#footerr a:hover {
  color: #FFF;
}

.inner-wrapper {
  margin: auto;
  max-width: 1200px;
  width: 90%;
}

#copyright {
  display: inline-block;
  padding: 10px 0;
}

#footer-logo {
  margin: 0 5px 0 0;
  vertical-align: middle;
}

.site-name {
  font-weight: 600;
  color: #FFF;
}

.social-menu {
  display: inline-block;
  float: left;
  /* by: www.madad2.com */
  line-height: 0;
  margin: 0;
  padding: 0;
}

.social-menu > li {
  background-color: #353B41;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 34px;
  margin: 3px;
  transition: background-color .5s;
  width: 34px;
}

.social-menu > li:hover {
  background-color: #F2762E;
}

.clear {
  clear: both;
}

@media (max-width: 767px) {
  #footer-container {
    text-align: center;
  }

  #copyright {
    display: block !important;
  }

  .social-menu {
    float: none !important;
  }
}

الخطوة الأخيرة قم بالبحث عن الرمز <footer>
أو <footer أو أسفل حقوق القالب قم بمسح جميع الروابط أسفل مدونتك ثم أستبدلها بالفوتر الجديد مع الكود التالي:

<footer id='footerr'>

  <div class='inner-wrapper' id='footer-container'>
    <div id='copyright'>
 
      <span class='site-name'>جميع الحقوق محفوظة</span>
      &#169; 2014 | <a href='#'>سياسة الخصوصية</a>
    </div>
    
    <ul class='social-menu'>
      <li title='Facebook'>
        <a href='#'><img alt='Facebook' height='34' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2p4te0lFje8-EzZ5KFjf-1q3hHd7ZiEW-B38CCcdtkEHe_kfI_EWB6BHbKTMeQmXSIUga3tHv04DsaazJfgL57WWrEaOeBz2ppw05qvJ5grtFFc38AS2XcsjgFTtSJtBNxc7Q7PqLvtNT/s1600/facebook.png' target='_blank' width='34'/></a>
      </li>
      <li title='Twitter'>
        <a href='#'><img alt='Twitter' height='34' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ME30BbIY9hWvvePX596v3Nxy4wv8gzoh2THiKiL7ChJmBrX0rcGOJ59KeabdhzIGkAIz9GkPbWVwRQpq9kdxPGmaF0toqvp6tEUOtsJjWAZPDw7vHCr2jMPYcZ3jMQvEvsp0VA1TbeJd/s1600/twitter.png' target='_blank' width='34'/></a>
      </li>
      <li title='Feed'>
        <a href='#'><img alt='Feed' height='34' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTzguViotlqIed9hUwYsfWZ9GmDG7N89HjErR-CI2ZuCPY-C4_7LWhnFIalH0eLd5Lh_I_vtrKUx69a07rYMIaQWzmywQkJfgItLWZsAi2i9DgfuAw6Mp3ssjaAid7fbmyn9RgeuHTkeNF/s1600/feed.png' target='_blank' width='34'/></a>
      </li>
      <li title='Google+'>
        <a href='#'><img alt='Google+' height='34' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkatoap5XZHjlYa6rhOhj1K0GyyeWPVws8v4Tye8TcE8YwyH5g7c76CjL1BqIfigxvcHQZSnk5ttyYJd-J43SqaZ_UeTvsMje4SarpOc-MfJtv5kD13wlqKDLqs0KaKBHfF5I3mw9cgSD/s1600/google.png' target='_blank' width='34'/></a>
      </li>
    </ul>
    
    <div class='clear'/>
  </div>
</footer>
ضع رابط سياسة الخصوصية أو نموذج الأتصال بدلاً من إشارة المربع #
ولا تنسى أيضا إضافة روابط صفحاتك على مواقع التواصل الإجتماعي بدلا من المربع # فيدبرز, فيس بوك, تويتر, جوجل بلس

بعد أن تنتهي إضغط حفظ القالب.

طريقة إضافة أخر كود يجب أن يكون أسفل المدونة تماما بحيث سوف يكون الأخير بالقالب إذا كنت مبتدء ماعليك سوى البحث عن رابط مدونتك أخر القالب أو جملة جميع الحقوق محفوظة وإزالة الأكواد الخاصة بالفوتر القديم ليس كل الفوتر فقط اكواد الروابط الموضوعة مسبقاً على القالب


مشاركات أقدم المقال التالي
14 تعليق
  • samurai
    samurai 22‏/05‏/2014، 7:28:00 م

    مشكووووور وبارك الله بيك

    موضوع رائع

    عاشت الايادي

    • مداد الجليد
      مداد الجليد 22‏/05‏/2014، 7:57:00 م

      العفو, شاكر مرورك العطر على الموضوع

  • Magdy
    Magdy 29‏/05‏/2014، 10:26:00 م

    السلام عليكم ، اود معرفة كيف اضع اعلانات ربحية اسفل التدوينة مثل الموجودة فى المدونة خاصتكم ، اعلانات اد كاش او yllix او propellerads او gateads ؟

    • مداد الجليد
      مداد الجليد 30‏/05‏/2014، 9:37:00 ص

      وعليكم السلام, تفضل بإستخدام هذا الموضوع http://www.madad2.com/2013/10/blog-post_8.html

    • مداد الجليد
      مداد الجليد 30‏/05‏/2014، 12:53:00 م

      عفواً صديقي

  • غير معرف
    غير معرف 27‏/07‏/2014، 7:58:00 ص

    مشكور

    • مداد الجليد
      مداد الجليد 29‏/07‏/2014، 9:23:00 ص

      العفو اخي العزيز شكرا لمرورك

  • عالم سيديا
    عالم سيديا 25‏/10‏/2014، 6:13:00 م

    المدونه لايوجد بها ولا كود من الاكواد السابقه الخاصه بال footer

    www.wd-cydia.com

    • مداد الجليد
      مداد الجليد 26‏/10‏/2014، 9:48:00 م

      لا بد أن يتضمن كل موقع فوتر وإذا كان لم يتم خلق واحد من قبل أنت عليك تحديد المكان الذي هو أسفل مدونتك بشكل مناسب ومن ثم تركيبه عليها

  • غير معرف
    غير معرف 05‏/09‏/2015، 7:03:00 ص

    لم يجلب اسم المدونه بعد جميع الحقوق محفوظه

    • مداد الجليد
      مداد الجليد 06‏/09‏/2015، 4:03:00 م

      يمكنك إضافتها بشكل يدوي في المكان المناسب

  • fouzi younes
    fouzi younes 31‏/05‏/2016، 2:03:00 ص

    شكرأ أخي بارك الله فيك

    • مداد الجليد
      مداد الجليد 31‏/05‏/2016، 9:49:00 م

      مرحبا بك

أضف تعليق
عنوان التعليق