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

Hôm nay mình sẽ mở đầu cho năm mới với các topic về Blogger. Trong bài viết này, mình sẽ chia sẻ các bạn cách cách tạo mật khẩu bảo vệ nội dung bài viết cho Blogger. Cụ thể, bạn có thể đặt mật khẩu cho một bài viết, hoặc một trang và người dùng cần nhập đúng mật khẩu mới có thể đọc được nội dung được bảo vệ.

Cách tạo mật khẩu bảo vệ nội dung bài viết cho Blogger
Như các bạn biết, thì trên nền tảng Blogger này, chúng ta hoàn toàn không có back end hay database để lưu các mật khẩu được hash, nhưng trong bài viết này, mình sẽ bảo mật hết mức có thể với cách dưới đây:

Tạo mật khẩu để khóa nội dung

Các bước thực hiện đơn giản như sau:
Vào bài viết, hay trang của bạn thêm đoạn code sau với chế độ xem HTML:
<style>	
    #htech_flippylock {	
        text-align: center;	
    }	
    #htech_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;	
    }	
    #htech_flippylock button:hover,	
    #htech_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;	
    }	
</style>	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>	
	
<script type="text/javascript">	
    function passWord() {	
        var attemp = 1;	
        var pss = prompt("Vui lòng nhập mật khẩu", " ");	
        while (attemp < 3) {	
            if (!pss) location.reload(true);	
            if (pss.toLowerCase() == "hieutechvn") {	
                $("#flippanellock").slideToggle("normal");	
                break;	
            }	
            attemp += 1;	
            var pss = 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 ((pss.toLowerCase() != "password") & (attemp == 3)) location.reload(true);	
        return " ";	
    }	
</script>	
<center>	
    <div id="htech_flippylock"><button onclick="passWord()">Nội dung bị khóa</button></div>	
    <div id="flippanellock">	
        --- NỘI DUNG BỊ ẨN ĐẶT Ở ĐÂY ---	
    </div>	
</center>

Nếu blog của bạn đã có jquery sẵn thì hãy xóa line nhúng jquery này đi:

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

Trong đó:

  • hieutechvn là mật khẩu của bạn
  • Hãy đưa nội dung cần ẩn vào html được bôi vàng ở trên.

 

Live Demo

 

Lời kết

Đây là cách đơn giản nhất để bạn secure content của bạn với password, mình sẽ cập nhật những cách tốt hơn thế nữa trong thời gian tới.
Mong bài viết hữu ích.
Hieu Ho.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *