Artikel menarikCara Membuat Fitur Night Mode (Dark Mode) Keren di Blog - Black Exotic - Hallo friend Black Exotic, Pada kesempatan ini, friend akan membaca Artikel yang dengan judul Artikel menarikCara Membuat Fitur Night Mode (Dark Mode) Keren di Blog - Black Exotic, tim kami telah mengemas artikel ini dengan baik untuk anda simak dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Artikel menarikCara Membuat Fitur Night Mode (Dark Mode) Keren di Blog - Black Exotic
link : Artikel menarikCara Membuat Fitur Night Mode (Dark Mode) Keren di Blog - Black Exotic

Artikel menarikCara Membuat Fitur Night Mode (Dark Mode) Keren di Blog - Black Exotic

Jika anda cermati, kini banyak blogger yang memasang fitur night mode di tampilan blognya. Fitur Night Mode atau juga biasa disebut Dark Mode berfungsi untuk membuat tampilan blog yang terang agar bisa beralih menjadi gelap seperti malam yang teduh dan tenang. Tampilan gelap ini memang membuat blog semakin terlihat keren dan cantik sehingga ada sensasi berbeda saat blog dipasangi fitur ini. 

Selain mempercantik tampilan blog, fitur ini juga berfungsi untuk menghemat penggunaan baterai bagi pengunjung yang mengakses blog anda via smartphone. Tidak hanya itu saja, dengan tersedianya fitur ini, pengunjung juga dapat menggunakannya agar mata tidak sakit saat membaca artikel-artikel di blog anda. Pengunjung tinggal mengklik tombol fitur dark modenya di tempat yang disediakan (biasanya di bagian atas) untuk beralih menggunakan mode malam ini. Intinya, tampilan blog jadi semakin keren dan disukai pengunjung jika dipasangi fitur night mode ini. 

Namun sebelum memasang fitur dark mode ini, ada baiknya sesuaikan dulu penggunaan warna dasar pada template blog anda. Usahakan tema blog anda memiliki warna dasar terang agar hasilnya lebih maksimal. Saya juga memasangnya di blog ini, coba anda klik pada ikon bulan sabit di kanan atas header blog ini. Keren bukan?. Silahkan coba pasang fitur ini di blog anda agar semakin keren dan cantik. Untuk cara pemasangannya, silahkan simak tutorial di bawah ini. 

Memasang Fitur Dark Mode Keren di Blog

1. Buka akun blogger anda. 

2. Pilih menu tema dan klik edit html. 

3. Cari kode ]]></b:skin> atau kode </style> kemudian 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. Untuk memasang tombol dark modenya, cari kode </header> dan 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> dan 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, setiap template blog memiliki kode widget/ element yang berbeda sehingga anda bisa sesuaikan lagi dengan mengedit kembali atau menambahkan pengaturannya pada kode CSS di atas (Misal: .Night .RandomPost {background: ..dst). Pastikan juga di blog anda sudah terpasang kode jQuery agar fitur tersebut dapat berfungsi dengan baik. Jika belum ada, silahkan salin kode berikut ini dan letakkan di atas kode </head>

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

6. Simpan kembali template anda dan lihat hasilnya. 

Demikianlah cara membuat Fitur Night Mode (Dark Mode) keren di Blog. Semoga bermanfaat. Sumber

Demikianlah Artikel Artikel menarikCara Membuat Fitur Night Mode (Dark Mode) Keren di Blog - Black Exotic

Cukup sampai disini artikel Artikel menarikCara Membuat Fitur Night Mode (Dark Mode) Keren di Blog - Black Exotic kali ini, semoga dapat memberi manfaat untuk friend semua. baiklah, jangan lupa membaca artikel lainnya.

Artikel yang sedang anda baca Artikel menarikCara Membuat Fitur Night Mode (Dark Mode) Keren di Blog - Black Exotic dengan alamat link https://blackexotic.blogspot.com/2020/09/artikel-menarikcara-membuat-fitur-night.html

Share this post