BlogsBloggingTutorial

Cara Membuat Dark Mode di Blogger Tombol Bulan Matahari

Cara Membuat Dark Mode di Blogger Tombol Bulan Matahari – Kalian pernah kan mengunjungi sebuah blog, baik itu blogspot atau wordpress parti tentu nya juga pernah melihat ada tombol bulan dan mata hari gitu atau gambar icon lain nya, banyak lah pokok nya.

Dan ketika tombol nya di pencet tiba-tiba tampilan blog itu berubah menjadi gelap dan jika di pencet lagi maka tampilan blog nya berubah jadi terang kembali.

Nah, transisis antara mode template blog gelap dan terang itulah yang di nama kan dark mode.

Buat kalian yang blogger pasti sudah pada tau lah, di kebanyakan blog sekarang sudah banyak menyediakan tombol dark mode di blog mereka.

Jauh berbeda dengan blog dulu hanya blog tertentu saja yang menyediakan tombol dark mode ini.

Apa sih fungsi tombol dark mode

Sedikit informasi aja nih ya buat kalian yang ngak tau apa fungsi dark itu, sebenar nya fungsi utama nya cuma buat kenyamana mata aja.

Contoh nih ya, jika blog kalian ada pengunjung yang ingin membaca artikel blog kalian di malam hari, sambil rebahan di kasur, entah itu membaca artikel kalian bermanfaat atau tidak gua ngak tau juga.

Nah kalau dia membaca dengan tampilan cahaya blog kalian itu terang tentu nya akan membuat mata yang membaca artikel menjadi tidak nyaman.

Dengan ada nya tombol dark mode, sudah pastinya yang membaca artikel ngak jelas di blog kalian di baca setidak nya tidak membuat mata perih.

Sudah tau kan apa fungsi dark mode di blog kalia

Nah sekarang saat nya untuk membuat tombol dark mode untuk blog kalian yang tidak ada satu pun artikel yang bermanfaat nya sama sekali, seperti blog indolinkz ini.

Cara Membuat Dark Mode di Blogger

Loe pada udah punya blog kan kalau tidak punya blog buat apa kalian baca artikel ini, aneh kali anda ini.

Buka www.blogger.com Pencet tulisan Tema Lanjutkan dengan klik tulisan edit HTML

Cari kode seperti ini

</head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

Kalau udah ketemu loe pada paste kan saja kode dark mode di bawah ini tepat persis di atas kode

</head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

Dark Mode Javascript

<div class=’modedark’><input class=’check’ id=’modedark’ title=’Mode Dark’ type=’checkbox’/> <label class=’iconmode’ for=’modedark’> <svg class=’openmode’ viewBox=’0 0 24 24′><path d=’M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z’/></svg> <svg class=’closemode’ viewBox=’0 0 24 24′><path d=’M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z’/></svg> </label> </div>

Kode ini kudu wajib ada di blog kalian, kalau di blog kalian belum ada java script ini kalian pasang tepat di atas kode yang di atas

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

Oke selanjut nya cari lagi kode yang sama persis seperti kode yang ini </body> atau &lt;!–</body> Harus sama ya, tidak boleh tidak sama ntar dark mode nya ngak jadi yang terjadi malah blog kalain akan menjadi error dan tidak bisa di save template nya. Lanjutka paste kode dark mode javascript ini di atas </body> atau &lt;!–</body>

<script type='text/javascript'> //<![CDATA[ /* Night Mode/Dark Mode Feature - By TwistBlogg.com */ /* Keep the Credit Intact */ $(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode",$(".section-center").css("display","block")):($("body").toggleClass("nightmode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("nightmode")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)}); //]]> </script>

Selanjutpasang deh code css ini, terserah kalian mau pasang dimana yang penting harus di antara <head> dan </head> tau kan yang gue maksud, kalau kalian ngak tau cari aja di google sebab disini tidak akan di bahas, ntar artikel nya ke panjangan lagi.

Dark Mode CSS

<style type="text/css"> /*---- Night Mode/Dark Mode Feature - By TwistBlogg.com ----*/ .modedark { background: linear-gradient(to right, #eb3349 40%, #f45c43); /*Background color of icon*/ float: left; position: fixed; bottom: 0; /*Change this for position*/ z-index: 999; opacity:0.7 /*Opacity Degree Of Icon*/ } .modedark svg { width: 24px; height: 24px; vertical-align: -5px; background-repeat: no-repeat!important; content: '' } .modedark svg path { fill: #fff } .modedark .check:checked~.NavMenu { opacity: 1; visibility: visible; top: 45px; min-width: 200px; transition: all .3s ease; z-index: 2 } .iconmode { cursor: pointer; display: block; padding: 8px; background-position: center; transition: all .5s linear } .iconmode:hover { border-radius: 100px; background: rgba(0, 0, 0, .2) radial-gradient(circle, transparent 2%, rgba(0, 0, 0, .2) 2%) center/15000% } .check { display: none } .modedark .iconmode .openmode { display: block } .modedark .iconmode .closemode { display: none } .modedark .check:checked~.iconmode .openmode { display: none } .modedark .check:checked~.iconmode .closemode { display: block } /*----- Start adding Elements From here -----*/ // Below are some samples only // Start with .nightmode followed by element(class or id) {their_properties} .nightmode{background:#15202B;color:rgba(255,255,255,.7)} .nightmode #outer-wrapper,.nightmode #sidebar-wrapper{background:#323232;color:#fff!important} /* --- Add More Elements --- */ </style>

Agar cara membuat dark mode di blogger kalian 100% berhasi kalian harus mengetahui id elemen atau kelas di dalam HTML template kalian. .nightmode (element class atau id disini) {CSS Properties} Contoh gue pengen dark mode blog berfungsi di bagian menu,header,sidebar,body dan sebagai nya maka gw harus cari element class dan id di yang telah gue sebutkan barusan

Contoh dark mode blog ini

Cara Membuat Dark Mode di Blogger.nightmode .header-menu { background: #2B2B2B; color: #fff!important } .nightmode .header-menu a, .nightmode .header-menu span { color: #EEEEEE!important } .nightmode #outer-wrapper, .nightmode #sidebar-wrapper { background: #323232; color: #fff!important } .nightmode #PopularPosts1, .nightmode #Label3, .nightmode #Label1 { background: #323232; } .nightmode #PopularPosts1 a, .nightmode #PopularPosts1 .title, .nightmode #Label1 a, .nightmode #Label3 a, .nightmode #Label1 .title, .nightmode #Label3 .title { color: #eeeeee!important } .nightmode .post-body h1, .nightmode .post-body h2, .nightmode .post-body h3, .nightmode .post-body h4, .nightmode .post-title, .nightmode .index-post .post-info &gt; h2 &gt; a { color: #fff!important }

Jika kalian mau pakai css ini gak papa, mana tau cocok di blog kalian, ya udah cukup sekian informasi cara membuat dark mode di blogger yang ngak berfaedah ini, terimakasi sudah mampir ke blog ini.

Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

Adblock Detected

Please consider supporting us by disabling your ad blocker