إضافة قائمة فوق الفوتر , هذه القائمة كانت خاصة بمدون محترف ولكن طلبها احد اعضاء المدونة و نحن لا نبخل اعضائنا و متابعين مدونة مدون محترف لذلك قررنا طرح الموضوع ما يميز هذه القائمة يمكنك إضافتها بأي مكان و ايضا التحكم بشكلها و وضع اقسام بها بالعدد الذي تريده لمعاينة القائمة سوف تجدها في مدونتنا اعلى الفوتر
طريقة التركيب
- ادخل إلى لوحة تحكم المدونة
- انقر على قالب ثم تحرير HTML
الان ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* -- Menu bottompic -- */
.menubottompic {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbvGGhB1eLFTR4q8hlFhsq2EjCFw5EV5PH17LBy-L1YPfbymdy8XQ2Y8YuoxTADyNYepSSarwpvcq7qesFw3zHN5VNsgKR_sjDpiKCAVxnFrt5fp_2OWtzv-JrCjsmnMD1ETa5Zl9W04/s1600/mudwnp-footer.png")
repeat-x scroll left top transparent;width: 100%;height: 62px;margin: 30px auto -40px;position: relative;z-index: 9999;}
#menubottom-container {width:950px;margin:0px auto;padding:0px;}
.menubottom{float:left; margin:0 auto;padding:15px 0}
.menubottom ul{padding-left:0;color:#fff;text-transform:none;list-style-type:none;font:normal 12px droid arabic kufi,sans-serif;margin:0}
.menubottom li{display:inline;margin:0}
.menubottom li a{border-right:1px solid #333; float:left;display:block;text-decoration:none;color:#ddd;line-height:1.5em;padding:0px 12px; font-weight:bold;}
.menubottom li a:hover{text-decoration:underline; color:#fff;}
التنسيق
الان لتغيير خلفية القائمة و لونها ابحث عن الصور التي باللون الاحمرلتغيير عرض و طول القائمة ابحث عن الاكواد التي باللون الازرق
الان كيفية إضافة الاقسام
تستطيع إضافتها في اي مكان مثلا لو اردت إضافتها اعلى الفوتر ابحث في مدونتك عن كلمة Footer-Wrapper واضف الكود التالي فوقه
<!-- Menu Bottom -->
<div class='menubottompic'>
<div id='menubottom-container'>
<div class='menubottom'>
<ul>
<li><a href='/p/sitemap.html'>الفهرس</a></li>
<li><a href='/p/c.html'>راسلنا</a></li>
<li><a href='/p/something-about-me.html'>من نحن</a></li>
<li><a href='/p/terms-of-use.html'>شروط الاستخدام</a></li>
<li><a href='/p/privacy-policy.html'>سياسة الخصوصية</a></li>
</ul>
</div>
</div>
</div>
اي سؤال او استفسار لا تترد بوضعه في تعليق
No comments:
Post a Comment