[ 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 لكى تتوافق مع استيل منتداك
وشكرا والسلام عليكم :pub1:

بارك الله فيك ياهشام دائماً مبدع

عفوا ياعمورة ومشكووور ع المرور

.. up

يا نهار اسود ده لو كان سي اس اس

وربنا كان يبقى

خرافي يا ابني انت

thnxxxxxxx u reply

ياجامد يا هيشو

مرسي الكــــــــــــــ~

فلة شمعة منورة

تسلم يا حاج

:roll:

تسلم الايادي يا هشاممم..

جزاك الله كل خير

تسلم ايديك شكرا

شكراا بس وين كود الس اس

شكرا يا استاذ هشام

بس ازى نضع فيها روابط مثل الفرسان

شكرا على كود

مشكور يا غالي على الكود وكنت اتمنى ان يكون في منتداي تومبيلات لكن لانه جديد وما زال يحتاج الكثير لاضع به تومبيلات مع هيك مشكور يا غالي على الكود الرائع ...