اضافة تنبيه للتسجيل للزوار بطريقة جديدة

39
اضافة تنبيه للتسجيل للزوار بطريقة جديدة

اضافة تنبيه للتسجيل للزوار بطريقة جديدة. اقدم لكم اليوم هذا الكود البسيط ذو وظيفة جيدة خطرت على بالي. وهو اخفاء أزرار الرد على الموضوع واضافة زر بديل لها عند الضغط عليه يبنثق للزائر رسالة بأنه عليه التسجيل أولًا حتى يتمكن من الرد على الموضوع. فكرة بسيطة واضافة جميلة للمنتدى. الكود حاليًا يعمل لمنتديات الفي بي (VBulletin) الجيل الثالث وسيتم اصدار نسخ منه للمنتديات الأخرى لاحقًا.

معاينة الكود

اضافة تنبيه للتسجيل للزوار بطريقة جديدة

تركيب الكود

توجه نحو لوحة الادارة – الاستايلات والقوالب – ابحث عن القالب SHOWTHREAD وابحث بداخله عن الكود التالي:

<if condition="$show['largereplybutton']">
		<td class="smallfont"><a href="newreply.php?$session[sessionurl]do=newreply&amp;noquote=1&amp;p=$LASTPOSTID" rel="nofollow"><if condition="$show['closethread']"><img src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]" border="0" /><else /><img src="$stylevar[imgdir_button]/threadclosed.gif" alt="$vbphrase[closed_thread]" border="0" /></if></a></td>
	<else />

واستبدله بالكود التالي: (هذا الكود معروض مرتين في القالب بعد استبداله اول مرة أبحث عنه مرة أخرى وقم باستبداله أيضًا)

<if condition="$show['largereplybutton']">
<if condition="$show['member']">
		<td class="smallfont"><a href="newreply.php?$session[sessionurl]do=newreply&amp;noquote=1&amp;p=$LASTPOSTID" rel="nofollow"><if condition="$show['closethread']"><img src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]" border="0" /><else /><img src="$stylevar[imgdir_button]/threadclosed.gif" alt="$vbphrase[closed_thread]" border="0" /></if></if></a></td>
	<else />

والآن ابحث عن السطر التالي في القالب:

<!-- controls below postbits -->

وفوق هذا السطر بالضبط ضع الكود التالي:

<if condition="$show['registerbutton']">
            <style>
#alert {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 16px;
  background-color: #D98008;
  color: white;
  padding: 20px;
  text-align: center;
  z-index: 9999;
}

button {
  background-color: #D98008; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

button:hover {
  background-color: #fff;
  border: solid 2px #D98008;
  transtition: 1s;
  color: #D98008;
}
</style>   
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button id="myButton">
	  أضف رد للموضوع  
</button>
<div dir="rtl" id="alert">
	  <em class="fa fa-exclamation-triangle"> انت لست عضوًا بالمنتدى، فقط الاعضاء لديهم صلاحية الرد على المواضيع </em>
</div>
                     <script>
document.getElementById("myButton").addEventListener("click", function() {
  document.getElementById("alert").style.display = "block";
  setTimeout(function(){
    document.getElementById("alert").style.display = "none";
  }, 2000); // يختفي التنبيه بعد 2 ثانية
});
</script> 
</if>

احفظ، ومبروك عليك الكود. توجه نحو الموضوع كزائر وقم بتدربته لتتأكد من أنه يعمل

Motasem Hanani
WRITTEN BY

Motasem Hanani

مطور مواقع، مصمم، ممنتج وكاتب محتوى. اسعى الى تغذية المحتوى العربي التطويري والثقافي في كل ما هو حصري ومفيد بعيداً عن النقل العشوائي والبرامج القديمه التالفة.