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

4:49 ص

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



فوتر الموقع أو 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='http://s26.postimg.org/bee0b3p1h/facebook.png' target='_blank' width='34'/></a>
      </li>
      <li title='Twitter'>
        <a href='#'><img alt='Twitter' height='34' src='http://s26.postimg.org/addrlz81x/twitter.png' target='_blank' width='34'/></a>
      </li>
      <li title='Feed'>
        <a href='#'><img alt='Feed' height='34' src='http://s26.postimg.org/shgs6m5qd/feed.png' target='_blank' width='34'/></a>
      </li>
      <li title='Google+'>
        <a href='#'><img alt='Google+' height='34' src='http://s26.postimg.org/jnpvpiirp/google.png' target='_blank' width='34'/></a>
      </li>
    </ul>
    
    <div class='clear'/>
  </div>
</footer>
ضع رابط سياسة الخصوصية أو نموذج الأتصال بدلاً من إشارة المربع #
ولا تنسى أيضا إضافة روابط صفحاتك على مواقع التواصل الإجتماعي بدلا من المربع # فيدبرز, فيس بوك, تويتر, جوجل بلس

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

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



Tags
عبر عن شعورك

إرسال تعليق

0 تعليقات