كيفية إنشاء منشئ ترخيص القالب

في الوقت الحالي، هناك العديد من الأشخاص الذين يمكنهم صنع منتجاتهم الرقمية الخاصة، خاصة قوالب المدونات ومواضيع ووردبريس ثم بيعها للمستهلكين، لكن المشكلة التي يعاني منها مطورو القوالب في كثير من الأحيان هي سرقة وبيع قوالبهم بشكل غير قانوني، وهذا ما يجعل مطوري التطبيقات والقوالب يشعرون بالحزن واليأس.

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

قبل الدخول في المناقشة، هناك عدة أنواع من التراخيص التي تحتاج إلى معرفتها حتى يبدو منتجك احترافيًا في عيون العميل.

أنواع التراخيص للمنتجات الرقمية

الترخيص الاحترافي

الترخيص الشخصي هو نوع من المنتجات الرقمية حيث يمكن للشخص استخدام خدمات منتجه فقط. عادة لا يُسمح بإعادة بيع هذا الترخيص أو تعديله.

حق العلامة الخاصة

حق العلامة الخاصة (PLR) هو ترخيص حيث يمكن إعادة بيع المنتجات ويمكنك أيضًا بيعها بكامل الربح. يقدم مالك المنتج حقوق الطبع والنشر لإعادة البيع.

ترخيص المطور

ترخيص المطور أو يمكن القول أن ترخيص المطور هو نوع من ترخيص المنتج حيث يمكن لأي شخص إعادة تطوير منتج تم شراؤه وليس هناك حد للترخيص شهريًا أو سنويًا بحيث يمكن لمالك ترخيص المطور استخدامه إلى الأبد.

نوع الترخيص الذي صنعته هو نفس ترخيص مطوري القوالب الآخرين تقريبًا، لماذا أقول تقريبًا؟ لأن النصيحة التي أكتبها أدناه أبسط بكثير وأسهل في الفهم أو يمكن القول أنها ليست مطولة.

أما عن مستوى أمان هذا الترخيص، فأعتقد أنه آمن إلى حد ما اعتمادًا على كيفية تطبيق رمز الترخيص في القالب الخاص بك وإذا كنت تريد أن تكون أكثر أمانًا، فيجب عليك تشفير كود النصيحة أدناه باستخدام أداة إخفاء التعليمات البرمجية (obfuscator) مع كود جافاسكريبت للقالب الخاص بك لجعله أكثر أمانًا.

مثال على كود الترخيص الذي سيتم إنشاؤه بواسطة النصيجة التي أنشأتها هو كما يلي:

MTA0MzUzNDg3MjIwNjU1NDQyMQ==

حتى لا أطيل عليكم، يرجى تجربة منشئ الترخيص أدناه باستخدام معرف المدونة الخاص بك.

كيفية إنشاء منشئ ترخيص القالب

بعد ذلك، أضف كود HTML أو القسم أدناه أعلى رأس كود القالب الخاص بك. يخدم قسم الكود أدناه كمكان لوضع كود الترخيص الذي أنشأته مسبقًا.

<b:section id='license' name='License' showaddelement='false'>
  <b:widget id='HTML55' locked='true' title='License' type='HTML' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='content'>أدخل الترخيص هنا</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
      <div id='license-code'><data:content/></div>
    </b:includable>
  </b:widget>
</b:section>
    

ثم انسخ كود HTML أدناه، إنه مجاني لك لأن هذا الكود هو كود رابط مع كود الترخيص الذي تم إنشاؤه.

<div id='myIdBlog'><data:blog.blogId/></div>

تأكد من إخفاء كود HTML في مكان آمن حتى لا يسرقه أشخاص غير مسؤولين.

بعد ذلك، انسخ كود jQuery أدناه ثم ضعه في منتصف أو نهاية كود جافاسكريبت الخاص بك وأذكرك مرة أخرى حتى يكون الترخيص أكثر أمانًا، اجمع كود جافاسكريبت أدناه مع كود جافاسكريبت للقالب الخاص بك.

$(document).ready(function () { 
  var license = $('#license-code').text(),
          myLicense = atob(license),
      tpllc = $('#myIdBlog').text(),
      second = 10;
      console.log(myLicense);
    if (myLicense == tpllc) {
        return false
    } else {
        $('body').append('<style>body{background:#000!important;overflow:hidden}#peringatan span{font-size:50px}#peringatan{z-index:999999999;position:fixed;top:0;right:0;left:0;padding:20% 0;height:100%;text-align:center;background:rgba(248,40,40,0.97);color:#fff}}</style><div id="peringatan"><h4>Activate Templates</h4><p>Silahkan hubungi  <b>www.hartomy.com</b> untuk mendapatkan lisensi Template</p><span id="aktivasi">'+second+'</span></div>');
        setInterval(function () {
      second <= 1 ? window.location.href = "https://www.aweywashk.xyz/" : $('#aktivasi').text(--second);
    }, 1e3)
    }
});
    

حيث يقول https://www.aweywashk.xyz/ يرجى استبداله برابط مدونتك لأنه إذا لم يتم تثبيت الترخيص أو كان خاطئًا فستنتقل المدونة إلى الرابط الذي كتبته.

طريقة التركيب

يرجى إنشاء صفحة جديدة في مدونتك باسم حر ثم نسخ كود HTML وكود جافاسكريبت أدناه ولصقه في قسم تحرير HTML.

كود HTML

<div class="container all-input">
    <div class="input-group mb-2" >
        <div class="input-group-prepend">
          <span class="input-group-text">ID Blog</span>
        </div>
        <input id="idBlog" type="text" value="" class="form-control focus"/>
        <div class="input-group-prepend">
            <button class="rounded-right btn btn-outline-info" type="button" id="generate">Generate</button>
        </div>
    </div>
    <div class="input-group mb-2" >
        <div class="input-group-prepend">
          <span class="input-group-text">Licence</span>
        </div>
        <input readonly id="hasil" type="text" value="" class="form-control focus"/>
    </div>
</div>
    

كود جافاسكريبت / jQuery

$("#generate").click(function(){
    var myID = $('#idBlog').val();
    var idGenerate = btoa(myID);
    $('#hasil').val(idGenerate);
    console.log(idGenerate);
});
    

كود / css

<style>
:root {
  --primary: #4361ee;
  --primary-dark: #3a56d4;
  --text: #2b2d42;
  --light-gray: #f8f9fa;
  --gray: #e9ecef;
  --dark-gray: #ced4da;
  --white: #ffffff;
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.container.all-input {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: var(--transition);
}

.container.all-input:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.input-group {
  margin-bottom: 1.5rem;
  position: relative;
  transition: var(--transition);
}

.input-group:hover {
  transform: translateY(-2px);
}

.input-group-prepend span {
  background-color: var(--gray);
  color: var(--text);
  border: 1px solid var(--dark-gray);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.75rem 1.25rem;
  min-width: 100px;
  text-align: center;
  transition: var(--transition);
  border-radius: 8px 0 0 8px !important;
}

.input-group:hover .input-group-prepend span {
  background-color: var(--light-gray);
  color: var(--primary);
}

.form-control.focus {
  height: auto;
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  color: var(--text);
  background-color: var(--white);
  border: 1px solid var(--dark-gray);
  border-left: none;
  transition: var(--transition);
  border-radius: 0 8px 8px 0 !important;
}

.form-control.focus:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
  outline: none;
}

.input-group:hover .form-control.focus {
  border-color: var(--primary);
}

#generate {
  background-color: var(--primary);
  color: var(--white);
  border: none;
  padding: 0 1.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: var(--transition);
  text-transform: uppercase;
  font-size: 0.85rem;
  border-radius: 0 8px 8px 0 !important;
  height: 10%;
  display: flex;
  align-items: center;
}

#generate:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

#generate:active {
  transform: translateY(0);
}

#hasil {
  background-color: var(--light-gray);
  color: #6c757d;
  font-style: italic;
  cursor: not-allowed;
  border-radius: 8px !important;
  transition: var(--transition);
}

#hasil:hover {
  background-color: var(--gray);
}

/* Floating animation for the whole container */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

.container.all-input {
  animation: float 6s ease-in-out infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
  .container.all-input {
    padding: 1.5rem;
    margin: 1.5rem;
    animation: none;
  }
  
  .input-group {
    flex-direction: column;
  }
  
  .input-group-prepend span,
  .form-control.focus,
  #generate {
    width: 100%;
    border-radius: 8px !important;
    margin-bottom: 0.5rem;
  }
  
  .input-group-prepend {
    width: 100%;
    margin-right: 0;
  }
  
  #generate {
    justify-content: center;
    padding: 0.75rem;
  }
}

/* Loading animation for generate button */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

#generate.loading {
  animation: pulse 1.5s infinite;
  position: relative;
}

#generate.loading:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
              transparent, 
              rgba(255,255,255,0.3), 
              transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
</style>
    

هذا كل ما يمكنني مشاركته أولاً في هذه المقالة، الكود الذي كتبته أعلاه هو نتيجة تجربتي الشخصية البحتة وقد لا يكون الكود أعلاه متطابقًا بنسبة 100٪ مع مطوري القوالب الآخرين ولكن كود الترخيص الذي تم إنشاؤه هو نفسه تمامًا بنسبة 100٪ مثل مطوري القوالب الآخرين وأعتقد أن مستوى الأمان الذي يتمتع به قوي.

شكرًا لزيارتكم، يرجى دعم هذه المدونة ببعض الإعلانات التي تظهر على هذه الصفحة.

كيف كان المقال؟