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



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

تكبير الصورة معاينة الأبعاد الأصلية.



بعد ما شوفنا صور عمل الكود ندخل على وضعه فى المنتدى
لوحة الاداره>>مظهر المنتدى>>التومبلايتات و القوالب>>إدارة عامة>>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("https://i.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("https://i.servimg.com/u/f44/16/54/26/99/snap0011.png") center -40px no-repeat;
margin-right: 15px;
}

ملاحظة: يمكنك تعديل على كود CSS كما تشاء
يمكنك من هنا تغيير للون الخلفية
يمكنك من هنا تغيير الصورة الى الشكل الذى تريد
الكود: ---------تضليل المحتوى
https://i.servimg.com/u/f44/16/54/26/99/snap0011.png


تم الشرح بواسطتى
وهبة الساحر
المتطوع المساعد
ارجوا ان اكون قد افدتكم
انتهي الموضوع

الله يعطيك العافيه

شكري لك

والف تحيه من القلب

هذا واجبي
شكرا لمرورك