اليوم وبطريقة جديدة من عملي الشخصي
سنجعل الروابط التي فوق احصائيات المنتدى صورة توضيحية
تكبير الصورة معاينة الأبعاد الأصلية.
https://i.servimg.com/u/f19/18/04/55/46/120.png
بعد تركيب الكود ستصبح اكثر تطويرات صورة توضيحية للخاصية بعد تركيب الكود بادن الله
صورة توضيحية لظهورها على المنتدى
تكبير الصورة معاينة الأبعاد الأصلية.
https://i.servimg.com/u/f19/18/04/55/46/220.png
بعد وضع الماوس على خيار : روابط مهمة
تظهر على الشكل التالي
صورة توضيحية
https://i.servimg.com/u/f21/18/04/55/46/31710.png
طريقة تركيب الكود
توجه الى : لوحة الإدارة > مظهر المنتدى > التومبيلات و القوالب > إدارة عامة > ونضغط تعديل
على القالب
index_box نبحث عن :
المحتوى مخفي : يتوجب وضع رد بالموضوع ليظهر لك المحتوى
- الكود:
-
<!-- BEGIN switch_on_index -->
<ul class="linklist">
<li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> • </li>
<li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> • </li>
<li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
<!-- BEGIN switch_delete_cookies -->
<li class="rightside"><a
href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}"
rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
<!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->
ونستبدلها بالكود التالي
- الكود:
-
<!-- BEGIN switch_on_index -->
<div id="menu">
<ul>
<li><a>روابط مهمة</a>
<ul>
<li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
<li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
<li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
<li><a href="/?mode=delete_cookies">حذف ملفات الارتباط (الكوكيز)</a></li>
</ul>
</li></ul>
</div>
<script>
window.onload = function(){
$("#menu > ul > li").hover(
function(){ $(this).find("ul").slideDown('fast'); } ,
function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<!-- END switch_on_index -->
تم نتوجه الى : لوحة الإدارة > مظهر المنتدى > الوان > ورقة تصميم css
ونضيف الكود التالي :
المحتوى مخفي : يتوجب وضع رد بالموضوع ليظهر لك المحتوى - الكود:
-
/* --- Yassine Bablil --- */
#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}
#menu > ul > li {
float:right;
padding:0;
margin:0;
}
#menu > ul > li > a {
display:block; //مهمة
font:normal bold 14px tahoma;
background:#3f4040;
min-width:100px;
text-align:center;
padding:10px 15px 10px 15px;
text-decoration:none;
color:#FFF;
border-top:4px solid #FFF;
border-bottom:4px solid #00B4FF;
transition:background 500ms,color 500ms,border-color 500ms;
}
#menu > ul > li > a:hover {
background:#666;
border-top-color:#00B4FF;
color:#00B4FF;
}
#menu > ul > li > ul {
position:absolute;
top:45px; //إرتفاع القائمة
right:0;
display:none;
}
#menu > ul > li > ul > li > a {
background:#666;
display:block; //مهمة
font:normal normal 12px tahoma;
padding:5px 10px 5px 10px;
text-decoration:none;
color:#FFF;
border-bottom:1px solid #FFF;
min-width:130px;
}
#menu > ul > li > ul > li > a:hover {
background:#777;
}
بالتوفيق للجميع
تم النشر بقلم :Yassine Bablil12/11/15, 07:44 pm