شرح تركيب Footer على مواقع ucoz - مجتمع uCoz العربي للدعم والمساعدة

مشاركة # 1 | 08:21 10.09.2014

حياكم الله اخواني اعضاء ucoz، ان شاء الله اليوم نتطرق الى موضوع نادر ربم في جل منتديات الدعم التابعة ل: ucoz

اعلم اخي العضو انه يمكنك وضع اي فوتر (Footer) يعجبك، لااقصد الفواتر التابعة لنظام ucoz بل كل القواتر biggrin

والطريقة اكثر من بسيطة

وكل ما تحتاجه هو صفحة ملف css وصفحة الجزئ السفلي

1- في تعديل القوالب الجزئ السفلي للموقع لا تحذف الكود الاجباري ل ucoz وكود حقوق موقعك
2- اذا كان عندك فوتر ممكن وضع الكود الاجبري وكود الحقوق داخل او خارج الفوتر حسب اختياراتك انت
3- تغير كود الفوتر الجزئ السفلي و تغير الكود الموجود في صفحة ملف css
4- في ملف css ابحث عن كلمة Footer وضع الكود،ممكن ستجد

كود

/*--------------------- Footer start ---------------------*/
[color=purple]ضع كود css بين Footer start و Footer end[/color]
/*--------------------- Footer end ---------------------*/

وهذه امثلة لبعض الفترات والمثال الاول موجود في التصميم رقم # 797 لنظام ucoz
- هذا الكود مرفق معاه الكود الاجباري وكود حقوق موقعك

الكود يوضع في تصميم » التحكم بتصميم (النماذج) » القسم السفلي للموقع

كود

<div id="footer">
<div id="footer-block">
<div id="copyright">Copyright MyCorp (c) $YEAR$</div>
<div id="powered_by"> $POWERED_BY$</div>
</div>
</div>

كود css يوضع في تصميم » التحكم بتصميم (css)

كود

/*--------------------- Footer start ---------------------*/

#footer {
   clear: both;
   width: 100%;
   height: 76px;
   margin-top: 20px;
   background: url(/.s/t/797/20.gif);
}

#footer-block {
   width: 1000px;
   margin: auto;
   font: 11px 'Tahoma';
   color: #cccccc;
}

#copyright {
   float: left;
   margin-left: 10px;
   width: 45%;
   line-height: 76px;
   text-align: left;
   text-transform: uppercase;
}

#powered_by {
   float: right;
   margin-right: 10px;
   width: 45%;
   line-height: 31px;
   margin-top: 22px;
   text-align: right;
}

#powered_by img {
   vertical-align: middle !important;
}

/*--------------------- Footer end ---------------------*/

كود اخر لل Footer، الكود الاجباري وكود حقوق الموقع موجودة
لاننسى تغير الصور ووضعها في ادارة الملفات كي تبقى مرتبطة بمواقعنا مادامت مواقعنا موجودة وكي لا تحذف من النت
وقم بالتعديلات اللازمة في وضع روابطك الخاصة

الكود يوضع في تصميم » التحكم بتصميم (النماذج) » القسم السفلي للموقع

كود

<footer id='footerr'>

   <div class='inner-wrapper' id='footer-container'>
   <div id='copyright'>

   <span class='site-name'><div id="copyright">Copyright MyCorp (c) $YEAR$</div></span>
   © | اكتب اي شيئ<a href='#'><div id="powered_by"> $POWERED_BY$</div></a>
   </div>

   <ul class='social-menu'>
   <li title='Facebook'>
   <a href='رابط الفيس بوك الخاص بك'><img alt='Facebook' height='34' src='http://s26.postimg.org/bee0b3p1h/facebook.png' target='_blank' width='34'/></a>
   </li>
   <li title='Twitter'>
   <a href='رابط التويتر الخاص بك'><img alt='Twitter' height='34' src='http://s26.postimg.org/addrlz81x/twitter.png' target='_blank' width='34'/></a>
   </li>
   <li title='Feed'>
   <a href='رابط التغذية'><img alt='Feed' height='34' src='http://s26.postimg.org/shgs6m5qd/feed.png' target='_blank' width='34'/></a>
   </li>
   <li title='Google+'>
   <a href='رابط صفحتك قوقل+'><img alt='Google+' height='34' src='http://s26.postimg.org/jnpvpiirp/google.png' target='_blank' width='34'/></a>
   </li>
   </ul>

   <div class='clear'/>
   </div>
</footer>

كود css يوضع في تصميم » التحكم بتصميم (css)

كود

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

اعتذر على عدم وجود الامثلة بالصور smile

اظافات ucoz | دعم مواقع ucoz | الدعم المتقدم لمواقع ucoz دروس، اضافات، قوالب, دعم وتطوير مواقع ucoz

انطلاقتك نحو انشاء المواقع تبدا من اول نقطة

آخر تحديثات uCoz

آخر المواضيع