السلام عليكم ورحمة الله وبركاته
اليوم وبطريقة جديدة من عملي الشخصي وبرمجتي
سنجعل الروابط التي فوق احصائيات المنتدى بطريقة جميلة وراائعة مطورة
صورة توضيحية قبل تركيب الكود
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/f19/18/04/55/46/31710.pngابتكار متميز جديد مطور للمنتديات
=== الآن مع الكود وطريقة التركيب طبعا ====
نتوجه الى : لوحة الإدارة > مظهر المنتدى > التومبيلات و القوالب > إدارة عامة - لنسخة الثالثة phpBB3:
نضغط تعديل
على القالب
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 -->
واضغط سجل وانشر القالب
- لنسخة PunBB:
نضغط تعديل
على القالب
index_box
نبحث عن
- الكود:
-
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
<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>
</ul>
<!-- BEGIN switch_delete_cookies -->
<p class="right">
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
</p>
<!-- END switch_delete_cookies -->
</div>
<!-- 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 -->
تم اضغط سجل وانشر القالب
- لنسخة المطورة Invision:
نضغط تعديل
على القالب
index_bodyنبحث عن
- الكود:
-
<thead>
<tr>
<th colspan="2">
<div class="linklist clearfix statlinks">
<ul>
<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>
</ul>
</div>
</th>
</tr>
</thead>
نقوم بحدفها واضغط سجل وانشر القالب
بعدها
نضغط تعديل
على القالب
index_boxنبحث عن :
- الكود:
-
<!-- BEGIN switch_on_index -->
<div class="toplinks linklist clearfix">
<ul>
<!-- BEGIN switch_delete_cookies -->
<li><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 -->
<!-- BEGIN switch_user_logged_in -->
<li class="last"><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
<!-- END switch_user_logged_in -->
</ul>
</div>
<!-- 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="{U_MARK_READ}">عتبرني قرأت جميع المواضيع</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 -->
نضغط سجل وانشر القالب
- لنسخة التانية phpBB2:
نضغط تعديل
على القالب
index_bodyنبحث عن
- الكود:
-
<td width="50%" valign="top">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_delete_cookies -->
<br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
<!-- END switch_delete_cookies -->
</td>
<td width="50%" align="right">
<span class="gensmall">
<a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
<a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
<a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
<!-- BEGIN switch_on_index -->
<!-- BEGIN switch_delete_cookies -->
<br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
<!-- END switch_delete_cookies -->
<!-- END switch_on_index -->
</span>
ونستبدله بالكود التالي :
- الكود:
-
<td width="50%" align="right">
<!-- 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;
}
انتهيت عملية تركيب الكود واستمتعو بطريقة الجديدة المتميزة المطورة
ملاحظة : يمكنك تغيير كلمة : روابط مهمة من خلال تعديل - الكود:
-
<li><a>روابط مهمة</a>
داخل الكود
بالتوفيق للجميع
فريق الدعم و المساعدة
Yassine Bablil
يمنع النقل نهائيا دون دكر : اسم المبرمج + المصدر