Membuat postingan berpassword pada label tertentu

Postingan berpassword bukan merupakan fitur dari blogger. Namun, sekarang sudah ada cara untuk membuat dan memasangnya di blogger. Yaitu dengan javascript btoa (digunakan untuk menyembunyikan teks) dan atob (digunakan untuk mengembalikan teks yang tersembunyi). Untuk mengetahui lebih jauh tentang btoa dan atob silahkan anda cari sendiri di google. Sebenarnya saya tidak begitu mahir dalam hal javascript, ini hanya saya kembangkan dari sini.

Saya memanfaatkan fitur terbaru dari blogger. Yaitu mengenai Lambda Expressions. Saya pelajari dari Blogger Buzz dan Blogger Ever. Fitur ini sama halnya seperti tag kondisional, tetapi kondisonal pada halaman label tertentu. Markup dasarnya seperti ini:

<b:if cond=’data:post.labels any (label=> label.name == “Flower”)’>
  <img src=’/img/flower.jpg’ /> <!-- GAMBAR AKAN MUNCUL PADA POST BERLABEL "Flower" -->
</b:if>

Kekurangan kondisional tersebut hanya berlaku di dalam includable post, labels dan comments saja. Ini juga saya padukan dengan tag kondisional terbaru yang sudah dapat diringkas menjadi satu tag (dengan dua kondisi) saja, tidak bertumpuk. Kalian bisa mempelajarinya di sini.

Jadi, cara kerjanya adalah memunculkan markup baru yang berfungsi untuk membungkus elemen yang akan disembunyikan dengan tag kondisional label tertentu. Elemen yang nantinya dibungkus adalah elemen article. Markup tersebut hanya akan muncul pada postingan berlabel tertentu.

Kerangka yang nanti dipasang seperti ini:

<b:includable id='post' var='post'>
 <b:if cond='data:post.labels any (l =&gt; l.name == &quot;protect&quot;) and data:blog.pageType == &quot;item&quot;'>
  &lt;div id=&quot;protect-body&quot; class=&quot;body&quot;&gt;
 </b:if>

 <article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <!-- YOUR ARTICLE -->
 </article>

 <b:if cond='data:post.labels any (l =&gt; l.name == &quot;protect&quot;) and data:blog.pageType == &quot;item&quot;'>
  &lt;/div&gt;
  <div class='overlay' id='protect-overlay' oncontextmenu='return false;'>
   <form action='#'>
    <input name='answer' placeholder='Password?' type='password'/>
    <button type='submit'>Open</button>
   </form>
  </div>
 </b:if>
</b:includable>

Silahkan cari di dalam template kalian dan pasang sesuai kerangka diatas. Warna kuning adalah markup yg harus ditambahkan. Sedangkan yang bergaris bawah adalah label yang dikenakan password.

Kemudian letakan javascript berikut tepat diatas </body>:

<script type='text/javascript'>
    //<![CDATA[
    (function() {
        var o = document.getElementById('protect-overlay');
        o.getElementsByTagName('form')[0].onsubmit = function() {
            if (this.answer.value === atob('aSBsb3ZlIHlvdQ==')) {
                o.style.display = "none";
            } else {
                alert('Wrong password!');
            }
            return false;
        };
    })();
    //]]>
</script>

Silahkan ganti yang berwarna kuning dengan hasil password yang diketik dibawah:

Pasang CSS diatas ]]></b:skin>:

.overlay {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background-color:black;
  color:black;
  padding:10% 0;
  text-align:center;
}

Selesai. Pada overlay-nya sudah saya beri oncontextmenu="return false;" sebagai trik untuk mengatasi klik kanan (inspect element).

Membuat postingan berpassword pada label tertentuPreview postingan berpassword pada label tertentu

Semoga bermanfaat. Terimakasih.

2 comments:

Read the post first!