المواضيع الأخيرة
» [تومبيلات] حصريا قالب الاحصائيات index_body احترافي جدا مع تاثيرات رهيبة مجانا للجميع
من طرف Eslam Love الأربعاء أغسطس 01, 2018 12:03 am
» [تومبيلات] آخر المواضيع بشكل جديد وعصري مع أفضل الأعضاء
من طرف Eslam Love الأحد يونيو 18, 2017 9:40 pm
» أفضل أنميات صيف 2017 | قائمة أنميات صيف 2017
من طرف samih السبت مايو 27, 2017 5:22 pm
» ستايل FAE العصري والإحترافي والمتجاوب مع جميع شاشات العرض لمنتديات أحلى منتدى
من طرف crash101094 الثلاثاء أبريل 04, 2017 1:57 am
» تركيب ستايل
من طرف taher70 الإثنين أكتوبر 17, 2016 7:55 pm
» الموضوع الموحد للإجابة عن استفساراتكم بخصوص ستايل FAE وآخر الإشعارت
من طرف AHMED2INFO الأحد أكتوبر 16, 2016 1:29 am
» [JavaScript] كيفية تغيير رمز @ لمشرفين علبة الدردشة لأحلى منتدى حصريا على بؤرة التطوير
من طرف beto السبت سبتمبر 03, 2016 2:21 am
» طلب تحويل بوابة والتعديل عليها
من طرف Belm assem الأربعاء أغسطس 10, 2016 9:05 pm
» [تومبيلات] قالب topics_list_box لاظهار صورة المواضيع في الأقسام لمنتديات أحلى منتدى - بؤرة التطوير
من طرف D.YouSSef الثلاثاء أغسطس 09, 2016 1:09 pm
» اشياء تفيدك في حياتك اليوميه
من طرف D.YouSSef الثلاثاء أغسطس 09, 2016 12:19 pm
من طرف Eslam Love الأربعاء أغسطس 01, 2018 12:03 am
» [تومبيلات] آخر المواضيع بشكل جديد وعصري مع أفضل الأعضاء
من طرف Eslam Love الأحد يونيو 18, 2017 9:40 pm
» أفضل أنميات صيف 2017 | قائمة أنميات صيف 2017
من طرف samih السبت مايو 27, 2017 5:22 pm
» ستايل FAE العصري والإحترافي والمتجاوب مع جميع شاشات العرض لمنتديات أحلى منتدى
من طرف crash101094 الثلاثاء أبريل 04, 2017 1:57 am
» تركيب ستايل
من طرف taher70 الإثنين أكتوبر 17, 2016 7:55 pm
» الموضوع الموحد للإجابة عن استفساراتكم بخصوص ستايل FAE وآخر الإشعارت
من طرف AHMED2INFO الأحد أكتوبر 16, 2016 1:29 am
» [JavaScript] كيفية تغيير رمز @ لمشرفين علبة الدردشة لأحلى منتدى حصريا على بؤرة التطوير
من طرف beto السبت سبتمبر 03, 2016 2:21 am
» طلب تحويل بوابة والتعديل عليها
من طرف Belm assem الأربعاء أغسطس 10, 2016 9:05 pm
» [تومبيلات] قالب topics_list_box لاظهار صورة المواضيع في الأقسام لمنتديات أحلى منتدى - بؤرة التطوير
من طرف D.YouSSef الثلاثاء أغسطس 09, 2016 1:09 pm
» اشياء تفيدك في حياتك اليوميه
من طرف D.YouSSef الثلاثاء أغسطس 09, 2016 12:19 pm
المواضيع الأكثر شعبية
أفضل 10 أعضاء في هذا المنتدى
![[حصري] فوتر احترافي للمنتديات من تصميم بؤرة التطوير Poll_c10](https://i.servimg.com/u/f86/18/21/41/30/poll_c10.gif?poll=cap_r){kind=small}
![[حصري] فوتر احترافي للمنتديات من تصميم بؤرة التطوير Poll_m10](https://i.servimg.com/u/f86/18/21/41/30/poll_m10.gif?poll=m){kind=small}
![[حصري] فوتر احترافي للمنتديات من تصميم بؤرة التطوير Poll_c10](https://i.servimg.com/u/f86/18/21/41/30/poll_c10.gif?poll=cap_l){kind=small}
طاقم المنتدى المتواجد حاليا
[حصري] فوتر احترافي للمنتديات من تصميم بؤرة التطوير
صفحة 1 من اصل 1 • شاطر
![[حصري] فوتر احترافي للمنتديات من تصميم بؤرة التطوير Empty](https://2img.net/i/empty.gif)
- Belm assem
مؤسس المنتدى
- عدد المساهمات : 24
النقاط : 6164
السٌّمعَة : 0
تاريخ التسجيل : 07/07/2016 -
Belm assem الأحد يوليو 10, 2016 9:49 pm
السلام وعليكم ورحمة الله وبركاته
نقدم لكم اليوم عمل حصري على بؤرة التطوير وهو فوتر احترافي هدية للجميع
صورة للفوتر :
مميزاته :
ألوان جذابة وراقية تصلح لكل المنتديات
تأثيرات احترافية على أزرار مواقع التواصل الإجتماعي وعلى الروابط النصية
الآن ننتقل الى كيفية التركيب :
نتوجه الى قالب overall_footer_end :
ونحذف مابداخله ونقوم بوضع الأكواد التالية :
- الكود:
<footer>
<div class="right lists">
<ul class="list1">
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
</ul>
<ul class="list1">
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
</ul>
<ul class="list1">
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
<li><a href="#" alt="رابط نصي" title="رابط نصي">رابط نصي</a></li>
</ul>
</div>
<div class="logo" alt="{L_INDEX}" title="{L_INDEX}"></div>
<div class="social">
<ul>
<a href="https://www.fb.com/assemDz0" target="_blank" title="صفحتنا على فيس بوك"><li id="fb"></li></a>
<a href="https://www.twitter.com/" target="_blank" title="صفحتنا على تويتر"><li id="tw"></li></a>
<a href="https://www.youtube.com/" target="_blank" title="قناتنا على يوتيوب"><li id="yt"></li></a>
<a href="http://focus-dev.ahlamountada.com" target="_blank" title="موقعنا"><li id="web"></li></a>
</ul>
</div>
</footer>
<div class="foot">
<h5>تصميم وتطوير </h5><a href="http://focus-dev.ahlamountada.com" alt="تصميم وتطوير عاصم فور يو - بؤرة التطوير" title="تصميم وتطوير عاصم فور يو - بؤرة التطوير"><span class="copy"></span></a>
<p>جميع الحقوق محفوظة لـ{L_INDEX}</p>
</div>
نقوم بالحفظ ثم ننشر القالب
ثاني خطوة نتوجه الى ورقة css :
ونضع الأكواد التالية :
- الكود:
/*Footer powered by : http://focus-dev.ahlamountada.com - assemDz*/
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Droid Arabic Kufi;
}
.right{
float:right;
}
.left{
float:left;
}
footer{
width:100%;
height:330px;
background-color:#4e3739;
padding:50px;
position:relative;
}
.logo{
background-image:url('http://i35.servimg.com/u/f35/19/45/12/26/logo19.png');
width:202px;
height:64px;
position:absolute;
left:50px;
}
.lists ul{
list-style:none;
}
.list1 {
float:right;
margin-left:30px;
}
.list1 li{
display:block;
padding:10px 30px;
background-color:#6d4c4f;
margin-bottom:10px;
transition:all ease-in-out 0.3s;
-webkit-transition:all ease-in-out 0.3s;
}
.list1 li:hover{
padding:10px 40px;
}
ul.list1 a {
color: #fff;
}
.list1 a{
text-decoration:none;
color:#fff;
}
.social{
margin: 90px 0 0 30px;
display:inline-block;
float:left;
}
.social li{
display:inline-block;
float:left;
transition:all .2s ease-in-out;
-webkit-transition:all ease-in-out 0.2s;
}
#web{
width:33px;
height:33px;
background-image:url('http://i35.servimg.com/u/f35/19/45/12/26/social10.png');
background-position:0px 0px;
}
#web:hover{
width:33px;
height:33px;
background-image:url('http://i35.servimg.com/u/f35/19/45/12/26/social10.png');
background-position:0px -33px;
}
#yt{
width:33px;
height:33px;
background-image:url('http://i35.servimg.com/u/f35/19/45/12/26/social10.png');
background-position:-98px 0px;
}
#yt:hover{
width:33px;
height:33px;
background-image:url('http://i35.servimg.com/u/f35/19/45/12/26/social10.png');
background-position:-98px -33px;
}
#tw{
width:33px;
height:33px;
background-image:url('http://i35.servimg.com/u/f35/19/45/12/26/social10.png');
background-position:-195px 0px;
}
#tw:hover{
width:33px;
height:33px;
background-image:url('http://i35.servimg.com/u/f35/19/45/12/26/social10.png');
background-position:-195px -33px;
}
#fb{
width:33px;
height:33px;
background-image:url('http://i35.servimg.com/u/f35/19/45/12/26/social10.png');
background-position:-226px 0px;
}
#fb:hover{
width:33px;
height:33px;
background-image:url('http://i35.servimg.com/u/f35/19/45/12/26/social10.png');
background-position:-226px -33px;
}
.foot{
height:50px;
background-color:#6d4c4f;
padding:0 70px;
position:relative;
}
.foot p{
text-align:right;
color:#fff;
font-size:14pt;
line-height:0px;
position: absolute;
top: 25px;
right: 70px;
}
.foot h5{
display:inline-block;
margin-left:10px;
color:#fff;
line-height:50px;
float:left;
}
.copy{
background-image:url('http://i35.servimg.com/u/f35/19/45/12/26/copy10.png');
width:45px;
height:45px;
float:left;
}
ملاحظة : يمنع منعا باتا حذف الحقوق
ويمنع النقل بدون ذكر المصدر
المصدر : تصميم @assemDz من موقع بؤرة التطوير
اذا كان هناك خلل او طلب في تغيير الوان الفوتر
يرجى التواصل معنا
تحياتي
- MY_ASWAN
عضو
- عدد المساهمات : 6
النقاط : 6114
السٌّمعَة : 1
تاريخ التسجيل : 14/07/2016
MY_ASWAN الخميس يوليو 14, 2016 10:16 pm
كود رائع ومميز
طرحت فابدعت دمت ودام عطائك
سلمت اناملك الذهبيه على ماخطته لنا
اعذب التحايا لك
لك خالص احترامي
مواضيع مماثلة
للمشاركة انت بحاجه الى تسجيل الدخول او التسجيل
يجب ان تعرف نفسك بتسجيل الدخول او بالاشتراك معنا للمشاركة
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى