Cara Membuat Tombol Night Mode (Dark Mode) Di Blogger

Hallo sobat blogger bagaimana kabarnya semoga sehat selalu dan di lancarkan rezeki nya amiin.

Di kesempatan kali ini admin akan memberikan tutorial cara membuat tombol dark mode di blog.

Apasih min fungsinya memasang dark mode di blog kita?, singkat saja menurut admin menambahkan fitur dark mode di blog hanya untuk mempercantik tampilan blog kita saja, kalian tau kan di beberapa aplikasi atau situs web banyak yang menggunakan fitur dark mode ini contohnya seperti, aplikasi chrome, facebook, whatsapp, instagram, telegram, dan yang lainnya.

Nah keliatannya cukup cantik bukan untuk aplikasi yang mempunyai fitur dark mode tersebut.

Oke tanpa basa-basi di sini langsung saja admin berikan langkah-langkah membuat tombol dark mode di blog, simak tutorialnya di bawah ini.

Cara Membuat Tombol Dark Mode Di Blog

1. Login terlebih dahulu ke akun blogger kalian masing-masing.

2. Setelah login lalu masuk ke mode tema dan klik edit html.

3. Lalu kalian cari kode ]]></b:skin> atau kode </style> untuk mempermudah menemukan nya klik Ctrl+F lalu cari kode tersebut, setelah kalian menemukan kode tersebut letakan kode CSS di bawah ini tepat di atas kode ]]></b:skin>.

/* Dark Mode */ /* Button Dark Mode */ .modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:45px;top: 0;z-index:999;} .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; } /* Warna Dark Mode */ /* Warna Night Mode */ .Night #wrapper {background: #292e38;} .Night #HTML3 {background:#1d2129;} .Night #footer-widget-container {background:#1d2129;} .Night .share-this-pleaseeeee {background:#292e38;} .Night .related-post h4{background:#292e38;} .Night #label-info-th {background:#1d2129;} .Night body {background:#1d2129;} .Night .post-body {color:#cccccc} .Night #baca-juga h2 {color:#cccccc;background:#1d2129} .Night .label-info-th a {color:#cccccc;background:#3d4658} .Night li.recent-posts a{color:#cccccc} .Night .recent-posts-title h2{color:#cccccc} .Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc} .Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129} .Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129} .Night .post-info {color:#cccccc} .Night {background:#1d2129;} .Night h2.post-title a {color:#9e9e9e;} .Night h2.post-title a:hover {color:#f17f43} .Night .post-title {color:#1e90ff} .Night ul.nav-social {color:#1d2129} .Night .post-snippet {color:#cccccc} .Night #ignielNewsletter {background:#292e38;} .Night #Label1{background:#292e38;} .Night .post{background:#292e38;border-bottom-color: #252a33;} .Night .PopularPosts h2{background:#343944;} .Night .latest-post-title h2{background:#292e38;border-bottom-color: #313640;} .Night .newspaptext{color:#9e9e9e} .Night .PopularPosts h2 span{color:#9e9e9e} .Night .list-label-widget-content ul li {border-bottom-color: #313640;} .Night .img-thumbnail img {background: #252931 linear-gradient(to right, rgba(255, 255, 255, 0) 5%, rgb(49, 54, 64) 20%, rgba(255, 255, 255, 0) 30%);background-size: 800px 104px;} .Night #ignielNewsletter .medsos__ {border-top-color: #313640;} .Night #footer-container{background:#12161f;} .Night #footer-navmenu{background:#171b25;} .Night .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;} .Night .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;} .Night .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;} .Night .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;} .Night .comments h3 {color:#b7b7b7;border-bottom-color: #313640;} .Night .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;} .Night .btnsocialshare {background:#383c44;} .Night .label-line::before{background: #1d2129;} .Night .label-line-c::before {background: #333740;} .Night a.showcontent:hover {background: #373a42;} .Night a.showcontent{background: #292e38} .Night #ignielNewsletter input{background: #272b33;border-color:#2b303a;} .Night .comments .comments-content .comment-content {color:#ffffff} .Night div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;} .Night .related-post-style-3 .related-post-item-title {color: #bbb;} .Night #baca-juga ul {border: 2px solid #333740;} .Night #baca-juga h2 {border: 2px solid #292e38;} .Night #comments a.hiddencontent {background: #424854;} .Night .comments .comments-content .comment-thread ol {background: #292e38;} .Night .comments .comments-content .inline-thread {background: #292e38;}
  

4. Lihat Gambar di bawah ini untuk lebih jelasnya.

Paste Di Atas Kode ]]></b:skin>
5. Jika sudah selanjutnya kalian cari kode </header> pastekan kode di bawah ini tepat di atas kode </header>.

<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='M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z'/></svg> </label> </div>

6. Lihat gambar di bawah ini agar semakin jelas.

Paste Di Atas Kode </header>

7. Dan yang terakhir cari kode </body> biasanya terletak di bagian paling bawah setelah ketemu pastekan kode di bawah ini tepat di atas kode </body>.

<script type='text/javascript'>

//<![CDATA[

/* Dark Mode */

$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});

//]]>

</script>

8. Lihat gambar di bawah ini untuk penempatan kodenya.

Paste Di Atas Kode </body>
9. Setelah itu sobat klik simpan, dan selesai selamat blog sobat sudah memiliki fitur dark mode.

Note: Jika dark mode nya tidak berfungsi cek terlebih dahulu apakah template yang sobat gunakan sudah ada script jQuery apa belum, jika belum ada silahkan pasang kan script jQuery di bawah ini tepat di atas kode </head>.

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

Demikian untuk cara membuat tombol dark mode di blog, terimakasih sudah berkunjung ke blog saya, saya do’a kan semoga kita semua sukses dalam dunia blogging khususnya bagi para blogger yang masih pemula seperti saya ini hhe:v

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *