Cara Membuat Tombol Switch Dark Mode Keren di Blogger [2021]

Cara-membuat-fitur-dark-mode-night-mode-di-blogger

Local-Hunter.com - Dark Mode merupakan salah satu fitur yang wajib dimiliki dengan tujuan untuk memanjakan pengunjung dengan tampilan yang tidak terlalu terang bagi penglihatan mata. Dengan tampilan gelap pengunjung akan betah berlama-lama sembari membaca artikel tanpa adanya keluhan silau.

Tombol switch dark mode diatur dan dibuat melalui CSS dan dilengkapi dengan bahasa pemrograman JavaScript agar fitur tersebut berjalan sebagaimana mestinya. Sebagian besar pemilik situs blogger sudah menerapkan fitur dark mode di halaman websitenya dan tinggal diaktifkan saja. Namun, bagi yang ingin tahu cara membuat tampilan dark mode di blogger dengan mudah, LocalHunter bersedia membantu kamu untuk memandu cara pemasangan fitur ini di blog dengan mudah dan cepat.

Fitur dark mode di blog akan membuat tampilan blog kamu menjadi keren dan nyaman untuk dikunjungi siapapun apalagi template blog yang digunakan sudah mendukung responsive, yang berarti semua perangkat dapat melakukan load dengan lancar dan cepat. Script fitur night mode ini sudah dilengkapi dengan adanya penambahan Cookie-Set, artinya ketika pengunjung mengunjungi halaman ulang maka tampilan night mode tidak akan berubah.

Akan ada opsional untuk mengembalikan tampilan halaman blog dari mode gelap ke mode terang tanpa perlu melakukan perubahan apapun di script ini. Jadi, bagi kamu yang tidak bisa ngoding tidak perlu berkecil hati sebab semua script yang sudah disediakan bisa langsung dipakai. Namun, jika ingin melakukan editing pada barisan kode itu lebih bagus.

Cara Membuat dan Memasang Night Mode di Blogger

1. Masuk ke akun Blogger. Lalu, pilih Tema > Edit HTML.

2. Tambahkan script berikut sebelum tag </body>

Night Mode

3. Selanjutnya tambahkan kode CSS dan letakkan sebelum tag </head> atau ]]></b:skin>. Cara cepatnya tekan tombol CTRL+F.



4. Silahkan atur penempatan tombol switch night mode atau dark modenya dengan mengubah kode berikut ini

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

5. Bila sudah selesai semua silahkan Simpan Tema dan lihat hasilnya.

Opsional Fitur Dark Mode Style #2

Bagi kamu yang menggunakan template mirip seperti LocalHunter dan ingin menyamakan warna pada tampilan dark mode tentu bisa dilakukan dengan mudah. Tidak perlu melakukan editing yang banyak dan tidak perlu keahlian khusus. Mari lihat selengkapnya.

1. Copy seluruh kode dan pastekan kode sebelum ]]</b:skin>

/* Dark Mode */
.dark-mode, .dark-mode .Blog .post-toc, .dark-mode .Blog .post-tabs .post-tabsHeader > *:after{background-color:#202442}
.dark-mode .header .navicon > * svg, .dark-mode .header .navicon.search > *, .dark-mode .header .searchbar .search-button svg, .dark-mode .Blog article .post-info .post-comment > * svg, .dark-mode .FeaturedPost article .item-comment > * svg, .dark-mode .PopularPosts article .item-comment > * svg, .dark-mode .Label li a svg, .dark-mode .Label .label-show label svg, .dark-mode .Profile .individual .profile-media li svg, .dark-mode .Blog .author-posts .author-link li svg, .dark-mode .Blog .post-tocHeader label svg.drop
{fill:#989b9f}
.dark-mode .Blog article .post-info .post-comment > * svg.line{stroke:#989b9f}
.dark-mode, .dark-mode .Blog .blog-pager, .dark-mode .Blog .post-pagenav, .dark-mode .Label .widget-content, .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6, .dark-mode .FollowByEmail .title, .dark-mode .Profile .individual .profile-link, .dark-mode .Profile .team .team-member a .profile-name, .dark-mode .Profile .team .more-member > span, .dark-mode .Blog .sitemaps .judul, .dark-mode .Blog .sitemaps li a, .dark-mode .Blog .daftar-isi .isi-judul, .dark-mode .Blog .spoiler .spoiler-judul, .dark-mode .Blog .daftar-isi .isi-content a, .dark-mode .Blog .accordion .accor-title .title, .dark-mode .Blog .author-posts .author-name, .dark-mode .Blog .related-posts li .item-title, .dark-mode .Blog .post-tocHeader label, .dark-mode .Blog .post-tocContent a
{color:#fefefe}
.dark-mode .header, .dark-mode .Blog article, .dark-mode .Blog .blog-pager .no-post, .dark-mode .Blog .post-pagenav .current, .dark-mode .FeaturedPost article, .dark-mode .Profile .individual, .dark-mode .Profile .individual .profile-media, .dark-mode #nav-widget, .dark-mode #nav-widget:before, .dark-mode .navigation-menu .sosmed, .dark-mode .Blog .author-posts, .dark-mode .Blog .author-posts .author-link, .dark-mode .Blog .related-posts li, .dark-mode .Blog .comments ol > li
{background-color:#282d54}
.dark-mode .header .searchbar input[type=text], .dark-mode .Blog article .post-thumbnail a, .dark-mode .FeaturedPost article .item-thumbnail a, .dark-mode .PopularPosts article .item-thumbnail a, .dark-mode .Profile .individual .profile-image, .dark-mode .Label .cloud-label .label-show label, .dark-mode .Label .cloud-label a, .dark-mode .widget input[type=email], .dark-mode .widget input[type=text], .dark-mode .widget textarea, .dark-mode .Blog .related-posts li .item-thumbnail > *, .dark-mode .Blog .comments ol > li > .comment-replies
{background-color:#252526}
.dark-mode .header .navicon .nav i, .dark-mode .Blog .accordion .accor-title .accor-icon:before, .dark-mode .Blog .accordion .accor-title .accor-icon:after
{background-color:#fefefe}
.dark-mode .header, .dark-mode .navigation-menu, .dark-mode .navigation-mobile, .dark-mode .navigation-menu .sosmed ul svg
{color:#fefefe;fill:#fefefe}
.dark-mode .header .navicon .dark-switch, .dark-mode .widget-title a, .dark-mode .FeaturedPost article .item-header, .dark-mode .PopularPosts article .item-header, .dark-mode .PopularPosts article.no-thumbnail:before, .dark-mode .Profile .individual .profile-text, .dark-mode .Label .label-count, .dark-mode .Label .cloud-label a, .dark-mode .Label .label-show label, .dark-mode .FollowByEmail .follow-by-email-text, .dark-mode .button.outline, .dark-mode .Blog .sitemaps li:before, .dark-mode .Blog .sitemaps li a:after, .dark-mode .Blog blockquote.style-1:before, .dark-mode .Blog article .post-info, .dark-mode .Blog .blog-pager .no-post, .dark-mode .Blog article.post .post-info .post-author, .dark-mode .Blog .daftar-isi .isi-judul:after, .dark-mode .Blog .daftar-isi .isi-content ol li:before, .dark-mode .Blog .post-tocContent ol li:before, .dark-mode .Blog .author-posts .author-desc, .dark-mode .Blog article .separate:before, .dark-mode .error-container p, .dark-mode .footbar, .dark-mode .Blog .comments .comment-header .datetime, .dark-mode .Blog .comments ol > li > .comment-actions a, .dark-mode .Blog .comments .comment-reply a, .dark-mode .Blog .comments .comment-thread .thread-toggle
{color:#989b9f}
.dark-mode .Blog .comments ol > li > .comment-actions svg, .dark-mode .Blog .comments .comment-reply svg, .dark-mode .Blog .comments .comment-thread .thread-toggle svg
{fill:none;stroke:#989b9f}
.dark-mode .button{color:#fefefe}
.dark-mode .button.outline{border-color:#fefefe}
.dark-mode .FollowByEmail, .dark-mode .navigation-menu > li.break:after, .dark-mode .Blog .sitemaps .sitemap-box, .dark-mode .Blog blockquote.style-1, .dark-mode .Blog article.post, .dark-mode .Blog table td, .dark-mode .Blog table th, .dark-mode .Blog .daftar-isi, .dark-mode .Blog .accordion li, .dark-mode .Blog .spoiler, .dark-mode .Blog .download-info, .dark-mode .Blog .comments li li:not(:last-child), .dark-mode .Blog .post-tabs .post-tabsHeader, .dark-mode .Blog .post-tabs .post-tabsHeader > *
{border-color:rgba(255,255,255,.1)}
.dark-mode .Blog table tr:nth-child(2n+1) td, .dark-mode .Blog pre{background-color:rgba(0,0,0,.1)}
.dark-mode .Blog table.tr-caption-container .tr-caption, .dark-mode .Blog article.post{background-color:transparent}


2. Kemudian ubah kode JavaScript dan letakkan sebelum tag </body>


Nah itulah cara membuat dan memasang fitur dark mode di template blogger dengan mudah. Semoga bermanfaat.


Posting Komentar

0 Komentar