Bài viết này sẽ hướng dẫn bạn
Khóa Liên kết
và Khóa Nội dung
trong bài viết.
Khóa Liên kết
Bước 1
Đăng nhậpTrang 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 sangChế độ HTML
sau đó copy và dán 02 đoạn code HTML và JavarScript 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ậpTrang 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 sangChế độ HTML
sau đó copy và dán 02 đoạn code HTML và JavarScript 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")