-->

Cara Membuat Fitur Night Mode (Dark Mode) Keren di Blog

jalanpintas - Bila kamu cermati, saat ini banyak blogger yang memasang fitur night mode di tampilan blognya. Fitur Night Mode ataupun juga biasa diucap Dark Mode berperan untuk membuat tampilan web yang cerah supaya dapat bergeser jadi hitam semacam malam yang teduh serta tenang. Tampilan hitam ini memanglah membuat web terus menjadi tampak keren serta menarik sehingga terdapat sensasi berbeda disaat web dipasangi fitur ini.



Tidak hanya membuat cantik tampilan web, fitur ini juga berperan buat mengirit pemakaian baterai untuk pengunjung yang mengakses web kamu via smartphone. Tidak cuma itu saja, dengan tersedianya fitur ini, pengunjung juga bisa memakainya supaya mata tidak sakit disaat membaca artikel- artikel di web kamu. Pengunjung tinggal mengklik tombol fitur dark modenya di tempat yang disediakan( umumnya di bagian atas) buat bergeser memakai mode malam ini. Intinya, tampilan web jadi terus menjadi keren serta disukai pengunjung bila dipasangi fitur night mode ini.


Tetapi saat sebelum memasang fitur dark mode ini, ada baiknya sesuaikan dahulu pemakaian corak dasar pada template web kamu. Upayakan tema web kamu mempunyai corak dasar cerah supaya hasilnya lebih optimal. Aku pula memasangnya di web ini, coba kamu klik pada ikon bulan sabit di kanan atas header web ini. Keren bukan?. Silahkan coba pasang fitur ini di web kamu supaya terus menjadi keren serta menawan. Buat teknik pemasangannya, silahkan ikuti tutorial di bawah ini.

Memasang Fitur Dark Mode Keren di Blog

1. Buka account blogger kamu.

2. Seleksi menu tema serta klik edit html.

3. Cari kode]]

</ b: skin

ataupun kode</ style

setelah itu letakkan kode CSS berikut ini di atasnya.



/* 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. Buat memasang tombol dark modenya, cari kode</ header

serta letakkan kode berikut ini di atasnya.

<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>

5. Terakhir cari kode</ body

serta letakkan kode berikut ini di atasnya.

<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>

Sebagai catatan, tiap template web mempunyai kode widget/ element yang berbeda sehingga kamu dapat sesuaikan lagi dengan mengedit kembali ataupun meningkatkan pengaturannya pada kode CSS di atas( Misal:. Night. RandomPost background:.. dst). Pastikan juga di web kamu telah terpasang kode jQuery supaya fitur tersebut bisa berperan dengan baik. Bila belum terdapat, silahkan salin kode berikut ini serta letakkan di atas kode</ head

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

6. Simpan kembali template kamu serta amati hasilnya.


Demikianlah metode membuat Fitur Night Mode( Dark Fashion) keren di Web. Mudah- mudahan berguna. 

LihatTutupKomentar