Tạo mật khẩu cho bài viết - Khóa Liên kết và Nội dung

Bài viết này sẽ hướng dẫn bạn Khóa Liên kếtKhóa Nội dung trong bài viết.

Khóa Liên kết

Bước 1

Đăng nhập Trang Quản trị Blogger » Chủ đề » Tùy chỉnh » Chỉnh sửa HTML tìm đến thẻ đóng ]]></b:skin> và dán đoạn CSS sau đây vào trước nó.
..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}

Bước 2

Thêm thư viện thẻ jQuery này vào trước thẻ ]]></b:skin> nếu như Blogger bạn chưa có (nếu bạn có rồi thì bỏ qua bước này).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Bước 3

Tại bài viết bạn chuyển sang Chế độ HTML sau đó copydán 02 đoạn code HTMLJavarScript dưới đây vào rồi lưu lại.

#Html

<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>

#Javarscript

<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() == "#mat_khau") {
window.open('#link_lien_ket');
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>

NOTE

• Thay #mat_khau thành mật khẩu của bạn.
(pass1.toLowerCase() == "#mat_khau")
• Thay #link_lien_ket thành link của bạn.
window.open('#link_lien_ket')

Khóa Nội dung

Bước 1

Đăng nhập Trang Quản trị Blogger » Chủ đề » Tùy chỉnh » Chỉnh sửa HTML tìm đến thẻ đóng ]]></b:skin> và dán đoạn CSS sau đây vào trước nó.
#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;}

Bước 2

Thêm thư viện thẻ jQuery này vào trước thẻ ]]></b:skin> nếu như Blogger bạn chưa có (nếu bạn có rồi thì bỏ qua bước này).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Bước 3

Tại bài viết bạn chuyển sang Chế độ HTML sau đó copydán 02 đoạn code HTMLJavarScript dưới đây vào rồi lưu lại.

#Html

<center>
<div id="flippylock"><button onClick="passWord()">TIÊU_ĐỀ</button></div>
<div id="flippanellock">
--- #Nội_dung_cần_ẩn ---
</div>
</center>

#JavarScript

<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() == "#mat_khau") {
$("#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>

NOTE

• Thay #Nội_dung_cần_ẩn thành Nội dung mà bạn muốn ẩn.
--- #Nội_dung_cần_ẩn ---
• Thay #mat_khau thành mật khẩu của bạn.
if (pass1.toLowerCase() == "#mat_khau")