Password Protected Download Button | পাসওয়ার্ড প্রটেক্টেড ডাউনলোড বাটন কিভাবে লাগাবেন ?
বন্ধুরা আজকের এই আর্টিকেলে আমরা আপনাদেরকে শেখাবো কিভাবে আপনারা আপনাদের ওয়েবসাইটের জন্য পাসওয়ার্ড প্রটেক্টেড ডাউনলোড বাটন লাগাবেন। এতে আপনার ওয়েবসাইটের যেকোনো ফাইলটিকে ডাউনলোড করার জন্য ইউসার কে প্রথমে আপনার ওয়েবসাইট থেকে পাসওয়ার্ড সংগ্রহ করতে হবে।
এই সময় ব্লগিংয়ের কম্পিটিশনে এতটাই বেড়ে চলেছে যে আপনি যতটা এডভান্স সিস্টেম আপনার ওয়েবসাইটটিতে লাগাতে পারবেন আপনার ওয়েবসাইটের ভিজিটর সেটা তত বেশি আপনার ওয়েবসাইটের উপর আকর্ষিত হবে। এর আপনাকে যে সমস্ত কাজ গুলি করতে হবে সেগুলো নিম্নে আলোচিত করা হলো।
Password Protected Download বাটন লাগাবেন ?
পাসওয়ার্ড প্রটেক্টর ডাউনলোড বাটন লাগাবার জন্য আপনাদেরকে একটি কোড ডাউনলোড করে নিতে হবে স্টেপ বাই স্টেপ আমাদের আর্টিকেলে আপনাদেরকে শেখানো হবে কিভাবে আপনারা এ কাজটি করতে পারবেন।
- প্রথমে আপনাকে নিচের দোয়া কোডটি কপি করতে হবে
HTML
<style>
#protect-body a{margin:1em 0px;padding:5px 12px;background:blue;align-items:center;text-decoration:none;max-width:100%;line-height:2em;display:inline-flex;white-space:nowrap;font-size:16px;color:#fff}#protect-overlay::after{content:'';display:block;position:absolute;right:0;top:0px;bottom:0;width:39%;overflow:hidden;border-top-left-radius:0;border-bottom-left-radius:112%;background-color:#f1f1f0}.overlay-credit{text-align:center;margin-top:20px;z-index:9;position:absolute;bottom:6px;right:15px;font-size:10px}#protect-overlay span.overlay-title{position:relative;font-size:20px;text-align:center;z-index:9}#protect-overlay{background:#fff;padding:30px;display:flex;position:relative;flex-direction:column;box-sizing:border-box;border:2px dashed blue;margin:18px auto}.from-overlay{align-items:center;text-align:center;display:flex;margin-bottom:20px;flex-direction:column;justify-content:center;z-index:9}#protect-overlay input{margin:0 auto;padding:12px;border:0;outline:0;max-width:100%;width:75%;text-align:center;background:#ddd;border-radius:3px;transition:.3s all}#protect-overlay input:focus, #protect-overlay input:active{border:2px solid blue;background:#fff;color:#222}#protect-overlay button{width:unset;margin:.5em 0 .5em 5px;padding:10px 15px;background:blue;border:2px solid transparent;outline:0;color:#fff;border-radius:3px;cursor:pointer;transition:.3s all}#protect-overlay button:hover{background:#fff;border:2px solid blue;color:blue}#protect-overlay input#togglepassword{margin:10px 5px 0 0;padding:0;width:unset}.toggle-wrapper{display:block}@media only screen and (max-width: 728px){#protect-overlay button{margin-left:0}.overlay-credit{left:0!important;right:0!important}}
</style>
এবার আপনাকে উপর দেওয়া কোড টিকে আপনার ব্লগার ওয়েবসাইটে ড্যাসবোটে যেতে হবে এখানে থিম অপশনটিকে Click করে Edit Html যাবেন আর ctrl+F এর সাহায্যে খুঁজে নেবেন </head> এর উপরে বসিয়ে দেবেন।
HTML
<div id="protect-body" class="body" style="margin:3em 0;">
<a href="https://anutrickz.blogspot.com/"> Click to Download </a>
</div>
<div id="protect-overlay" class="overlay">
<span class='overlay-title'> Enter Password to Unlock Download!</span>
<br/>
<form class='from-overlay' action="a()" method="GET">
<input name="answer" id="password" type="password" placeholder="Password"/>
<button type="submit">Unlock Items</button>
<div class="toggle-wrapper"><input id="togglepassword" type="checkbox" onclick="x()" value="Show Password"><lable>Show Password</lable></div>
</form>
<span class ='overlay-credit'> Code by - ♥ Anutrickz</span>
<script type='text/javascript'>
function x(){var t=document.getElementById("password");"password"===t.type?t.type="text":t.type="password"}function a(){document.getElementById("password");x.type,x.type="password"}!function(){var t=document.getElementById("protect-overlay"),e=document.getElementById("protect-body");e.style.display="none",t.getElementsByTagName("form")[0].onsubmit=function(){return this.answer.value===atob("YW51dHJpY2t6")?(alert("Password Right!"),t.style.display="none",e.style.display="block"):alert("Wrong password!"),!1}}();
</script>
</div>