يستكشف الموضوع أهمية ميزة التعليقات في بيئة الويب، موجهًا للقراء بفهم كيف تسهم هذه الميزة في تعزيز التفاعل والتواصل. يُقدم بأسلوب أنيق شفرات تحسين تجربة المستخدم من خلال تكامل التعليقات بطريقة جميلة ووظيفية.
السلام عليكم ورحمة الله وبركاته
في عالم الإنترنت اليوم، تلعب ميزة التعليقات دورًا حيويًا في تعزيز التفاعل وتحفيز التواصل بين المستخدمين والمحتوى. إن فهم كيفية استخدام وتكامل تلك الميزة يُعتبر أمرًا أساسيًا لكل من يمتلك موقعًا على الويب. في هذا المقال، سنقوم بتوضيح ميزة التعليقات وأهميتها في تحسين تجربة المستخدم وتعزيز التفاعل في المواقع.
فهم ميزة التعليقات
تعد ميزة التعليقات واحدة من العناصر الأساسية في تصميم الويب، حيث تمنح الزوار والقراء الفرصة للتفاعل مع المحتوى. تقدم هذه الميزة بيئة مشاركة تُمكن المستخدمين من التعبير عن آرائهم، طرح الأسئلة، والمشاركة في النقاشات.
أهمية التعليقات في المواقع
- تفاعل المستخدمين:
- تمنح التعليقات المستخدمين منبرًا للتفاعل والمشاركة، مما يُحفز المحتوى ويزيد من جاذبيته. - إثراء المحتوى:
- يتيح التعليق للقراء إضافة معلومات إضافية أو آراء شخصية، مما يثري المحتوى الأصلي. - التواصل البناء:
- تعمل التعليقات على بناء مجتمع حول المحتوى، حيث يتفاعل القراء مع بعضهم البعض. - تحسين تجربة المستخدم:
- تُعزز التعليقات تجربة المستخدم بتوفير بيئة تفاعلية ومشاركة فعّالة.
شرح ميزة التعليقات بواسطة الشفرات
لتحقيق تجربة تعليقات فعّالة على موقعك، يمكنك استخدام شفرات CSS و HTML و JavaScript المُحددة في هذا الشرح. هذه الشفرات تقوم بتنسيق وتفعيل ميزة التعليقات بشكل يجعلها جذابة ووظيفية.
التطرق للاكواد
هذه الاكواد التي ساقدمها تتيح للمستخدمين إضافة تعليقات مُنسقة بشكل جيد في موقع الويب الخاص بك. يشمل الكود CSS تصميم وتنسيق واجهة المستخدم، في حين يقوم الكود HTML بإنشاء العناصر والتفاعلات. أما الجزء الخاص بال JavaScript، فيوفر وظائف لتحويل النصوص وتنظيفها.
دعنا نفصل كل كود في محوره.
قبل اي تعديل على قالب مدونتك انصحك بشدة على اخذ نسخة احتياطية لقالبك حتى نتفادى اي خطأ ممكن حدوثه في حالة ما نسيت ان تأخذ نسخة احتياطية و تم حدوت خطأ ما اترك تعليقا في صندوق التعليقيات او اتصل بي لمساعدتك في حل المشكل.
نصيحة:
قم بتعليم الاكواد التي تظيفها داخل قالبك في عناصر html بتوثيق مناسب لك مثلا: <----[توثيق]---> اما فيما يخص توثيق css اضف /*...توثيق...*/ حتى لا يحدث اي اختلاط و تبقى لك امكانية معرفة اين وضعت الكود المعدل.
اذا كنت تستخم الهاتف انصحك بتنزيل نسخة للقالب و كرر النسخ لنسختين بعدها افتح محرر النصوص انصحك بتطبيق [Quick Editor+] واضف التعديلات اما اذا كنت تريد تطبيق التعديلات مباشرة من لوحة التحكم انصحك بتنزيل تطبيق [Hacker's Keyboard] نظرا لوجود جميع الاختصارات الموجودة في لوحة مفاتيح الحاسوب كاختصار البث و النسخ و اللصق و التحديد...
اولا كود css
/*full comment*/
/* متغيرات اللون */
:root{
--font-name: 'Noto Sans', sans-serif ;
--background-color: #fffdfc;
--content-text: #48525c;
--border-color: #e6e6e6;
--textarea-background: #f6f6f6;
--main-color: #299e94;
--dark-background: #2d2d30;
--dark-text :#fffdfc;}
/* تعليقات مميزة */
#cm-menu{position:relative;font-family:var(--font-name);font-size:14px;background:var(--background-color);border-radius:4px;padding:20px 20px 50px 20px;margin:0 0 20px -2px;color:var(--content-text);line-height:1.5em;box-shadow:0 6px 18px 0 rgba(9,32,76,.075)}
#cm-menu:before{content:'';display:block;border:11px solid;border-color:var(--background-color) transparent transparent transparent;position:absolute;bottom:-22px;right:23px}
#parser{position:relative;margin-top:20px}
#codes{border:1px solid var(--border-color);width:100%;height:150px;display:block;background-color:var(--textarea-background);border-radius:4px;font:400 11px 'Fira Mono',monospace;resize:none;margin:0 0 10px;padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;box-shadow:none}
#codes:active,#codes:focus{background-color:#f5f5f5;color:#444;outline:0}
.cm-btn{font-family:var(--font-name);font-size:12px;line-height:1.5;border-radius:2px;padding:1px 5px;border:none;color:var(--background-color);outline:0;cursor:pointer;background-color:var(--main-color);margin-bottom:10px}
.cm-btn-clr{background-color:#7687b7}
.cm-btn-cpy{background-color:#c16c6c}
.cm-btn:active,.cm-btn:hover,.parser:active,.parser:hover,.cm-btn:focus,.button-group button:disabled,.parser:focus{opacity:.9}
.cm-btn-clr:active,.cm-btn-clr:hover{opacity:.9}
.cm-btn-cpy:active,.cm-btn-cpy:hover{opacity:.9}
.alert{padding:6px;border-radius:4px;position:absolute;top:10px;left:10px;min-width:100px}
.alert span{font-size:12px}
.alert-success{color:#3c763d;background-color:rgba(215,236,206,.58)}
.checkbox{display:none}
.cmbutton{display:grid;grid-template-columns:1fr 1fr;width:calc(100% - 40px);position:absolute;bottom:0}
.cmbutton1{border-bottom-left-radius:4px}
.cmbutton2{border-bottom-right-radius:4px}
.cmbutton-title{padding:10px;border-top:5px solid #e8e8e8;display:block;text-align:center}
.cmbutton label{display:block;cursor:pointer}
.cm-menus1:checked ~ .cmbutton .cmbutton1 .cmbutton-title, .cm-menus2:checked ~ .cmbutton .cmbutton2 .cmbutton-title{border-top:5px solid var(--main-color)}
.cm-menus1:checked ~ .bbcode{display:none}
.cm-menus1:checked ~ #parser{display:none}
.cm-menus2:checked ~ .pesan-komen{display:none}
.cm-menus1:checked ~ .cmbutton .cmbutton1, .cm-menus2:checked ~ .cmbutton .cmbutton2{background:rgba(23,191,99,.07)}
/* يقوم darkmode css بضبط الفئة (.drK) على القالب الخاص بك حتى يعمل */
.drK #cm-menu:before{border-color:var(--dark-background) transparent transparent transparent}
.drK #cm-menu,.drK #codes,drK #codes:active,.drK #codes:focus{border-color:rgba(255,255,255,.15);background-color:var(--dark-background);color:var(--dark-text)}
/* تقوم تعليقات syantax بضبط الفئة (.comment-content) على القالب الخاص بك حتى تعمل */
.comment-content i[rel=pre],.comment-content i[rel=code]{padding:15px;font-size:12px;margin:0;overflow-x:auto;white-space:pre;display:block;color:.e0d072; background:.262a2d;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text}
.comment-content i[rel=quote]{margin:0;padding:15px;border:1px dashed .ededef;border-radius:4px;font-size:13px;font-style:italic}
.comment-content i[rel=img]{border-radius:4px}
لفهم الكود CSS بشكل أفضل، دعني أقسمه إلى أقسام أصغر:
- متغيرات اللون
(`:root`):
- يعرف متغيرات للألوان تُستخدم في جميع العناصر.- يجعل من السهل تغيير لون الموقع بأكمله. - تصميم القائمة
(`#cm-menu`):
- يحدد تصميم القائمة الرئيسية للتعليقات.
- يستخدم خلفية بيضاء وظل لجعلها بارزة. - تصميم الأزرار
(`cm-btn`)
: - يُعين تصميم الأزرار بخلفيات ملونة ونصوص بيضاء. - الوضع الداكن
(`drK`):
- يضبط التصميم لدعم وضع الظلام. - تصميم التعليقات
(`comment-content`):
- يُحدد تصميم التعليقات بشكل عام. - مربع النص
(`textarea#codes`):
- يتحكم في مظهر مربع النص المخصص لإدخال الرموز. - تصميم مربع الرموز
(`#parser`):
- يحدد تصميم مربع الرموز والأزرار المتعلقة به. - رسائل التنبيه
(`alert`):
- يُحدد تصميم مربع الرسائل التوضيحية. - مجموعة الأزرار
(`button-group`):
- يعين تصميم مجموعة الأزرار. - مربعات الاختيار
(`checkbox`):
- يحدد تصميم مربعات الاختيار. - أزرار القائمة العلوية
(`cmbutton`):
- يعين تصميم أزرار القائمة العلوية. - إضافة CSS:
- تسجيل الدخول إلى حساب بلوجر:
قم بتسجيل الدخول إلى لوحة التحكم بلوجر.
- انتقل إلى لوحة تحكم بلوجر واختر "المظهر".
- انقر على السهم بجانب التخصيص اختر تعديلHTML
- ابحث عن`]]</b:skin>`وأضف الكود CSS فوقه.
هذه النظرة الأدق تساعد في فهم الوظيفة الخاصة بكل جزء من الكود CSS.
ثانيا كود html
<!--full comment-->
<div id='cm-menu'>
<input checked='' class='cm-menus1 hidden' id='offcm-menu1' name='accordion-menu' type='radio'/>
<input class='cm-menus2 hidden' id='offcm-menu2' name='accordion-menu' type='radio'/>
<div class='cmbutton'>
<div class='cmbutton1'>
<label class='cmbutton-title' for='offcm-menu1'>ما هذا؟</label>
</div>
<div class='cmbutton2'>
<label class='cmbutton-title' for='offcm-menu2'>المزيد +</label>
</div>
</div>
<div class='pesan-komen'>
هذا الصندوق يمكنك من خلاله اضافة ملحق لوصف استفسارك اكثر مع التعليق ، يتم رفض التعليق <b>بروابط نشطة</b> حفاظاً على أمان المتابعين ، تحقق من <b> إخطاري </b> للحصول على إشعار عبر البريد الإلكتروني لكي ارد على تعليقاتك.
</div>
<div class='bbcode'>
ارفع <b>لقطة الشاشة</b> على موقع <b><a href='https://imgbb.com/upload' rel='nofollow noopener noreffer' target='_blank' title='Upload Gambar di Sini'>imgbb</a></b> و تأكد من حصولك على رابط مباشر بامتداد الصورة كـ <b>png</b> او <b>jpg</b> ثم الصق الرابط المحصل عليه في الصندوق اسفله أو اضف الملحق الذي تستفسر حوله مثلا:<b> كود برمجي</b>, أو <b>إقتباص</b>, ثم انقر فوق الزر الذي تريد إقرانه. انسخ نتائج التحليل ثم الصقها إلى عمود التعليقات.
</div>
<div id='parser'>
<textarea id='codes' placeholder='أدخل رابط صورة / رابط عادي أو كود برمجي ثم انقر فوق الزر أدناه ليتم التحليل' spellcheck='false'/>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert' style='display: none;'>
<span>تم نسخ الرمز!</span>
</div>
<span class='button-group'>
<button class='cm-btn' id='cvrt1' onclick='imgCvrt();this.disabled = true;'>صورة</button>
<button class='cm-btn' id='cvrt2' onclick='preCvrt();this.disabled = true;'>كود</button>
<!--<button class='cm-btn' id='cvrt3' onclick='codeCvrt();this.disabled = true;'>كود</button>-->
<button class='cm-btn' id='cvrt4' onclick='quoteCvrt();this.disabled = true;'>إقتباص</button><b/>
<button class='cm-btn cm-btn-cpy' id='button-link' onclick='cdCopy();' style='display: none;'>نسخ الكود!</button>
<button class='cm-btn cm-btn-clr' onclick='cdClear();'>تنظيف</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/>
<input checked='' id='opt2' type='checkbox'/>
<input checked='' id='opt3' type='checkbox'/>
<input checked='' id='opt4' type='checkbox'/>
<input checked='' id='opt5' type='checkbox'/><br/>
<input checked='' id='opt6' type='checkbox'/>
<span>image</span>
<input checked='' id='opt7' type='checkbox'/>
<span>quote</span>
<input checked='' id='opt8' type='checkbox'/>
<span>pre</span>
<input checked='' id='opt9' type='checkbox'/>
<span>code</span>
</span>
<div class='clear'/>
</div>
</div>
</b:if>
الان لنفهم أيضًا الأجزاء المختلفة من الكود HTML:
- متغيرات اللون
(`:root`):
- يقوم بتعريف متغيرات للألوان والخطوط. - العنصر
`div#cm-menu`:
- يحتوي على محتوى القائمة الرئيسية وأزرار التبديل لعرض محتوى إضافي. - العناصر
`.cmbutton`و`.cmbutton1`و`.cmbutton2`:
- تشكل أزرار التبديل بين المحتوى المختلف للقائمة. - العنصر
`div#parser`:
- يحتوي على مربع النص والأزرار المتعلقة به لإدخال الرموز. `textarea#codes`:
- مربع نص يسمح للمستخدم بإدخال الرموز أو النصوص.- العنصر
`.alert`:
- يحتوي على رسائل التنبيه التي تظهر بشكل مؤقت. - العنصر
`.button-group`:
- يحتوي على مجموعة من الأزرار. - العناصر
`input`مع النوع`checkbox`:
- مربعات اختيار لتحديد الخيارات. - الجافا سكريبت
(`<script>`):
- يحتوي على وظائف JavaScript لتحويل وتنظيف النصوص والتفاعل مع المستخدم. - العنصر
`div#cm-menu`:
- يحتوي على محتوى القائمة الرئيسية وأزرار التبديل لعرض محتوى إضافي. - رفع الصورة:
- المستخدم مطلوب أن يرفع لقطة الشاشة إلى موقعimgbb. - الحصول على رابط مباشر:
- يجب على المستخدم التأكد من الحصول على رابط مباشر للصورة بتنسيقPNGأوJPG. - إضافة الرابط أو الملحق:
- يمكن للمستخدم لصق الرابط المحصل عليه في مربع النص أدناه، أو إضافة ملحق يتعلق بالاستفسار. - الضغط على الزر المناسب:
- المستخدم مطلوب أن ينقر على الزر الذي يريد استخدامه. - نسخ نتائج التحليل:
- بعد الضغط على الزر، يجب على المستخدم نسخ نتائج التحليل. - لصق النتائج في عمود التعليقات:
- المستخدم مطلوب أن يلصق النتائج في عمود التعليقات.
- رفع الصورة:
- العنصر
`<b:if>`:
- يستخدم للتحقق من شرط وجود عنصر في الصفحة. - إضافة HTML:
- ابقى في نفس الصفحة كود القالب
- ابحث عن وسم`<data:this.messages.blogComment/>`وضع الكود HTML تحته.
الجزء المتعلق باضافة الصور، هذا الجزء يشرح كيف يمكن للمستخدمين رفع صورة من لقطة الشاشة إلى موقع imgbb، ثم تضمين الرابط الناتج في مربع النص المخصص. الشرح يتضمن الخطوات التالية:
هذا يسلط الضوء على دور كل جزء في صفحتك وكيف يتفاعلون معًا لتوفير واجهة مستخدم متقدمة.
هذا يُمكن المستخدم من توفير صور أو رموز برمجية ذات صلة لتحليلها أو مناقشتها في التعليقات. اما فيما يتعلق بتوليد صندوق الاكواد و تحليل العناصر و التعليق عن طريق اقتباس و الصور فهو متعلق مباشرة مع كود جافا سكريبت.
في عالم الويب المتطور، تعد ميزة التعليقات جسرًا حيويًا للتواصل بين المحتوى والقراء. اكتشف كيف يمكن تحفيز التفاعل وبناء مجتمع حول محتواك من خلال تكامل هذه الميزة بأسلوب جميل ووظيفي.جمال الحزازي
ثالثا كود JavaScript
<!-- full comment -->
<script > /*<![CDATA[*/ /* ميزة التعليق */ function cdClear() {
var e = document.getElementById("codes");
e.value = "", e.focus();
for (var t = document.querySelectorAll("#cvrt1,#cvrt2,#cvrt3,#cvrt4"), c = 0; c < t.length; c++) t[c].disabled = !1, document.getElementById("btnInfo")
.style.display = "none", document.getElementById("button-link")
.style.display = "none"
}
function preCvrt() {
var e = document.getElementById("codes"),
t = e.value,
c = document.getElementById("opt1"),
l = document.getElementById("opt2"),
n = document.getElementById("opt3"),
o = document.getElementById("opt4"),
d = document.getElementById("opt5"),
u = document.getElementById("opt8");
t = t.replace(/\t/g, " ");
u.checked && (c.checked && (t = t.replace(/&/g, "&")), l.checked && (t = t.replace(/'/g, "'")), n.checked && (t = t.replace(/"/g, """)), o.checked && (t = t.replace(/</g, "<")), d.checked && (t = t.replace(/>/g, ">")), t = (t = t.replace(/^/, "<i rel='pre'>"))
.replace(/$/, "</i>"), e.value = t, e.focus(), document.getElementById("button-link")
.style.display = "inline-block")
}
function codeCvrt() {
var e = document.getElementById("codes"),
t = e.value,
c = document.getElementById("opt1"),
l = document.getElementById("opt2"),
n = document.getElementById("opt3"),
o = document.getElementById("opt4"),
d = document.getElementById("opt5"),
u = document.getElementById("opt9");
t = t.replace(/\t/g, " ");
u.checked && (c.checked && (t = t.replace(/&/g, "&")), l.checked && (t = t.replace(/'/g, "'")), n.checked && (t = t.replace(/"/g, """)), o.checked && (t = t.replace(/</g, "<")), d.checked && (t = t.replace(/>/g, ">")), t = (t = t.replace(/^/, "<i rel='code'>"))
.replace(/$/, "</i>"), e.value = t, e.focus(), document.getElementById("button-link")
.style.display = "inline-block")
}
function imgCvrt() {
var e = document.getElementById("codes"),
t = e.value,
c = document.getElementById("opt6");
t = t.replace(/\t/g, " ");
c.checked && (t = (t = t.replace(/^/, "<i rel='image'>"))
.replace(/$/, "</i>"), e.value = t, e.focus(), document.getElementById("button-link")
.style.display = "inline-block")
}
function quoteCvrt() {
var e = document.getElementById("codes"),
t = e.value,
c = document.getElementById("opt7");
t = t.replace(/\t/g, " ");
c.checked && (t = (t = t.replace(/^/, "<i rel='quote'>"))
.replace(/$/, "</i>"), e.value = t, e.focus(), document.getElementById("button-link")
.style.display = "inline-block")
}
var clipboard = new Clipboard(".button-link");
clipboard.on("success", function(e) {
console.log(e), document.getElementById("btnInfo")
.style.display = "block", document.getElementById("codes")
.value = ""
}), clipboard.on("error", function(e) {
console.log(e)
});
function cdCopy() {
document.querySelector('#codes')
.select(), document.execCommand('copy');
document.querySelector('#btnInfo')
.style.display = 'block';
setTimeout(function() {
document.querySelector('#btnInfo')
.style.display = 'none'
}, 2000)
} /*]]>*/</script>
بالطبع، سأشرح أقسام الكود الخاص بالجافا سكريبت:
- وظيفة
`cdClear()`:
- تقوم بمسح محتوى مربع النص وتمكين جميع أزرار التحويل. - وظيفة
`preCvrt()`:
- تقوم بتحويل النص إلى شكل مسبق مع معالجة بعض الرموز للتنسيق. - وظيفة
`codeCvrt()`:
- تقوم بتحويل النص إلى شكل كود مع معالجة بعض الرموز للتنسيق. - وظيفة
`imgCvrt()`:
- تقوم بتحويل النص إلى شكل صورة. - وظيفة
`quoteCvrt()`:
- تقوم بتحويل النص إلى شكل اقتباس. - وظيفة
`cdCopy()`:
- تقوم بنسخ محتوى مربع النص إلى الحافظة وتظهر رسالة نجاح. - استخدام
Clipboard.js:
- يتم استخدام مكتبةClipboard.jsلتسهيل عملية النسخ. - الأحداث
(`onclick`)في الأزرار:
- تفعل الوظائف ذات الصلة عند النقر على الأزرار. - التحقق من النجاح والفشل
(`clipboard.on("success/error")`):
- يتيح للمطور التحقق من نجاح أو فشل عملية النسخ. `setTimeout`في`cdCopy()`:
- يستخدم لإخفاء رسالة النجاح بعد مدة زمنية.- إضافة JavaScript:
- ابقى في نفس الصفحة كود القالب
- ابحث عن`</body>`وضع الكودJavaScriptفوقه.
- بمجرد لصق الكود، احفظ التغييرات بالنقر فوق هذا الرمز
هذا الكود يوفر وظائف لتحويل النصوص المدخلة ونسخها، مما يسهل على المستخدمين التفاعل مع المحتوى بشكل أفضل.
ملاحظة:
يتناول هذا الموضوع بشكل متقن أهمية ميزة التعليقات في بيئة الويب الحديثة. يقدم النص فهمًا واضحًا للقراء حول دور التعليقات في تحسين تفاعل المستخدمين مع المحتوى وتعزيز التواصل بينهم. الشفرات المستخدمة لتفعيل هذه الميزة تقوم بتوضيح عملية تكامل التعليقات بشكل فعّال وجميل، مما يعزز تجربة المستخدم ويدفع بالمحتوى نحو التفاعل والمشاركة الفعّالة.
ختامًا
منشورات ذات صل
إذا كنت تسعى لجعل موقعك يوفر تجربة تفاعلية ومشاركة فعّالة، فإن ميزة التعليقات تمثل إضافة قوية. تذكير القراء بأهمية المشاركة والتفاعل يُعزز من فهمهم لدورهم الحيوي في بناء مجتمع حول المحتوى.
شكرًا لمساعدة ChatGPT في إعداد هذا المقال
المصادر:
WendyCode
بتصريف:
SiwaneXYZ©
https://www.siwane.xyz/2023/11/box-comments-professional-for-blogger.html
