منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.

انشاء منتدى مجاني شبيه بهذا المنتدى
أحلى الشبكات الإجتماعية

انشاء منتدى مجاني



 انشاء منتدى مجاني

أقسام الدعم

دعم الخدمات العامة:
مشاكل كلمة السر
مشاكل فتح المنتدى
مشاكل لوحة الإدارة
مشاكل تنسيق المظهر
المشاكل الأخرى

----------------------

دعم الخدمات التكميلية :
مشاكل النطاقات
مشاكل التومبلايت

----------------------

مراسلة الإدارة :

طلب كلمة السر
إرسال أكواد أو شروحات
أتصل بنا
كيفية طلب كلمة سر جديدة
> طريقة طلب كلمة سر

تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
المواضيع الأخيرة
» مشكلة
أمس في 23:37 من طرف 0marp0p23

» جعل المنتدى بطيء!!
أمس في 22:27 من طرف عبد المجيد الذكي

» اعلاني مخالف
أمس في 22:21 من طرف ahd allah

» مشكله في الرتب
أمس في 18:09 من طرف zaydoon

» طلب سلايد بسيط*
أمس في 15:50 من طرف meme.99

» ايكونه محذوفه اسفل التعليق ..
أمس في 14:59 من طرف zaydoon

»  طلب الكود
أمس في 12:53 من طرف ahd allah

» ربط المنتدى بالمدونة
أمس في 11:16 من طرف ahd allah

» شفرة اعلان فى نسجة الجوال
الإثنين 26 سبتمبر 2016 - 18:30 من طرف zeewab

أفضل الأعضاء الموسومين
@الزعيم
 
@@
 
@stones
 
@Mohamed Nsr
 
@JAR7
 

عمل منتدى

[تومبيلات] اجعل روابط فوق احصائيات بطريقة احترافية جديدة اكتشفها بنفسك Yassine Bablil

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

[تومبيلات] اجعل روابط فوق احصائيات بطريقة احترافية جديدة اكتشفها بنفسك Yassine Bablil

مُساهمة من طرف Yassine Bablil في الجمعة 15 مايو 2015 - 22:41

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

اليوم وبطريقة جديدة من عملي الشخصي وبرمجتي

سنجعل الروابط التي فوق احصائيات المنتدى بطريقة جميلة وراائعة مطورة

صورة توضيحية قبل تركيب الكود


http://i19.servimg.com/u/f19/18/04/55/46/120.png

وهده صور بعد تركيب الكود طبعا يظهر على الشكل التالي


http://i19.servimg.com/u/f19/18/04/55/46/220.png

وعند وضع الماوس على زر روابط مهمة يظهر على الشكل التالي


http://i19.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> •&nbsp;</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

يمنع النقل نهائيا دون دكر : اسم المبرمج + المصدر


عدل سابقا من قبل Yassine Bablil في السبت 16 مايو 2015 - 21:24 عدل 1 مرات

Yassine Bablil
 
 

ذكر
عدد المساهمات : 8024
معدل النشاط : 8719

http://www.club-profe.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى