Cách tạo mật khẩu bảo vệ nội dung bài viết và trang web cho Blogger

How to Create Password Protect a Web Page

Có khá nhiều lý do để bạn tạo một mật khẩu bảo vể nội dung cho một website như: thông tin cá nhân, nội dung không dành cho trẻ em... Hoặc chỉ đơn giản bạn muốn tránh sự dòm ngó của người khác, chỉ muốn những người nhất định đọc được nội dung này.

Ở một bài viết trước Tạo Mật khẩu bảo vệ cho Bài viết của bạn trên Blogger Iris Tips đã chia sẻ cho các bạn cách đặt mật khóa để khóa bài viết lại, tuy nhiên phương pháp đó có một nhược điểm là sẽ bị yêu cầu nhập password ngay khi tải trang và nó sẽ khóa toàn bộ nội dung trang web, đã có một số bạn đã hỏi Iris Tips rằng có cách nào chỉ khóa một phần nội dung trên bài viết thôi chứ không toàn bộ. Sau đây Iris Tips sẽ chia sẻ cho các bạn một vài cách để thực hiện điều trên.

Xem thêm: Tạo Mật khẩu bảo vệ cho Bài viết của bạn trên Blogger

Cách 1: Khóa liên kết

Phương pháp này sẽ giúp bạn ẩn đường link trong bài viết, thích hợp cho các bạn dùng để ẩn link download.

1Đầu tiên bạn vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS sau đây vào trước thẻ ]]></b:skin>

.lock{position:relative;width:50px;height:50px;border:8px solid #E3A11E;border-color:#999 #999 #ccc;border-radius:50%;background-color:#ccc;color:#555}
.lock::before{content:"";display:block;position:absolute;top:-16px;left:-16px;bottom:0;right:0;width:50px;height:50px;border-radius:50%;border:8px solid #000;border-color:#fff #555 #555 #555}
.lock i{display:block;position:absolute;top:25%;left:0;right:0;bottom:25%;margin:auto;transition:0s}
.lock i:first-child{opacity:1}
.lock i:last-child{opacity:0}
.lock:hover{transform:rotate(495deg);transition:0.8s}
.lock:hover i{transform:rotate(-495deg);transition:transform 0.8s,opacity 0s 1.8s}
.lock:hover i:first-child{opacity:0}
.lock:hover i:last-child{opacity:1}
.lock:hover::before{transform:rotate(-900deg);transition:0.8s 0.8s}

2Thêm thư viện jQuery này vào trước thẻ </head> nếu như website của bạn chưa có

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

3Tiếp theo bạn vào mục đăng bài viết mới chuyển qua tab HTML, lần lượt dán đoạn HTML và Javascript sau đây vào

<center>
<button class="lock" onClick="passWord()">
  <i class="fa fa-lock fa-2x" aria-hidden="true"></i>
  <i class="fa fa-unlock-alt fa-2x" aria-hidden="true"></i>
</button>
</center>

<script type='text/javascript'>
function passWord() {
var testV = 1;
var pass1 = prompt('Vui lòng nhập mật khẩu',' ');
while (testV < 3) {
if (!pass1) 
location.reload(true);
if (pass1.toLowerCase() == "iristipsblog") {
window.open('https://iris-tips.blogspot.com');
break;
} 
testV+=1;
var pass1 = 
prompt('Truy cập bị từ chối - Mật khẩu không chính xác. Vui lòng nhập lại.','Nhập mật khẩu tại đây');
}
if (pass1.toLowerCase()!="password" & testV ==3) 
location.reload(true);
return " ";
} 
</script>

Chỉnh sửa: iristipsblog lại thành mật khẩu của bạn và https://iris-tips.blogspot.com thành liên kết cần ẩn.

• DEMO

Cách 2: Khóa nội dung tùy chỉnh

Cách này đẽ giúp bạn khóa một phần nội dung bài viết tùy, về cơ bản cách này cũng tương tự như cách 1 nhưng JS chỉnh sửa lại một tí.

1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS sau đây vào trước thẻ ]]></b:skin>

#flippylock {text-align:center;}
#flippylock button {margin:10px auto;cursor:pointer;font-family:'Source Sans Pro',sans-serif;background-color:#18bb8c;font-size:14px;color:#fff;padding:6px 14px!important;text-transform:uppercase;border:none;border-radius:3px;transition:all 0.3s ease-out;}
#flippylock button:hover, #flippylock button:focus {outline:none;background-color:#3b3f48;color:#fff;}
#flippanellock {padding:1px;text-align:left;background:#fafafa;border:1px solid #e3e3e3;}
#flippanellock {padding:24px;display:none;}
#flippanellock img {margin:10px auto;}

2Thêm thư viện jQuery này vào trước thẻ </head> nếu như website của bạn chưa có

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

3Tiếp theo bạn vào mục đăng bài viết mới chuyển qua tab HTML, lần lượt dán đoạn HTML và Javascript sau đây vào

<center>
<div id="flippylock"><button onClick="passWord()">Nội dung bị khóa</button></div>
<div id="flippanellock">
--- NỘI DUNG BỊ ẨN ĐẶT Ở ĐÂY ---
</div>
</center>

<script type='text/javascript'>
function passWord() {
var testV = 1;
var pass1 = prompt('Vui lòng nhập mật khẩu',' ');
while (testV < 3) {
if (!pass1) 
location.reload(true);
if (pass1.toLowerCase() == "iristipsblog") {
$("#flippanellock").slideToggle("normal");
break;
} 
testV+=1;
var pass1 = 
prompt('Truy cập bị từ chối - Mật khẩu không chính xác. Vui lòng nhập lại.','Nhập mật khẩu tại đây');
}
if (pass1.toLowerCase()!="password" & testV ==3) 
location.reload(true);
return " ";
} 
</script>

Trong đó: iristipsblog là mật khẩu của bạn.

• DEMO

Cách 3: Ẩn nội có mã hóa

Cách này mình tham khảo trên blog bạn Phú Cường cũng khá hay. Nội dung ẩn sẽ được mã hóa tránh bị view source.

1Đầu tiên bạn vào Chủ đề >> Chỉnh sửa HTML và dán đoạn JS sau đây vào trước thẻ </head>

<script src='https://sites.google.com/site/iristipsblogger/file/jsencryption.js'></script>

2Tiếp theo bạn truy cập trang web này và lần lượt nhập mật khẩu và nội dung cần ẩn vào khung Key và Plain Text

3Cuối cùng là cuộn xuống cuối trang và sao chép đoạn code trong khung HTML Code vào tab HTML trong bài đăng trên Blogger

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by wikihow/vincentcheung/Phú Cường/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm