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

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

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

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

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