المواضيع الأخيرة
» [تومبيلات] حصريا قالب الاحصائيات index_body احترافي جدا مع تاثيرات رهيبة مجانا للجميع
من طرف دلوعة بكيفي الأحد سبتمبر 24, 2017 10:20 pm

» [تومبيلات] آخر المواضيع بشكل جديد وعصري مع أفضل الأعضاء
من طرف 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 أعضاء في هذا المنتدى
طاقم المنتدى المتواجد حاليا

[حصري] فوتر احترافي للمنتديات من تصميم بؤرة التطوير

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

avatar
Belm assem
مؤسس المنتدى

مؤسس المنتدى
عدد المساهمات : 24
النقاط : 990
السٌّمعَة : 0
تاريخ التسجيل : 07/07/2016
معاينة صفحة البيانات الشخصي للعضو http://focus-dev.ahlamountada.com

مُساهمة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
النقاط : 940
السٌّمعَة : 1
تاريخ التسجيل : 14/07/2016
معاينة صفحة البيانات الشخصي للعضو

مُساهمةMY_ASWAN في الخميس يوليو 14, 2016 10:16 pm

كود رائع ومميز
طرحت فابدعت دمت ودام عطائك
سلمت اناملك الذهبيه على ماخطته لنا
اعذب التحايا لك
لك خالص احترامي

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

للمشاركة انت بحاجه الى تسجيل الدخول او التسجيل

يجب ان تعرف نفسك بتسجيل الدخول او بالاشتراك معنا للمشاركة

التسجيل

انضم الينا لن يستغرق منك الا ثوانى معدودة!


أنشئ حساب جديد

تسجيل الدخول

ليس لديك عضويه ؟ بضع ثوانى فقط لتسجيل حساب


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى