• صفحة 1 من%
  • 1
مجتمع uCoz العربي للدعم والمساعدة » اصحاب المواقع والويب ماسترز » قوالب وستايلات » شرح تركيب Footer على مواقع ucoz (وصف الموضوع)
شرح تركيب Footer على مواقع ucoz
ياسين
مشاركات: 1369
السمعة: 11
مشاركة # 1 | 08:21




حياكم الله اخواني اعضاء 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"><!-- <copy> -->Copyright MyCorp (c) $YEAR$<!-- </copy> --></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"><!-- <copy> -->Copyright MyCorp (c) $YEAR$<!-- </copy> --></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



انطلاقتك نحو انشاء المواقع تبدا من اول نقطة
div
مشاركات: 354
السمعة: 12
مشاركة # 2 | 17:03
شكرآ اخي ياسين على المجهود الطيب.

انا استخدم Global blocks لنفس الغرض ،،، طريقة سهلة وعملية ...

like this ....
$GLOBAL_BOTTOM$

Bibo
مشاركات: 111
السمعة: 0
مشاركة # 3 | 19:07
بارك الله فيك اخي ياسيين على الموضوع القيم
ياسين
مشاركات: 1369
السمعة: 11
مشاركة # 4 | 09:08
div, Bibo, جزاكما الله خيرا، شكرا على المرور العطر smile

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



انطلاقتك نحو انشاء المواقع تبدا من اول نقطة
مجتمع uCoz العربي للدعم والمساعدة » اصحاب المواقع والويب ماسترز » قوالب وستايلات » شرح تركيب Footer على مواقع ucoz (وصف الموضوع)
  • صفحة 1 من%
  • 1
بحث: