فـوتـر جميل وانيق بتقنية الـ Css
فـوتـر جميل وانيق بتقنية الـ Css
فـوتـر جميل وانيق بتقنية الـ Css

السلام عليكم ورحمة الله وبركاته ،

أول موضوع لي بهالقسم ، اتمنى ان ينال على رضاكم

فوتر بتقنية الـ Css نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

اولا دعونا نقف قليلا ونستعرض الناتج النهائي للعمل نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

هذه صوره نهائيه من العمل ،

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



حسنا ، لآ بأس بـِه ،،

نأتي الان لطريقة التركيب بالمنتدى ،

أولا نذهب الى قالب الفوتر ، ونضع هذا الكود بنهاية القالب ،

كود PHP:
<!--Start Footer--> <div id="footer">   <div class="pal-girl">           <h3> <img src="images/stick-footer.png" alt="myforum" /> نبذه تعريفيه</h3>                  <p>فوتر بتقنية Css مقدم من فلسطينيه وافتخر عضوه بمعهد ترايدنت الاعدادات الشامله للاستايل فوتر بتقنية Css مقدم من فلسطينيه وافتخر عضوه بمعهد ترايدنت الاعدادات الشامله للاستايل فوتر بتقنية Css مقدم من فلسطينيه وافتخر عضوه بمعهد ترايدنت الاعدادات الشامله للاستايل</p>                  </div>         <div class="pal-girl">          <h3> <img src="images/link-footer.png" alt="myforum" /> الوصول السريع</h3>                          <ul>              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>                              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>                                              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>                                                              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>            </ul>         </div>            <div class="pal-girl">           <h3><img src="images/link-footer.png" alt="myforum" /> الوصول السريع</h3>                          <ul>               <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>                              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>                                              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>           <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>            </ul>         </div>             <div class="pal-girl">          <h3><img src="images/link-footer.png" alt="myforum" /> الوصول السريع</h3>             <ul>              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>                              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>                                              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>                                                              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>             </ul>         </div>    </div


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

اظن ان التعديل سهل ،

حسنا ،

نأتي الان لكود Css

في الستايل المراد اضافة القالب لَه نذهب الى

Css رئيسي ،

ثــم بنهاية الصفحه نذهب الى

تعاريف CSS الإضافية/Additional CSS Definitions


ونضع هذا الكود ،

كود PHP:
#footer {  width:auto;         cursor: crosshair  margin:auto;  height:220px;  color:#c3c3c3;  direction:rtl;  background-color: #dddddd;  } img{  border:none; }   .pal-girl{  float:right;  width:230px;  padding:10px;  border-right:1px dashed #666;  } .pal-girl 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;  }   .pal-girl ul li {  list-style-type:none;         text-decoration: none;  padding:5px;  cursor: crosshair;  float: right;  }  .pal-girl p {  font-family:Tahoma, Geneva, sans-serif;  font-size:12px;  color:#696969;  text-align: justify;  } .pal-girl ul li a {  color:#1c6b7f;  text-decoration: none;  font-family: Tahoma, Geneva, sans-serif;  font-size: 12px;  } .pal-girl ul li a:hover{  color:#FFF; } .pal-girl ul li:hover{  cursor: crosshair;  background-color: #0e83a0;  color: #FFF;  } /*End footer style*/ 

ونضغط على حفظ ،


وكذا يكون لديك قالب فوتر بتقنية الـ Css

جميل وانيق وسريَع وله فوائد كثيره وعديده

اتمنى ان يكون الموضوع حاز على رضاكم

وان شاء الله الاضافات وتعديلات القوالب النادره جدا سوف يتم اضافتها في القسم


فـوتـر جميل وانيق بتقنية الـ Css
فـوتـر جميل وانيق بتقنية الـ Css