يمكنك الان شراء مساحة اعلانية علي موقعنا معرفه المزيد

اعلان

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

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

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

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

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

عادة ما نريد حماية صفحة أو موضوع في منصة وورد برس لتقييد الوصول إلا لأشخاص نختارهم ونعطيهم كلمة المرور وذلك قد يكون لحماية موضوع حصري أو كورس مدفوع الأجر أو كتاب إلكتروني مهم أو تطبيق مخصص غير متوفر للعامة ...
لذا فإن هدفنا المهم لا يُخدم جيدا في بلوجر. وذلك لأننا لا نستطيع تقييد حق الدخول للزائرين العاديين للمدونة في لذا فإن حماية موضوع محدد أو عنوان 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>

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

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

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

عن الكاتب

عبدالحميد ميدو، مصمم فلاتر سنابشات ومنشئ محتوى رقمي بخبرة تزيد عن 7 سنوات. لدي شغف بأحدث التقنيات، اهتمامًا خاصًا بلغات البرمجة كـ Python, JS وCSS.

إرسال تعليق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.
ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت.
يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
يرجى السماح بعرض الإعلانات
يبدو أنك تستخدم أداة لحظر الإعلانات Adblock.
نحن نعتمد على الارباح التي نحققها من الإعلانات كمصدر تمويل لموقعنا الإلكتروني.
Site is Blocked
Sorry! This site is not available in your country.