يمكنك الان شراء مساحة اعلانية علي موقعنا معرفه المزيد

اعلان

اخفاء او قفل منشور بلوجر باسم مستخدم و كلمة مرور

اخفاء موضوع او مشاركة على منصة بلوجر باستخدام كلمة مرور واسم مستخدم لعرض محتوى المنشور
الرجاء الانتظار 0 ثانية...
قم بالتمرير لأسفل وانقر فوق فتح الرابط للتوجيه
تم فحص وتجهيز الرابط

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

حماية المحتوى من السرقة بتعطيل F12

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

واجهة تسجيل الدخول بلوجر، شابيها الي زر التحميل محمي بكلمة مرور الذي شرحتها مسبقا. عندما يدخل الزائر الى المنشور المقصود سيرى هذه الرساله 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>

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

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

عن الكاتب

عبدالحميد ميدو، مصمم فلاتر سنابشات ومنشئ محتوى رقمي بخبرة تزيد عن 7 سنوات. لدي شغف بأحدث التقنيات، اهتمامًا خاصًا بلغات البرمجة كـ Python, JS وCSS.

3 تعليقات

  1. مقاله ممتازه و مفيده وشكرا جزيلا لكم
  2. la ychtaghil momkin mosa3ada
  3. بيعطيني اكتب البريد الكتروني وكلمة المرور بس ما بروح دخول
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.
ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت.
يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
يرجى السماح بعرض الإعلانات
يبدو أنك تستخدم أداة لحظر الإعلانات Adblock.
نحن نعتمد على الارباح التي نحققها من الإعلانات كمصدر تمويل لموقعنا الإلكتروني.
Site is Blocked
Sorry! This site is not available in your country.