كيفيه اضافه زر التحميل محمي بكلمة مرور في بلوجر

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

زر التحميل محمي بكلمة سر

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

اضافة زر التحميل محمي بكلمة مرور

فكره هذا زر التحميل لحماية روابط وعناوين URL بكلمة مرور مثل قناة تيلجرام خاصة. وتمكننا هذه الطريقة من زيادة المشتركين في مدونتنا بالإضافة إلى حماية المحتوى الحصري من الوصول العام.

الشكل الاول

مشاهدة

<div class="btnF">
  <div class="Download_btn" onclick="document.getElementById(&quot;AT-Download5&quot;).style.display=&quot;block&quot;">
  Download
</div>
</div>
<div class="D-overlay" id="AT-Download5">
  <div class="D-overlay__content">
    <div>
      <div class="box__close" onclick="document.getElementById(&quot;AT-Download5&quot;).style.display=&quot;none&quot;">
        ×
      </div>
    </div>
    <div class="Box-Header"><span> Download file </span></div>
    <!--[ ADVERTISEMENT]-->
    <div class="adshtml">
      <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxx" data-ad-slot="" style="display: inline-block; height: 250px; line-height: 250px; width: 100%;">
        <script> (adsbygoogle = window.adsbygoogle || []).push({});</script>
    </ins>
    </div>
    <div class="box-content">
      <div style="width: 80%;">
        <form class="d-from" onsubmit="return passcheck()">
          <div class="error-text"></div>
          <span style="font-size: 22px;">Enter Password!</span>
          <input class="css-input" id="pass1" type="Password" />
          <input class="Download_btn" type="submit" value="Download Now" />
        </form>
      </div>
    </div>
  </div>
</div>

<style type="text/css">
 .D-overlay{display:none;transition:all .2s ease;}.adshtml{overflow:hidden;display:block;position:relative;height:250px;margin-right:10px;margin-left:10px;border:1px dashed;}.D-overlay__content{position:relative;top:50%;left:50%;padding:20px;display:flex;background:#fff;flex-direction:column;width:80%;max-width:500px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);line-height:30px;border-radius:5px;transform:translate(-50%,-12%) scale(0.97);overflow:hidden;box-sizing:border-box;}.d-from{display:flex;justify-content:center;align-content:center;gap:12px;flex-direction:column;margin:12px 0 35px;text-align:center;justify-self:center;}.Box-Header{text-align:centerpadding:0 0 9px;border-bottom:1px solid;margin:0 0 23px;font-size:19px;font-weight:900;}.box-content{align-items:center;justify-self:center;position:relative;display:flex;text-align:center;vertical-align:middle;justify-content:center;}.box__close{position:absolute;top:10px;right:30px;color:#585858!important;font-size:33px;cursor:pointer;text-decoration:none!important;}.Download_btn{padding:0.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:0.3rem;color:#fff!important;text-decoration:none!important;background-color:#007bff;border-color:#007bff;display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;}.classname:active{position:relative;top:1px;}.css-input{padding:0.85em 1em;height:13px;border-width:1px;font-size:12px;border-color:#504f4f;color:#000000;text-align:center;border-style:solid;border-radius:0;}.css-input:focus{outline:none;}.error-text{background:#F8D7DA;padding:15px;border-radius:5px;color:#8B3E46;border:1px solid #F5C6CB;display:none;margin-bottom:10px;font-weight:bold;width:90%;text-align:center;}@media only screen and (max-width:480px){.D-overlay__content{width:100%!important;}}.drK .D-overlay__content{color:var(--darkU);}</style>

<script > //<![CDATA[
    const errorText = document.querySelector(".error-text");
var Password = "12345";

function passcheck() {
    if (document.getElementById("pass1").value != Password) return errorText.style.display = "block", errorText.textContent = "ERROR! Password Not Match.", !1;
    document.getElementById("pass1").value == Password && window.open("https://www.google.com", "_blank")}
//]]></script>

الشكل الثاني

هذا الشكل يتناسب جدا مع قوالب Plus UI, Median UI, imagz UI.

مشاهدة تحميل

<!-- HTML Codes -->
<center>
   <div class='dhPopBtn' onclick='document.getElementById("AT-Download5").style.display="flex"'>Download</div>
</center>

<!--[ password protected download ]-->
<div id='AT-Download5' class=' dhPopDh'>
   <div class='dhPopBo'>
      <div  style="text-transform: uppercase; font-size: 20px" class="darktext">Download File</div>
      <div>
         <div onclick='document.getElementById("AT-Download5").style.display="none"' class="box__close">&times;</div>
      </div>
      <p class="info-text darktext">For password send <span class="bold">#passfortest</span> in our <span class="bold">Telegram Group</span></p>
      <div class='box-content'>
         <div>
            <form class='d-from' onsubmit="return passcheck()">
               <p class="error-text"> </p>
               <span class="darktext" style="font-size: 18px; text-transform: uppercase; font-weight: 900; margin: 20px 0"> Please Enter Password</span> <input type="text" class="css-input" placeholder='Please Enter Password' required id="pass1">
               <input type="submit" style="border: none; outline: none;  border-radius: 50px" class="dhPopBtn" value="Download Now">
            </form>
         </div>
      </div>
   </div>
</div>

<!--[ CSS Style ]-->
<style>
.dhPopDh{position:fixed;z-index:99980;top:0;bottom:0;left:0;right:0;padding:20px;backdrop-filter: blur(10px);/*background:#f3f5fe;*/display:flex;justify-content:center;align-items:center; display: none}
.dhPopDh .dhPopBo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px; box-shadow: 0 0 10px #DCDEDF}
.dhPopDh .dhPopBo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.dhPopDh .dhPopBo div{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.dhPopDh .dhPopBo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.dhPopBtn{font-size: 20px;display:inline-flex;justify-content:center;align-items:center; padding: 10px; outline:none;border:none;background:#BBC7FF;border-radius:50px;margin-top:20px;transition:all .2s ease;-webkit-transition:all .2s ease}
.dhPopDh .dhPopBo .dhPopBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.dhPopDh .dhPopBo .dhPopBtn svg{width:24px;height:24px;flex-shrink:0;opacity:.8}
.dhPopDh .dhPopBo .dhPopBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.box-content{align-items:center;justify-self:center;position:relative;display:flex;text-align:center;vertical-align:middle;justify-content:center}
.css-input{padding:20px 1em;height:13px;border:1px solid black;font-size:15px;box-shadow:0 0 10px #FFF7DC color:#000000;text-align:center;border-radius:50px}
.css-input:focus{outline:none}
.error-text{background:#F8D7DA;padding:15px;border-radius:5px;color:#8B3E46;border:1px solid #F5C6CB;display:none;margin-bottom:10px;font-weight:400;width:90%;font-size:12px;text-align:center}
.info-text{background:#C9E9FF;padding:10px 10px;border-radius:15px;color:black;margin:10px 7px 10px;text-align:center}
.d-from{display:flex;justify-content:center;align-content:center;flex-direction:column;text-align:center;justify-content:center}
.box__close{position:absolute;top:28px;right:30px;color:#000;font-size:33px;cursor:pointer;text-decoration:none!important}
.info-text .bold{font-weight:900}
.drK .dhPopBtn{background:#FFE7E7}
.drK .dhPopDh .dhPopBo{background:#2c2d31}
.drK .dhPopDh .dhPopBo svg{stroke:#fefefe}
.drK .dhPopDh .dhPopBo p, .darkMode .dhPopDh .dhPopBo .darktext, .darkMode .dhPopDh .dhPopBo .box__close{color:#fefefe} 
.drK .info-text{background-color: #2A2A2A; box-shadow: 0 0 5px #E2E2E2}
</style>

خلاصة الموضوع

لقد شرحنا في هذا الموضوع كيفيه اضافه زر تحميل محمي بكلمه مرور في مدونة بلوجر. والي هنا ينتهي موضوعنا..

ينتهي هنا موضوعنا عن "كيفيه اضافه زر التحميل محمي بكلمة مرور في بلوجر "، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

فتح رابط التوجية