[ Template ] فوتر حديث مزود بتقنيه css ..

.
.
أولا مشاهدة لناتج التمبليت
.

https://i.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>

.
.

ملحوظه :
رابط خلفيه الفوتر كالتالى : https://i.servimg.com/u/f62/15/62/91/07/untitl11.png
ويمكنك تغير الشعار فى يسار الموقع من خلال الصوةر التاليه : https://i.servimg.com/u/f62/15/62/91/07/hesham10.png

.
.
غير الصور التاليه فى كود المرفق فى css لكى تتوافق مع استيل منتداك
وشكرا والسلام عليكم