Membuat Read Mode (Screen shader)

Screen shader atau pelindung layar yang memiliki fungsi untuk melindungi mata kalian dari silau/kontras cahaya yang terlalu terang dari blog.

fitur ini terbilang sama dengan fitur night mode/mode gelap. Karena, sama-sama berfungsi meredupkan kontras cahaya pada tampilan blog, walaupun berbeda sedikit. Ok untuk pratinjau/demo kalian bisa cek pada tombol dibawah ini :

Demo

Cara Membuat Read Mode (Screen shader)

1. Sepertinya biasa silahkan, Buka Blogger > tema > Edit html, kemudian simpan HTML berikut diatas </body>
   

   <div id='readmode'></div>

   
   
2. Kemudian letakkan Javascript berikut diatasnya
   

   <script defer='defer' type='text/javascript'>//<![CDATA[
   $(document).ready(function(){
     $(".readmodec").click(function(){
       $("#readmode").toggleClass("active");
     });
   });
   //]]></script>

   
   
3. Langkah selanjutnya, menambahkan CSS kedalam <b:skin>...</b:skin> atau <style>...</style>
   

   /* CSS Screen shader - Arlethdesign
     =============================== */
   .readmodec{border-radius:3px;border:none;padding:5px 8px;color:#FFF;background:#444;outline:0;cursor:pointer;}
   #readmode.active{z-index:2147483647;margin:0;border-radius:0;padding:0;background:#111111!important;pointer-events:none;position:fixed;top:-10%;right:-10%;width:120%;height:120%;opacity:0.3600;mix-blend-mode:multiply;display:block}
   

   
   
4. Kemudian buat tombol untuk mengaktifkan fiturnya menggunakan HTML berikut, kalian bisa simpan di post-header atau tempat yang kalian inginkan
   

   <button class='readmodec'>Read Mode!!</button>

5.