تومبلايت يضع المجموعة واخر احصائيات المنتدى والخ.. بطريقة رائعة

اذهب الى الأسفل

تومبلايت يضع المجموعة واخر احصائيات المنتدى والخ.. بطريقة رائعة Empty تومبلايت يضع المجموعة واخر احصائيات المنتدى والخ.. بطريقة رائعة

مُساهمة من طرف وهبة الساحر الجمعة 27 مارس 2015 - 18:31



تومبلايت يضع المجموعة واخر احصائيات المنتدى والخ.. بطريقة رائعة

تومبلايت يضع المجموعة واخر احصائيات المنتدى والخ.. بطريقة رائعة


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

صورة للمعاينه

تومبلايت يضع المجموعة واخر احصائيات المنتدى والخ.. بطريقة رائعة 00000010

بعد ما شوفنا صور عمل الكود ندخل على وضعه فى المنتدى

لوحة الاداره>>مظهر المنتدى>>التومبلايتات و القوالب>>إدارة عامة>>index_body >اضغط على تعديل

قوم بالبحث عن الكود التالى
الكود هنا:
ونستبدله بهذا الكود
الكود هنا:

ثم نتوجه الى:

لوحة الاداره >> عناصر إضافيه >> HTML و JAVASCRIPT

إدارة أكواد Javascript
تفعيل نظام إدارة أكواد Javascript : نعم
إنشاء كود جديد
العنوان * : أي شيء تريد
أضف الكود الى: الصفحة الرئيسية
ثم نضع الكود التالي:

الكود:

$(function(){
               $("#pw2-button, #pw3-button, #pw4-button").css({
            'background-position' : 'center top', 'opacity' : '0.95'
         });
 $("#pw1-button").css({'background-position' : 'center -30px'});
                  $("#page-wrap div.button").click(function(){
                              $clicked = $(this);
                                        if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                                    $clicked.animate({
                     opacity: 1, backgroundPosition: '0 -30px'
                  }, 60 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#nwcontent").find(".list:visible").fadeOut(60, function(){
                     $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
               }
               $clicked.siblings(".button").animate({
                  opacity: 0.95, backgroundPosition: '0 0'
               }, 60 );
            });
      });

الكود الاخر فى ورقة تصميم css
لوحة الاداره >> مظهر المنتدى >> الصور والألوان >> ألوان >> ورقة تصميم css
تعطيل كود ال CSS الأصلي: لا
تفعيل نظام تحسين مردودية ال CSS المشخص: نعم
ثم اضف هذا الكود الى ورقة تصميم cs        
                     
                         

الكود:
    
                      
                        #page-wrap td.row1 {
                        background-color: transparent;
                        padding: 0;
                        margin: 0;
                        }
                    
                        .button {
                        float: right;
                        cursor: pointer;
                        }
                    

                        #nwcontent {
                        background-color: #F5FFFA;
                        border: 1px solid #DDF7C6;
                        -moz-border-radius: 5px;
                        -webkit-border-radius: 5px;
                        -khtml-border-radius: 5px;
                        border-radius: 5px;
                        margin: 0 3px 3px;
                        padding: 5px;
                        }
                  
                        #pw1 {
                        display: block;
                        }
                   
                        #pw2, #pw3, #pw4 {
                        display: none;
                        }
                    
                        #pw1, #pw2, #pw3, #pw4 {
                        padding: 3px;
                        text-align: right;
                        font-size: 10px;
                        }
                    
                        #pw1 a:hover, #pw2 a:hover, #pw3 a:hover, #pw4 a:hover {
                        text-decoration: none !important;
                        }
                    

                        #pw1-button, #pw2-button, #pw3-button, #pw4-button {
                        display: block;
                        width: 150px;
                        height: 30px;
                        margin: 2px 2px 0 0;
                        text-align: center;
                        line-height: 30px;
                        background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/snap0011.png") center top no-repeat;
                        color: #fff;
                        text-shadow: 1px 1px #688E23;
                        font-size: 13px;
                        font-weight: bolder;
                        }
                    

                        #pw1-button {
                        background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/snap0011.png") center -40px no-repeat;
                        margin-right: 15px;
                        }
                  
ملاحظة: يمكنك تعديل على كود CSS كما تشاء
يمكنك من هنا تغيير للون الخلفية

يمكنك من هنا تغيير الصورة الى الشكل الذى تريد
الكود:
http://i44.servimg.com/u/f44/16/54/26/99/snap0011.png


تم الشرح بواسطتى
وهبة الساحر
المتطوع المساعد

ارجوا ان اكون قد افدتكم
انتهي الموضوع

تومبلايت يضع المجموعة واخر احصائيات المنتدى والخ.. بطريقة رائعة 221706
تومبلايت يضع المجموعة واخر احصائيات المنتدى والخ.. بطريقة رائعة 201477



عدل سابقا من قبل وهبة الساحر في الإثنين 30 مارس 2015 - 1:21 عدل 5 مرات (السبب : لزيادة تقنية اخرى)
وهبة الساحر
وهبة الساحر
 
 

ذكر
عدد المساهمات : 9059
معدل النشاط : 14167
السُمعة : 135

https://3arb-way.yoo7.com

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

الرجوع الى أعلى الصفحة

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

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