وردتي البيضاء
عدد المساهمات : 205 معدل النشاط : 6030 السُمعة : 1
| موضوع: كود لتطوير خاصية الشكر (إهداء للجميع) الأحد 5 يناير 2014 - 17:07 | |
| السلام عليكم ورحمة الله وبركاته مرحبا ...
اليوم جبتلكم كود راائع : الكود عبارة عن تطوير خاصية الشكر بمنتدياتكم... عمل الكود : عند الضغط على زر الشكر بدلا من ان يتغير لون المساهمة يظهر لك اسفل المساهمة (رسالة شكر مع صور نجوم ) كما هو في الصورة :
هنا الكود نفسه للنسخة phpBB3 طبعا اتباع الخطوات بالاسفل: - الكود:
-
[center][font=Verdana, Arial, Helvetica, sans-serif]$(function () {[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] var x = $('.post').get();[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] for (i = 0; i < x.length; i++) {[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] if (x[i].getAttribute('style') == "background-color:#ddebca;") {[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].style.backgroundColor = '';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] var stars = document.createElement('div');[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] stars.setAttribute('style', 'text-align: center;');[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] stars.innerHTML = '<hr><div style="padding-top:2px;height:60px;line-height:36px;color:#740;font-size:16px;font-weight:bold;text-align:center"><img style="vertical-align:top" src="http://i56.servimg.com/u/f56/16/94/10/41/star-i10.png"> شكراً على المساهمة و الرد الرائع ! <img style="vertical-align:top" src="http://i56.servimg.com/u/f56/16/94/10/41/star-i10.png"></div>';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].appendChild(stars);[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] }[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] }[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif]});[/font][/center] [center][/center] الخطوة الاولى :
مكان التركيب : لوحة التحكم - عناصر اضافية - إدارة أكواد Javascript - انشاء كود جديد و اختار ان يظهر في المواضيع
الخطوة الثانية :
لوحة الادارة -مظهر المنتدى- الالوان- لون خلفية المساهمة عند استعمال خاصية الشكر ثم ضع فيه ( #ddebca )
هنا الكود نفسه للنسخة phpBB2 طبعا اتباع نفس الخطوات بالاعلى : - الكود:
-
[center][font=Verdana, Arial, Helvetica, sans-serif]$(function () {[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] $('.post td[style="background-color:#ddebca;"]:last').append('<hr><div style="padding-top:2px;height:32px;line-height:36px;color:#740;font-size:16px;font-weight:bold;text-align:center;padding-bottom: 15px;"><img style="vertical-align:top" src="http://iconfinder.net/data/icons/Basic_set2_Png/32/star1.png"> The Topic Starter Thanks You! <img style="vertical-align:top" src="http://iconfinder.net/data/icons/Basic_set2_Png/32/star1.png"></div>');[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif]});[/font][/center] هنا الكود نفسه للنسخة phpBB طبعا اتباع نفس الخطوات بالاعلى : - الكود:
-
[center][font=Verdana, Arial, Helvetica, sans-serif]$(function () {[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] var x = $('.post').get();[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] for (i = 0; i < x.length; i++) {[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] if (x[i].getAttribute('style') == "background-color:#ddebca;") {[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].style.backgroundColor = '';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].firstChild.nextSibling.style.backgroundColor = '';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].firstChild.nextSibling.firstChild.style.backgroundColor = '';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].firstChild.nextSibling.firstChild.nextSibling.style.backgroundColor = '';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] var stars = document.createElement('div');[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] stars.setAttribute('style', 'text-align: center;');[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] stars.innerHTML = '<hr><div style="padding-top:2px;height:32px;line-height:36px;color:#740;font-size:16px;font-weight:bold;text-align:center"><img style="vertical-align:top" src="http://iconfinder.net/data/icons/Basic_set2_Png/32/star1.png"> The Topic Starter Thanks You! <img style="vertical-align:top" src="http://iconfinder.net/data/icons/Basic_set2_Png/32/star1.png"></div>';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].firstChild.nextSibling.firstChild.nextSibling.appendChild(stars);[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] }[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] }[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif]});[/font][/center] [center][/center] هنا الكود نفسه للنسخة Invision طبعا اتباع نفس الخطوات بالاعلى : - الكود:
-
[center][font=Verdana, Arial, Helvetica, sans-serif]$(function () {[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] var x = $('.post').get();[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] for (i = 0; i < x.length; i++) {[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] if (x[i].getAttribute('style') == "background-color:#ddebca;") {[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].style.backgroundColor = '';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].firstChild.style.backgroundColor = '';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].firstChild.nextSibling.style.backgroundColor = '';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].firstChild.firstChild.firstChild.firstChild.style.backgroundColor = '';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].firstChild.firstChild.firstChild.nextSibling.style.backgroundColor = '';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] var stars = document.createElement('div');[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] stars.style.textAlign = 'center';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] stars.innerHTML = '<hr><div style="padding-top:2px;height:32px;line-height:36px;color:#740;font-size:16px;font-weight:bold;text-align:center"><img style="vertical-align:top" src="http://iconfinder.net/data/icons/Basic_set2_Png/32/star1.png"> The Topic Starter Thanks You! <img style="vertical-align:top" src="http://iconfinder.net/data/icons/Basic_set2_Png/32/star1.png"></div>';[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] x[i].firstChild.appendChild(stars);[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] }[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif] }[/font][/center] [center][font=Verdana, Arial, Helvetica, sans-serif]});[/font][/center] [center][/center] هنا صورة النجمة للاستخدام بالكود : مع التحية | |
|