How to Install advance password Safelink on Your Blogger website

Before continuing this tutorial, it's a good idea to make a backup of the blogger theme first. So that if something goes wrong during installation, we can easily restore it.

Let's get straight to the point of this article, which is how to install the safelink script for the any theme. The first step is to copy and paste the two JavaScript codes below right above the code 

Stape 1

Copy the javascript code below and paste it right above  tag

Introduction

Javascript is one of the more powerful and versatile programming languages to have made it's way into web development.

While HTML/CSS deal with structure and style, respectively, JavaScript provides behavior to make websites interactive or dynamic.

What is JavaScript?

JavaScript is a client-side scripting language mainly used for creating web pages with dynamic and interactive content.

Developers can use it to deliver interactive forms, animated components or even real time-updates.

That is something like, if you click a button in your website and some things changes without the complete reload of page then there JS comes into picture.

The Point of Javascript:

JavaScript is a must for developers who are planning to design complex and outstanding web solutions; it makes the websites real interactive.

It runs directly in the browser of a user since it is a client-side language, making web pages faster and more responsive.

It is also the most used for development in web, because it works perfect on all browsers from our current era of internet.

Finally:

JavaScript needs to be learned! JavaScript is used in conjunction with HTML & CSS to create web-development projects that are even more responsive and dynamic, which will ultimately improve user experience.Design; you can make use of JavaScript.

JavaScript is a necessary evil in modern web development, whether you're just getting started or an experienced developer.

  <script>
//<![CDATA[
 const faarrowLeft = document.querySelector('.fa-arrow-left');
const popupBox = document.querySelector('#popup-boxPass');
const downloadBtnCnt = document.getElementById('download-btnPass');
const overlayRajCnt = document.getElementById('overlay');
const passwordInput = document.getElementById('password-input');
 const togglePassword = document.querySelector('#toggle-password');
                          
downloadBtnCnt.addEventListener('click', function() {
 popupBox.classList.add('visible');
 overlayRajCnt.classList.add('visible');
        });
faarrowLeft.addEventListener('click', () => {
  adsSectionCnt.style.display = 'none';
});

 function checkPassword() {
            const enteredPassword = document.getElementById('password-input').value;

            if (enteredPassword === correctPassword) {
                document.getElementById('download-link').style.display = 'block'; // Show download link
                document.getElementById('download-btnPass').style.display = 'none';
                closePopup();
            } else {
                document.getElementById('error-msg').textContent = "Wrong password, enter the correct password and try again later.";
            }
        }
        
        function closePopup() {
            document.getElementById('popup-boxPass').classList.remove('visible');
            document.getElementById('overlay').classList.remove('visible');
            document.getElementById('error-msg').textContent = "";
        }
        const gitPinBtnPrs = document.querySelector('#gitPinBtnPrs');
   const adsSectionCnt = document.querySelector('#adsSectionCnt');
   gitPinBtnPrs.addEventListener('click', function() {
     
     adsSectionCnt.style.display = 'flex';
   }
   );
   const copyCantnior = document.querySelector('.copyContainer')
   
   const startTimerBtn = document.querySelector('#startTimerBtn');

const manualDownloadLink = document.querySelector('.manualDownload-link');
var timeLeft = 1;
startTimerBtn.addEventListener('click', () => {
  startTimerBtn.style.display = "none";
  countdown.innerHTML = `please wait in ${timeLeft} second`;
  let downloadTimer = setInterval(function timeCount() {
    timeLeft--;
    countdown.innerHTML = `please wait in ${timeLeft} second`;
    if (timeLeft <= 0) {
      clearInterval(downloadTimer); 
      copyCantnior.style.display = 'block'; 
      countdown.style.display = "none";
    }
  }, 1000);
  
});
let copyText = document.querySelector(".copy-text");
copyText.querySelector("#copyBtn").addEventListener("click", function () {
	let input = copyText.querySelector("input.text");
	input.select();
	document.execCommand("copy");
	copyText.classList.add("active");
	window.getSelection().removeAllRanges();
	setTimeout(function () {
		copyText.classList.remove("active");
	}, 2500);
});
//]]>
</script>

Stape 2

Now Add Some CSSb

Description: CSS

(Cascading Style Sheets) is a cornerstone technology used during web developing to control the visual presentation of websites.

HTML defines the structure of a website and CSS is designed to make web designs look perfect, beautiful with eye-catchy layouts.

What is CSS?

CSS is a styling language which can be used to control the whole look and feel of a web-page. CSS allows designers to give an entire website a consistent look and can changes across thousands of pages in minutes.

Having these separated, content and design provide the benefit of being able to have access parts where you can perform updates on a website easily.

The fact CSS is actually important: A deep dive into modern web design It makes the design responsive and website will work on all devices smoothly; User experience is very nice too.

In addition to this, CSS helps developers make websites visually appealing which can help in retaining old users and attracting new ones.

This tool undoubtedly has become one of the must-have tools among web developers because it is highly flexible and efficient.

IN CONCLUSION: Understanding CSS is a must for anyone who works with web design.

It gives you the power and flexibility to build beautiful websites while making sure they can be completely responsive, mobile safe on all devices.

Add the CSS code before just below the tag </b:skin>

   .popup{
  display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
background-color: #1D1C2C;
color: #fff;
border-radius:8px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
animation: gradient-animation 6s ease infinite;
width: 430px;
background: flex;
text-align: center;
align-items: center;
justify-content: center
}

.popup.visible { 
  display: block; 
}
    

.overlay { 
  display: none; 
  position: fixed; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; 
  background: rgba(0,0,0,0.5); 
}

.error {
  color: red;
  margin-top: 10px;
  }

.toggle-password {
  cursor: pointer;
  }
      
#download-link {
  display: none;
  margin-top: 20px;
  }
        
#inpupCnt{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
   
#password-input{
  outline: none;
  color: #1A85FF;
  border: 3px solid #6768B5;
  border-bottom-left-radius: 7px;
  border-top-left-radius: 7px;
  padding-left: 10px;
  width: 199px;
  padding: 10px 15px;
}

#checkPassBtn{
  background: #00B4FF;
  outline: none;
  color: #fff;
  border: none;
  padding: 7px 15px;
  border-bottom-right-radius: 26px;
  font-weight:bold;
  font-size: 25px;
}

#password-input, textarea { 
  background-color: black; 
  color:#fff;
 } 

#logoImgCntMain{
  background: #000000;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px; 
  padding-top: 9px;
}

#downLogoImg{
  width:auto;
  height: 180px;
  margin-bottom: 10px;
}

#logoTxtDon{
  margin:0;
  margin-top:5px;
  color: #F4EDEDEB;
  font-size: 50px;
}



#allBtnforePass{
  display: flex;
  text-align: center;
  align-items:center;
  justify-content: space-around;
  margin-top: 10px;
}

#allBtnforePass .btnStyle{
  background: #0037FF;
  color: #fff;
  font-weight: bold;
  outline: none;
  border: none;
  padding: 11px 45px;
  cursor: pointer;
  border-radius: 26px;
  text-decoration: none;
  font-size: 25px;
}

#telegramJoinBtn{
  margin-top: 30px;
}

#telegramJoinBtn a, #download-btnPass{
  background: #0037FF;
  color: #fff;
  font-weight: bold;
  outline: none;
  border: none;
  padding: 11px 45px;
  cursor: pointer;
  border-radius: 26px;
  text-decoration: none;
}

.headerH2TitlePin{
  font-size: 50px;
  color:white;
}

#adsSectionCnt{
  background-color: #FFFFFF;
color: #fff;
border-radius:8px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
height: auto;
width: 430px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: fixed;
display: none;
text-align: center;
align-items: center;
justify-content: center
}




.copyContainer .label{
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}

.adsSectionCnt2{
  display: flex;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #fff;
border-radius:8px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
height: auto;
width: 430px;
text-align: center;
align-items: center;
justify-content: center 
}

#ads1{
  display: block;
  height: 150px;
  width: 300px;
  background: #E0DFF2;

}

#adsSectionCnt #cantnior{
  display: block;
}

#adsSectionCnt #cantnior #coundownCnt .btnStyle {
    background: #0037FF;
  color: #fff;
  font-weight: bold;
  outline: none;
  border: none;
  padding: 11px 45px;
  cursor: pointer;
  border-radius: 26px;
  text-decoration: none;
}

#adsSectionCnt #cantnior #coundownCnt #countdown {
  color:black;
  font-weight: bold;;
}


.copyContainer {
	display: none;
	
	    
}
.label {
	padding: 10px;
	font-size: 18px;
	color: #111;
}
.copy-text {
	position: relative;
	padding: 10px 0px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	display: flex;
}
.copy-text input.text {
	padding: 10px;
	font-size: 18px;
	color: #555;
	border: none;
	outline: none;
}
.copy-text #copyBtn {
	padding: 10px;
	background: #5784f5;
	color: #fff;
	font-size: 18px;
	border: none;
	outline: none;
	border-radius: 10px;
	cursor: pointer;
}

.copy-text #copyBtn:active {
	background: #809ce2;
}
.copy-text #copyBtn:before {
	content: "Copied";
	position: absolute;
	top: -45px;
	right: 0px;
	background: #5c81dc;
	padding: 8px 10px;
	border-radius: 20px;
	font-size: 15px;
	display: none;
}
.copy-text #copyBtn:after {
	content: "";
	position: absolute;
	top: -20px;
	right: 25px;
	width: 10px;
	height: 10px;
	background: #5c81dc;
	transform: rotate(45deg);
	display: none;
}
.copy-text.active #copyBtn:before,
.copy-text.active #copyBtn:after {
	display: block;
}


#copyBtn .fa-clone{
  width:auto;
  height: 20px;
  margin: 0;
  padding: 0;
  color: white;
}


#password-input::placeholder {
  color: white;
  font-weight:bold;
  opacity: 1; /* Firefox */
  font-size: 20px;
}

@media (max-width: 800px){
  .popup{
    width: 230px;
    height: auto;
  }
  
  #password-input{
  width: 110px;
  border: 1px solid #6768B5;
}

#checkPassBtn{
  padding: 10px 15px;
  font-size: 15px;
}

.headerH2TitlePin{
  font-size: 15px;
  color:white;
}

#logoTxtDon{
  font-size: 25px;
}

#downLogoImg{
  height: 80px;
}

#password-input::placeholder {
  font-size: 11px;
}

#allBtnforePass .btnStyle{
  padding: 11px 29px;
  font-size: 14px;
}

#adsSectionCnt,.adsSectionCnt2{
  width:300px;
  
}
  
}


#passPopup{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

Now past tha code after opening head tag

            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

Stape 3

Now create a page & post past this below 👇 code

    <div id="passPopup">
<button class='btnStyle' id="download-btnPass">Download</button>
<div class="popup" id="popup-boxPass">
<div id="logoImgCntMain">
<!-- your image title here -->
<h2 id="logoTxtDon">Raj Hacker</h2>
<!-- your title logo here -->
<!-- your image logo here -->
<input id="downLogoImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1HUkxxsdJWeS6HHHAYkY5A_qLC9Ou92Jv4a3U1xj2rkujoZQQrfnVMdJyrSuFpSoOU8kAAKfX_THa81jyZIBdkiBHq7elGglmZKKREhe5SwYCxOZ3yZwlgM54Z51nA-TYBYTnoNGHW3VHtKRzQI4dYDgAf96ZK6ulhkICZ5baoFESFNv88MaCo8xtp-4/s3264/20240813_202533.png" type="image" />
<!-- your image logo here -->
</div>
<h2 class="headerH2TitlePin">Enter 4 Digit PIN</h2>
<div id="inpupCnt">
<input id="password-input" type="password" placeholder='Enter 4 Digit PIN' />
<button class='btnStyle' id="checkPassBtn" onclick="checkPassword()">Git Link</button>
</div>
<div id="allBtnforePass">
<button class='btnStyle' onclick="closePopup()">Cancel</button>
<button class='btnStyle' href="#" id="gitPinBtnPrs">Grt Pin</button>

<!--<a href="Git Pen">Git Pen</a>-->
</div>
<div id="telegramJoinBtn">
<a class='btnStyle' href="">Join Telegram</a>
</div>
<p class="error" id="error-msg"></p>
</div>

<div class="overlay" id="overlay"></div>
<!--your download link add here-->
<a class='btnStyle' download="" href="your-download-link.zip" id="download-link">Click here to download the file</a>
<!--your download link add here-->
</div>

<!--diract pin section-->

<div id="adsSectionCnt">


<div class="adsSectionCnt2">

<div id="cantnior">
<div id="ads1">
your ads here
</div>
<div id="coundownCnt">
<button class='btnStyle' id="startTimerBtn">Click Here To Git Pin</button>
<span id="countdown"></span>
<div class="copyContainer">
<div class="label">
<i aria-hidden="true" class="fa fa-arrow-left"></i> <span>4 Digit PIN</span>
</div>
<div class="copy-text">
<!-- your pin here for copy function -->
<input class="text" type="text" value="2828" />
<!-- your pin here for copy function -->
<span id="copyBtn"><i aria-hidden="true" class="fa fa-clone"></i></span>
</div>
</div>
</div>
<div id="ads1">
your ads here
</div>
</div>
</div>
</div>
<!--diract pin section end-->

Finaly out work is almost completed. Public your post & page and open it.

After that it will look something like this. Now we will change the logo, how is the logo changed,

Here you can also give your file logo and also give your website logo.

 <input id="downLogoImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1HUkxxsdJWeS6HHHAYkY5A_qLC9Ou92Jv4a3U1xj2rkujoZQQrfnVMdJyrSuFpSoOU8kAAKfX_THa81jyZIBdkiBHq7elGglmZKKREhe5SwYCxOZ3yZwlgM54Z51nA-TYBYTnoNGHW3VHtKRzQI4dYDgAf96ZK6ulhkICZ5baoFESFNv88MaCo8xtp-4/s3264/20240813_202533.png" type="image" />

Replace your logo URL in this space.

Now if you click on get link then it won't work because you have to add tha javi code to get get link working. Add the below code below your page and post

Here you can add text and numbers if you want, no problem, if you want, you can put more than 4 but I have kept four, you can keep your choice, there will be no problem.

      <script> const correctPassword = "2828"; // add your password & pin </script>

Copy the code below into the post and paste it below the script tag. This works for your download and git pin timer. You can keep it as yours

  var timeLeft = 1; //increase your timer

In this you add your password which you want your user to copy

If this is a problem please comment and update this code will be available on this website.

See Demo

Important Notice:

Respect the effort and time put into making this. All copyrighted material is property of the copyright holder and distributed without profit you must be aware that in case the full text has been read here we have intended to provide readers an easy ranking from 1-10.

You are welcome to share this content; please provide proper credit by linking back to the original source. This content is strictly editorial and belongs to NOUBAREDE.

Thank you for your cooperation and enchanting understanding.

Blog with Raj