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 :


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>

Sekian untuk artikel kali ini, dan ikuti terus blog ini agar dapat tutorial bermanfaat selanjutnya, terima kasih.

Related Post
Comment Post