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

اضافة تنبيه للتسجيل للزوار بطريقة جديدة. اقدم لكم اليوم هذا الكود البسيط ذو وظيفة جيدة خطرت على بالي. وهو اخفاء أزرار الرد على الموضوع واضافة زر بديل لها عند الضغط عليه يبنثق للزائر رسالة بأنه عليه التسجيل أولًا حتى يتمكن من الرد على الموضوع. فكرة بسيطة واضافة جميلة للمنتدى. الكود حاليًا يعمل لمنتديات الفي بي (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>

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