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

إذا كنت من متابعي كرة القدم مثلي فمن المؤكد أنك تزور يوميا موقع كووورة 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifueW_KuSm55sioAUbsmF9g1TvKVHiInv9MesWJydgvHy-VZtA0AGxQ0F4nc7-l73g_JCQPE2NMh962cyOQItUJHxappownez8VHcAGNhFGyYhyphenhypheniAMHvDXi9N_-lbRRytTl52dgTxhaac/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>

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

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