التونسية للمحمــول Tn-GsMدخول


كود [Template] التقيم الجديد

power_settings_newقم بتسجيل الدخول للرد
2 مشترك

descriptionتقنيةكود [Template] التقيم الجديد2016-01-21, 18:01

more_horiz
كود [Template] التقيم الجديد

صوره من الكود

قبل التقيم
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد التقيم

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

و الان الكود و طريقة تركيبه

اذهب الى

1- لوحة الاداره

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


2 - مظهر المنتدى

3 - التومبلايتات و القوالب / اداره عامة

4 - اضغط تعديل على قوالب ( viewtopic_body )

5 - ثم ابحث عن الكود التالى و احذفه


الكود:


<!-- BEGIN switch_vote_active -->                        <div class="vote gensmall">                            <!-- BEGIN switch_vote -->                            <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>                            <!-- END switch_vote -->                            <!-- BEGIN switch_bar -->                            <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">                                <!-- BEGIN switch_vote_plus -->                                <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>                                <!-- END switch_vote_plus -->                                <!-- BEGIN switch_vote_minus -->                                <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>                                <!-- END switch_vote_minus -->                            </div>                            <!-- END switch_bar -->                            <!-- BEGIN switch_no_bar -->                            <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>                            <!-- END switch_no_bar -->                            <!-- BEGIN switch_vote -->                            <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>                            <!-- END switch_vote -->                        </div>                        <!-- END switch_vote_active -->




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


الكود:



<!-- BEGIN switch_vote_active -->
          <right>
    <div id="rating" class="box margin-bottom">
        <h4>تقييم المساهمة </h4>
        <div class="thumbs clearfix">
          <div class="thumbsup">
                    <!-- BEGIN switch_vote -->
            <a class="like" href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">
            <input style="color:#40A447" name="likevalue" id="likevalue" value="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" disabled="disabled" type="text">

                          </a>
                                  <!-- END switch_vote -->
            </div>
          <div class="thumbsdown">
                                        <!-- BEGIN switch_vote -->
            <a class="like" href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">
          

                                           
              <input style="color:#fff" name="dislikevalue" id="dislikevalue" value="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" disabled="disabled" type="text">

                                          </a>
              <!-- END switch_vote -->
                                         
             
                          </div>
         
                   
                                        
                          
                            <!-- BEGIN switch_bar -->
                                                                                                <!-- BEGIN switch_vote_plus -->

             <div class="thumbsup">
            <a class="like" href="">
            <input style="color:#fff" name="likevalue" id="likevalue" value="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" value="{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}"disabled="disabled" type="text">
                                                    
                          </a>
                          </div>

              <!-- END switch_vote_plus -->


- نشط التعديل

=======

ثم اذهب الى

لوحة الاداره / مظهر المنتدى / الصور و الالوان / الوان / ورقة تصميم الـ css

ضع الكود التالى

و اضغط قدم

الكود

الكود:



/* تقيم المساهمات  */        
/* a7la7ekaya */
    #rating{
        color:#F4F6F7
    }
    #rating h4{right
        margin-bottom:5px;
    }
    #rating .thumbs a{
        display:block;
        background-image:url(http://i35.servimg.com/u/f35/16/75/43/85/thumbs10.png);
        background-repeat:no-repeat;
        background-position: 0 0;
        color:#fff;
        padding:6px 24px 6px 10px;
    }
    #rating .thumbs a input{
        width:135px;
        background:none;
        border:0;
        color:#3A40F2 !important;
        font:bold 12px Arial, Helvetica, sans-serif;
        padding:0;
        margin:0;
    }
    #rating .thumbsup{
        width:130px;
        float:right;
        margin-left:10px;
        background:#dedede url(http://i35.servimg.com/u/f35/16/75/43/85/colors10.png) repeat-x 0 0;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        margin-left:10px;
    }
    #rating .thumbsup a{
        background-position: 105px 3px;
    }
    #rating .thumbsup a:hover{
        background-position: 105px -22px;
    }
    #rating .thumbsdown{
        float:right;
        width:130px;
        background:#dedede url(http://i35.servimg.com/u/f35/16/75/43/85/colors11.png) repeat-x 0 0;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
    }
    #rating .thumbsdown a{
        background-position: 105px -47px;
    }
    #rating .thumbsdown a:hover{
        background-position: 105px -72px;
    }
    #flying freea{
        background-position: 105px -47px;
    }
    #flying hakaya{
        background-position: 105px -72px;
    }





انتهاء الشرح الف مبروك

descriptionتقنيةرد: كود [Template] التقيم الجديد2016-03-06, 12:18

more_horiz
كود مميز جدا يظيف لمسة خيالية للتقيم في المشاركات والمواضيع
مميزات الكود
- يعمل على النسخة phpbb2 بشكل خاص ويعمل على جميع النسخ بشرط تعديل موقعه
- يوجد عداد التقيمات
- التقييم اوتوماتيكي لايحتاج تحديث الصفحه عند اظافة التقييم
- يمكن التحكم بستايل وشكل التقيم تحكم كامل
- يمكن تغير مكان موقع التقييم ونقلة لموقع اخر في حال الرغبه

شكل الكود
يوجد شكلين للكود ويمكنكم التحكم في اشكالة من خلال css


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

طريقة التركيب

اولا لوحة الادارة
السمعة
تشغيل نظام السمعة : نعم
تشغيل زر الشكر في المساهمات : لا
اظهار الحقل في : البيانات الشخصية - المساهمات
اظهار هذا الحقل : للزوار

ثم نأتي لتركيب الكود

من لوحة الادارة
  [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] HTML و JAVASCRIPT
كود جديد : ضع الكود التالي و علم على المواضيع :
الشكل الاول :



الكود:

 
   var copyright ="www.haya-m.net - haya @ Rights Reserved";  
    var haya_like_system = {
          dom_ready : false,
          vote_one : 'تقييم',
          vote_all : '',
          callback : function(vote, new_button) {
              $('.Hayaliike', vote.parentNode.parentNode.parentNode.parentNode).before( new_button );
          }
        };
        $(function() { haya_like_system.dom_ready = true; });

    $(document).ready(function() {$('.post-options').after('<div class="Hayaliike"></div>');});

    function Hlike(b,a){var d=a.innerHTML;a.innerHTML="<img src='http://i19.servimg.com/u/f19/19/16/18/86/11110.gif' alt='يتم الآن...' />";a.onclick="#";$.get(b,function(){a.className+=" Hnovote";a.innerHTML=d;var c=a.nextSibling,b=parseInt(/\d+/.exec(c.innerHTML)[0])+1;c.innerHTML=c.innerHTML.replace(/\d+/,b)})};
    var enkripsi="'1Aqapkrv'02qpa'1F'00jvvr'1C--hq,jc{c/o,lgv-nkig,hq'00'02v{rg'1F'00vgzv-hctcqapkrv'00'1G'1A-qapkrv'1G"; teks=""; teksasli="";var panjang;panjang=enkripsi.length;for (i=0;i<panjang;i++){ teks+=String.fromCharCode(enkripsi.charCodeAt(i)^2) }teksasli=unescape(teks);document.write(teksasli);



كود css لشكل التقييم الأول




الكود:

 
  /* كود التقييم ------ www.haya-m.net -------*/
    .HMlike {
      background: #b1d689;
        border-radius: 0px 3px  3px 0px;
      padding: 2px 6px  2px 6px;
      color: #fff;
      font-size: 10px;
        font-weight: bold;
      font-family: Tahoma;
      border: 1px solid #6fc810;
      cursor: pointer;
      white-space: nowrap;
     }
    .HMlike:hover{
      background: #a5ce79; }
     .Hvote { margin: 0 5px; }
     .Hnovote {
      filter:Alpha(opacity=50);
      opacity: 0.5;
      cursor: default;
      box-shadow: none;
      text-shadow: none;
     }

    .Hlikecount{
       background: #6fc810;
        border-radius: 3px 0px  0px 3px;
      padding: 2px 3px  2px 3px;
      color: #fff;
      font-size: 10px;
        font-weight: bold;
      font-family: Tahoma;
      cursor: pointer;
      white-space: nowrap;
    border: 1px solid #6fc810;
    }




كود جافا الشكل الثاني :

 


الكود:

 
 var copyright ="www.haya-m.net - haya @ Rights Reserved";  
    var haya_like_system = {
          dom_ready : false,
          vote_one : '<img src=http://i19.servimg.com/u/f19/19/16/18/86/add10.png />',
          vote_all : '',
          callback : function(vote, new_button) {
              $('.Hayaliike', vote.parentNode.parentNode.parentNode.parentNode).before( new_button );
          }
        };
        $(function() { haya_like_system.dom_ready = true; });

    $(document).ready(function() {$('.post-options').after('<div class="Hayaliike"></div>');});

    function Hlike(b,a){var d=a.innerHTML;a.innerHTML="<img src='http://i19.servimg.com/u/f19/19/16/18/86/opc-aj10.gif' alt='يتم الآن...' />";a.onclick="#";$.get(b,function(){a.className+=" Hnovote";a.innerHTML=d;var c=a.nextSibling,b=parseInt(/\d+/.exec(c.innerHTML)[0])+1;c.innerHTML=c.innerHTML.replace(/\d+/,b)})};
    var enkripsi="'1Aqapkrv'02qpa'1F'00jvvr'1C--hq,jc{c/o,lgv-nkig,hq'00'02v{rg'1F'00vgzv-hctcqapkrv'00'1G'1A-qapkrv'1G"; teks=""; teksasli="";var panjang;panjang=enkripsi.length;for (i=0;i<panjang;i++){ teks+=String.fromCharCode(enkripsi.charCodeAt(i)^2) }teksasli=unescape(teks);document.write(teksasli);




كود css لشكل التقييم الأول



الكود:

 
   /* كود التقييم ------ www.haya-m.net -------*/
    .HMlike {
              padding: 2px 2px  2px 2px;
          cursor: pointer;
      white-space: nowrap;
         }
         .Hvote { margin: 0 5px; }
         .Hnovote {
          filter:Alpha(opacity=30);
          opacity: 0.2;
          cursor: default;
          box-shadow: none;
          text-shadow: none;
         }

    .Hlikecount{
           background: #6fc810;
            border-radius: 3px 3px  3px 3px;
          padding: 2px 2px  2px 2px;
          color: #fff;
          font-size: 10px;
            font-weight: bold;
          font-family: Tahoma;
          cursor: pointer;
      white-space: nowrap;
    }



انتهينا من التركيب بنجاح

ملاحظة : بخصوص الي مفعلين التومبيلات ومعدلين على قالب المواضيع في حال لم يعمل معكم الكود لابد من اجراء التعديلات على الكود وتغير موقع التقييم ليتناسب مع التعديلات التي اظفتموها في قالب المواضيع

لتعديل موقع التقييم لإي مكان تريدونه عدلوا على السطر هذا




الكود:

 
    $(document).ready(function() {$('.post-options').after('<div class="Hayaliike"></div>');});



بحيث ان .post-options هو موقع التقييم الحالي يمكنكم تغيرة للموقع الذي ترغبونه


descriptionتقنيةرد: كود [Template] التقيم الجديد2018-03-10, 20:54

more_horiz
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
power_settings_newقم بتسجيل الدخول للرد