Ads

Cara Membuat Password Untuk Blog Version 2

Cara Membuat Password Untuk Blog Version 2
Dagruel

Special Tahun Baru, kali ini saya akan membagikan Script Password untuk blog yang fungsi nya masih sama dengan versi pertama. Langsung saja berikut cara nya.

Edit template blogger dan Pasang CSS berikut di atas tag ]]></b:skin>.

.back{background:linear-gradient(120grad,#643986,#98aed5);position:fixed;width:100%;height:100%}.passwordForm{width:400px;position:fixed;left:50%;transform:translate(-50%,0);top:15%;background:0 0}.passwordForm .head{position:relative;z-index:4;background:#fff;padding:20px 40px;border-radius:15px 15px 0 0}.passwordForm .head h1{font-weight:900;letter-spacing:1.5px;color:#333;font-size:23px;text-transform:uppercase;margin:0}.passwordForm .head p{word-spacing:0;color:#9facb6;font-size:17px;margin:0;margin-top:5px}.passwordForm .body{position:relative}.passwordForm .body .input-section{width:100%;position:absolute;display:flex;left:50%;transform:translate(-50%,0);height:75px;border-radius:0 0 15px 15px;overflow:hidden;z-index:2;box-shadow:0 0 100px rgba(0,0,0,.2);transition:all .2s ease-in}.passwordForm .body .input-section.fold-up{margin-top:-75px}.passwordForm .body input{background:#fff;color:#8f8fd6;width:80%;border:0;padding:20px 40px;margin:0}.registration-form form input:focus{outline:0}.registration-form form input::placeholder{color:#333;font-weight:100}.animated-button{width:20%;background-color:#d4d4ff}.animated-button button,.animated-button span{display:flex;flex-direction:row;justify-content:space-around;align-items:center;line-height:75px;text-align:center;height:75px;transition:all .2s ease-in}.animated-button button i,.animated-button span i{font-size:25px;color:#9999f8}.animated-button .next-button{background:0 0;color:#9999f8;font-weight:100;width:100%;border:0;cursor:pointer}.next{margin-top:-75px}#isSucces{width:100%;position:absolute;display:flex;align-items:center;left:50%;transform:translate(-50%,0);height:75px;border-radius:0 0 15px 15px;overflow:hidden;z-index:2;box-shadow:0 0 100px rgba(0,0,0,.2);transition:all .2s ease-in;background:#32cd32;margin-top:-75px}#isSucces p{color:#fff;font-weight:900;letter-spacing:2px;font-size:18px;width:100%;text-align:center}

Selanjutnya pasang script berikut di atas tag </head>

<script type='text/javascript'>/*<![CDATA[*/
	const findCSS=e=>{for(var n=new RegExp(e+".*?.css","i"),t=document.getElementsByTagName("link"),s=0,a=t.length;s<a;s++)if(t[s].href&&n.test(t[s].href))return!0;return!1},pWa=(e,n,t="AllPassword")=>{if(e==localStorage.getItem(t))return;if(0==findCSS("font-awesome")){const e=document.createElement("link");e.rel="stylesheet",e.href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css",document.head.appendChild(e)}document.body.innerHTML='<div class="back"></div>\n  <div class="passwordForm">\n  <div class="head">\n  <h1>Masukkan Password!</h1>\n  <p>Isi Password Dengan Benar</p>\n  </div>\n  <form class="body">\n  <div class="input-section password folded">\n  <input type="text" placeholder="Insert Password">\n  <div class="animated-button">\n  <span class="icon-lock"><i class="fa fa-lock"></i></span>\n  <button type="submit" class="next-button password"><i class="fa fa-paper-plane"></i></button>\n  </div>\n  </div>\n  <div id="isSucces"></div>\n  </form>\n  </div>';const s=2,a=document.querySelector(".passwordForm form.body"),r=a.querySelector("input[type=text"),o=r.parentElement.nextElementSibling;r.focus(),a.addEventListener("submit",i=>{if(i.preventDefault(),r.parentElement.classList.add("fold-up"),o.style.marginTop=0,r.value==e){localStorage.setItem(t,e),o.innerHTML=`<p>Tunggu ${n+1} Detik.</p>`;let s=setInterval(()=>{n<=0?(clearInterval(s),window.location.reload()):o.innerHTML=`<p>Tunggu ${n} Detik.</p>`,n-=1},1e3)}else{o.innerHTML=`<p>Password yang anda masukkan salah tunggu ${n+1} detik.</p>`;let e=setInterval(()=>{if(n<=0)return clearInterval(e),o.innerHTML="",a.reset(),r.focus(),r.parentElement.classList.remove("fold-up"),o.style.marginTop="",n=s;o.innerHTML=`<p>Password yang anda masukkan salah tunggu ${n} detik.</p>`,n-=1},1e3)}}),"change keyup paste".split(" ").forEach(e=>{r.addEventListener(e,e=>{const n=e.currentTarget,t=n.nextElementSibling.querySelector(".icon-lock");0==n.value?t.classList.remove("next"):t.classList.add("next")})})};
/*]]>*/</script>

Sampai sini selesai silahkan simpan template kalian. Kali ini cara memanggil nya, ada beberapa cara contoh sebagai berikut.

pWa('password', Detik); //Jika password semua halaman sama.
pWa('password', Detik, 'postName'); //Jika password berbeda untuk setiap halaman gunakan ini.
Penjelasan seperti yang di tandai.

Cara Pasang Manual

Kalian bisa menggunakan ini jika ingin setiap postingan memiliki password berbeda. Pasang code berikut di awal postingan.

<script>pWa('password', 3, 'post1')</script>

Cara Pasang Otomatis

Jika ingin password di semua halaman sama bisa gunakan ini. Silahkan edit template kalian, terdapat dua cara silahkan pilih salah satu.

Cara pertama pasang code berikut di bawah tag <body>. Cara ini akan menampilkan password di semua postingan.

<b:if cond='data:view.isPost'>
  <script>pWa('password', 3);</script>
</b:if>

Cara kedua pasang code berikut di atas tag <data:post.body/>. Ini akan menampilkan password di postingan dengan label tertentu.

<b:loop index='i' values='data:post.labels' var='label'>
  <b:if cond='data:label.name in "labelPost"'>
   <script>pWa('password', 3);</script>
  </b:if>
</b:loop>
Yang di tandai kalian ganti dengan nama label post yang di beri password.

Yaps mungkin sampai di sini saja, jika ada yang ingin di tanyakan silahkan tambahkan komentar di bawah.

4 komentar

Blogger Disqus
  1. Min buat tutorial buat slider kek di web ini : https://flamescans.org/

    BalasHapus
  2. Menarik nih, tiap malem kepoin web ini akhirnya Update juga, btw min mungkin bisa jadi bahan pertimbangan, buat preloader yang unik seperti ini:

    https://nuxscans.blogspot.com/2021/09/spare-me-great-lord-chapter-152.html

    Preloadernya cuma aktif di post episode aja. Makasih sebelumnya 🙏

    BalasHapus
    Balasan
    1. Gw malah lebih suka yang Float Next-Prev dari Nux itu, kali aja cocok buat tmplt sS v2 :v

      Hapus
    2. cube loader nama nya. dia ngambil di sini.
      https://codepen.io/abdelali_Limbo/pen/WxyxOd

      Hapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
  • Gunakan Shortcode berikut untuk menambahkan gambar atau Video. Contoh:
    <i rel="spoiler image">url_gambar</i>
    <i rel="spoiler">spoiler_text</i>
    <i rel="iframe">url_embed</i>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!