إضافة فوتر بنفس تصميم موقع كووورة

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

الجزء السفلي footer تتكون من خمس مربعات افقية، شعار الموقع أو المدونة، ثم روابط الشبكات الإجتماعية وحقوق الملكية.
تصميم فوتر موقع كووورة kooora footer
فوتر موقع كووورة


اضافة الفوتر الخاصة بموقع كووورة لمدونتك

من واجهة التحكم في المدونة قم بالنقر على المظهر ثم تحرير HTML
قم بالنقر في اي مكان وسط كود القالب ثم Ctrl+F  من لوحة المفاتيح للبحث عن   </head>
فوقه مباشرة اضف الكود التالي:
<style>
#footer{
width: 80%;
margin: 0 auto;
background-color: #292929;
color: #c6c6c6;
font-size: 20px;
font-weight: 700;
clear: both;
}
div#footer a:hover {
color: #fff;
text-decoration: none;

}
inspector-stylesheet:3
div#footer a {
color: #ddd;
}
#footerx .widget ul {
padding: 0;
line-height: 1.2;
}
#footerboxes{
clear: both;
background: #292929;
padding: 0;
}

.footerbox{
text-align: right;
padding: 5px;
display: inline-block;
margin: 0;
font-size: 16px;
width: 16%;
}
.footerbox ul li {
direction: rtl;
list-style: none;
}
.footerlogo img{
float: right;
}
.footerlogo{
height: 70px;
border-bottom: 3px solid #e2787a;
}
#socialb {
padding: 0;
}
#copyright{
text-align: center;
padding: 10px 0;
font-size: 13px;
}
li#socialb ul li {
display: inline;
}
.footerbox a {
color: #e5e5e5;
}
.footer-menu,#subscribe-footer{float:none;width:auto;margin:0 20px 20px 20px}
</style>
<link href='//fontawesome.io/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>


بعدها قم بالبحث مرة أخرى عن  </body> ومن فوقه أضف الكود التالي:

<div id='footer'>
<div class='footerlogo'>
<a href='#'><img src='https://2.bp.blogspot.com/-WuuKuK7U4V8/WNAzGqzuWdI/AAAAAAAAF8M/PkZT_vuxmXkDxt2uEsfM655yVgrSZR5rQCLcB/s200/logo.png'/></a>
</div>
<div id='footerboxes'>
<div class='footerbox fbxn'>
<ul>
<li><a href='#'>عنصر 1</a></li>
<li><a href='#'>عنصر 2</a></li>
<li><a href='#'>عنصر 3</a></li>
<li><a href='#'>عنصر 3</a></li>
</ul>
</div>
<div class='footerbox fbxn'>
<ul>
<li><a href='#'>عنصر 1</a></li>
<li><a href='#'>عنصر 2</a></li>
<li><a href='#'>عنصر 3</a></li>
<li><a href='#'>عنصر 3</a></li>
</ul>
</div>
<div class='footerbox fbxn'>
<ul>
<li><a href='#'>عنصر 1</a></li>
<li><a href='#'>عنصر 2</a></li>
<li><a href='#'>عنصر 3</a></li>
<li><a href='#'>عنصر 3</a></li>
</ul>
</div>
<div class='footerbox fbxn'>
<ul>
<li><a href='#'>عنصر 1</a></li>
<li><a href='#'>عنصر 2</a></li>
<li><a href='#'>عنصر 3</a></li>
<li><a href='#'>عنصر 3</a></li>
</ul>
</div>
<div class='footerbox fbxnx'>
<ul>
<li><a href='#'>عنصر 1</a></li>
<li><a href='#'>عنصر 2</a></li>
<li><a href='#'>عنصر 3</a></li>
<li id='socialb'>
<ul>
<li><a href='http://linkedin.com/'><i class='fa fa-twitter'/></a></li>
<li><a href='http://linkedin.com/'><i class='fa fa-linkedin'/></a></li>
<li><a href='http://twitter.com/'><i class='fa fa-facebook'/></a></li>
<li><a href='http://plus.google.com/'><i class='fa fa-google-plus'/> </a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id='copyright'>
كل الحقوق محفوظة © <data:blog.title/>
</div>
</div>


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

الدرس بالفيديو: