مثال
http://i62.servimg.com/u/f62/15/62/91/07/foter10.png
.
.
طريقه التركيب :
أولا ندخل: لوحه الادارة >> مظهر المنتدى >> الوان >> ورقه css
.
ثم نضع الكود التالى :
.
#footer { width:auto; cursor: crosshair margin:auto; height:220px; color:#c3c3c3; direction:rtl; background-image: url('http://i62.servimg.com/u/f62/15/62/91/07/untitl11.png'); } img{ border:none; } .footerleft { background-image: url('http://i62.servimg.com/u/f62/15/62/91/07/hesham10.png'); background-repeat: no-repeat; background-position: left; height: 190px; } .heshambb{ float:right; width:230px; padding:10px; border-right:1px dashed #666; } .heshambb h3{ font-family:"Arial Black", Gadget, sans-serif; font-size:16px; color:#FFF; font-weight:bold; background-color:#0a95b8; padding-right:10px; margin-bottom:3px; } .heshambb ul li { list-style-type:none; text-decoration: none; padding:5px; cursor: crosshair; float: right; } .heshambb p { font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#696969; text-align: justify; } .heshambb ul li a { color:#1c6b7f; text-decoration: none; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; } .heshambb ul li a:hover{ color:#FFF; } .heshambb ul li:hover{ cursor: crosshair; background-color: #0e83a0; color: #FFF; } /*End footer style*/
[ Template ] فوتر حديث مزود بتقنيه css ..
من طرف heshambb في الأربعاء مارس 16, 2011 11:50 am
.
.
أولا مشاهدة لناتج التمبليت
.
تصغير الصورة تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.
http://i62.servimg.com/u/f62/15/62/91/07/foter10.png
.
.
طريقه التركيب :
أولا ندخل: لوحه الادارة >> مظهر المنتدى >> الوان >> ورقه css
.
ثم نضع الكود التالى :
.
- الكود: ---------تضليل المحتوى
#footer { width:auto; cursor: crosshair margin:auto; height:220px; color:#c3c3c3; direction:rtl; background-image: url('http://i62.servimg.com/u/f62/15/62/91/07/untitl11.png'); } img{ border:none; } .footerleft { background-image: url('http://i62.servimg.com/u/f62/15/62/91/07/hesham10.png'); background-repeat: no-repeat; background-position: left; height: 190px; } .heshambb{ float:right; width:230px; padding:10px; border-right:1px dashed #666; } .heshambb h3{ font-family:"Arial Black", Gadget, sans-serif; font-size:16px; color:#FFF; font-weight:bold; background-color:#0a95b8; padding-right:10px; margin-bottom:3px; } .heshambb ul li { list-style-type:none; text-decoration: none; padding:5px; cursor: crosshair; float: right; } .heshambb p { font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#696969; text-align: justify; } .heshambb ul li a { color:#1c6b7f; text-decoration: none; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; } .heshambb ul li a:hover{ color:#FFF; } .heshambb ul li:hover{ cursor: crosshair; background-color: #0e83a0; color: #FFF; } /*End footer style*/
.
.
ثم مظهر المنتدى >>التومبلايتات و القوالب >> ادارة عامه >> نحرر ملف overall_footer
ثبحث عن وسمين :
</body>
</html> فى نهايه الملف
ونضع قبلها التالى :
-
<!--Start Footer--> <div id="footer"> <div class="footerleft"> <div class="heshambb"> <h3> <img src="http://i62.servimg.com/u/f62/15/62/91/07/stick-10.png" alt="myforum" /> نبذه تعريفيه</h3> <p>تمبليت فوتر حديث بتقنيه css - مقدم من heshamBB لشركه احلى منتدى - تمبليت فوتر حديث بتقنيه css - مقدم من heshamBB لشركه احلى منتدى -تمبليت فوتر حديث بتقنيه css - مقدم من heshamBB لشركه احلى منتدى </p> </div> <div class="heshambb"> <h3> <img src="http://i62.servimg.com/u/f62/15/62/91/07/stick-10.png" alt="myforum" /> الوصول السريع</h3> <ul> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> </ul> </div> <div class="heshambb"> <h3><img src="http://i62.servimg.com/u/f62/15/62/91/07/stick-10.png" alt="myforum" /> الوصول السريع</h3> <ul> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> </ul> </div> <div class="heshambb"> <h3><img src="http://i62.servimg.com/u/f62/15/62/91/07/stick-10.png" alt="myforum" /> الوصول السريع</h3> <ul> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> <li><a href="#" target="_self"><img src="http://i62.servimg.com/u/f62/15/62/91/07/plus-l10.png" /> ضع رابطك هنا</a></li> </ul> </div> </div>
.
ملحوظه :
رابط خلفيه الفوتر كالتالى : http://i62.servimg.com/u/f62/15/62/91/07/untitl11.png
ويمكنك تغير الشعار فى يسار الموقع من خلال الصوةر التاليه : http://i62.servimg.com/u/f62/15/62/91/07/hesham10.png
.
.
غير الصور التاليه فى كود المرفق فى css لكى تتوافق مع استيل منتداك
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
التعليقات: { 0 }
إرسال تعليق