Cyber 1101

اذا كنت تملك مدونه على منصة Blogger.com وتحتاج اخفاء منشور معين عن زوار مدونتك ولا يستطيع احد مشاهدتها الا الأشخاص الذين انت تحددهم فاليك افضل اضافه لمدونات بلوجر 2023.

واجهة تسجيل الدخول بلوجر

واجهة تسجيل الدخول بلوجر، شابيها الي زر التحميل محمي بكلمة مرور الذي شرحتها مسبقا. عندما يدخل الزائر الى المنشور المقصود سيرى هذه الرساله Login in تطلب منه ادخال كلمه السر واسم المستخدم لعرض صفحة الويب. وبعد ادخال البيانات والنقر على زر الدخول، يقوم الكود بالتحقق من تطابق اسم المستخدم وكلمه المرور المدخله مع البيانات المخزنه في كود Javascript، وتظهر رساله Error اذا كانت البيانات خطاء، واذا كانت مطابقة يتم اخفاء نموذج "تسجيل الدخول" ويتم تخزين حالة الدخول في الذاكره المؤقته. ويستخدم API الذاكرة المحلية لمتصفح الويب (localStorage) لتخزين اسم المستخدم وكلمة المرور الخاصة بهم.

طريقه تركيب وجهة تسجيل الدخول.

قبل اضافه الكود يحتاج بعض التعديلات مثل كلمة السر و اسم المستخدم. ويمكنك أيضا التعديل على الرمز كله إلى ما يتناسب مع مظهر القالب الخاص بك إذا كنت تستخدم قالب اخر غير قالب Plus UI.

لطريقه تركيب واجهه تسجيل الدخول الى منشور في مدونتك على بلوجر، الطريقه سهله فاتبع الخطوات التاليه:

1. اذهب الى الوجه الرئيسيه Blogger.
2. قم باختيار الموضوع او المنشور الذي تريد تطبيق هذا الامر عليها.
3. قم بالضغط على تبويب HTML وبعدها قم بإضافة الكود التالي، اسفل جميع الاكواد الموجود في الصفحه.

<div class="lgn">
  <div id="lgnid">
    <div class="lgnttl">Login</div>
    <input id="username" type="text" placeholder="Username"/><br />
    <input id="password" type="password" placeholder="Password" />
    <br />
    <center><button class="login" onclick="startlog()">Login</button></center>
    <p id="access"></p>
  </div>
</div>
<style type="text/css">
/* Login CSS */.lgn{width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999999999;background:flat;background-color:#f3f5fe;background-size:400% 400%;animation:gradient 10s ease infinite}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.lgn.hidden{display:none}#lgnid{position:absolute;border-radius:8px;width:400px;padding:30px;display:block;transform:translate(-50%,-50%);top:50%;left:50%;background:flat;background-color:#fff;transition:all .5s ease;border-radius:20px}.lgnttl{font-size:25px;font-weight:700;text-align:center}#lgnid input[type=text],#lgnid input[type=password]{padding:10px;border-radius:40px;margin:10px 0;width:95%;border:1px solid rgba(255,255,255,.2);background:#d3d3d3}#username::-webkit-input-placeholder,#password::-webkit-input-placeholder{color:#000}#lgnid input[type=text]:focus,#lgnid input[type=password]:focus{outline:none}button.login{color:#fff;padding:10px;border-radius:40px;border:none;outline:none;background:#9c27b0;transition:1.5s}
button.login:hover{background-color:red;transition:.5s}@media screen and (max-width:480px){#lgnid{width:350px}}.red{color:red}
</style>
<script>
var storeS = localStorage.getItem("users");
if (null == storeS) {
    var users = [
        { username: "Medo", password: "12345" },
        { username: "username_here", password: "password_here" },
    ];
    localStorage.setItem("users", JSON.stringify(users));
}
function getUserUsername(e) {
    return JSON.parse(localStorage.getItem("users")).filter((t) => t.username === e);
}
function ceklog() {
    var e = localStorage.getItem("login");
    null != e && "true" == e && document.querySelector(".lgn").classList.add("hidden");
}
function startlog() {
    var e = document.querySelector("#username").value,
        t = document.querySelector("#password").value;
    getUserUsername(e.trim()).length > 0
        ? getUserUsername(e.trim())[0].password == t.trim()
            ? (document.querySelector(".lgn").classList.add("hidden"), localStorage.setItem("login", "true"))
            : (document.querySelector("access").innerHTML = "<p class='red'>Wrong username or password!</p>")
        : (document.querySelector("access").innerHTML = "<p class='red'>User not found!</p>");
}
ceklog();
const show = () => {
    var e = document.querySelector("#password"),
        t = document.querySelector(".icon1"),
        r = document.querySelector(".icon2");
    "password" === e.type ? ((e.type = "text"), (r.style.opacity = "1"), (t.style.opacity = "0")) : ((e.type = "password"), (r.style.opacity = "0"), (t.style.opacity = "1"));
};
</script>

ملاحظة:
يجب تذكير الزوار بكلمة المرور التي قمت بإدخالها في الاسكريبت، إذا كنت ترغب في السماح لهم بالوصول إلى المحتوى المخفي.

ينتهي هنا موضوعنا عن "اخفاء او قفل منشور بلوجر باسم مستخدم و كلمة مرور"، ونلتقي في موضوع جديد على مدونة Cyber1101. دمتم في امان الله :)

تقييم المقالة

فتح رابط التوجية