Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Cara membuat mode dark dengan Icon Lampu

views

Hello sobat IcloudZer apakah blog kamu mempunyai fitur mode gelap, jika belum! Nah berikut kami akan memberikan informasi seputar mode Gelap atau dark mode untuk dipakai dalam sebuah template

Pengertian mode dark

Mode dark atau mode gelap adalah sebuah tampilan dalam bentuk icon didalam sebuah template, dan biasanya mode gelap berada ada header blog tepatnya disebelah atau disamping pada tampilan blog

Info: Bisa juga berada pada tempat yang lainnya sesuai keinginan para pemilik situs blog

Fungsi mode dark

Dengan mode dark didalam sebuah template membuat blog kamu semakin keren dan menambah kenyamanan untuk pengguna kamu

Bagaimana tidak ๐Ÿค” pengguna bisa gelap gelapan dengan fitur mode dark selain itu pengguna juga bisa lebih nyaman untuk membaca jika blognya memiliki tampilan mode gelap untuk membuat mata pengguna yang membaca tidak kelelahan

Icon Mode Dark

Oke icon mode dark yang saya bagikan disini berbentuk seperti lampu, jika pada tampilan Defeult nya (terang) akan menampilkan icon Lampu

Dan untuk Tampilan gelapnya memiliki Tampilan seperti contoh berikut ini

Info: Bagaimana sobat sudah tertarik ingin membuatnya ๐Ÿค“

Cara penerapan

Dibawah ini kami akan memberikan informasi mengenai bagaimana cara membuat mode Dark atau mode gelap dalam Tampilan yang keren ok ๐Ÿ‘Œ

Nah untuk memulai kamu bisa simpan kode Script dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#rah-darkMode").on("click",function(){"darkMode"!=localStorage.toggled?($("body").toggleClass("darkMode",!0),localStorage.toggled="darkMode",$(".section-center").css("display","block")):($("body").toggleClass("darkMode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("darkMode")?$("#rah-darkMode").prop("checked",!0):$("#rah-darkMode").prop("checked",!1)});//]]>
</script>

Pasang kode CSS

Langkah selanjutnya kamu bisa memasang kode CSS berikut ini untuk diletakkan didalam Template kamu, tepatnya diatas kode ]]</b;skin> atau sebelum kode ]]</b;skin>

/* Css Button Dark Mode by Icloudice */
.rah-darkMode{display:inline-block;float: right;margin-top: 3px;position:absolute;right:45px;top: 0;z-index:999;}
.rah-darkMode svg{width:24px;height:24px;vertical-align: -5px;background-repeat: no-repeat !important;content: '';}
.rah-darkMode svg path{fill:#fff;}.rah-darkMode .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;}
.rah-darkMode .iconmode .openmode{display:block;}.rah-darkMode .iconmode .closemode{display:none;}.rah-darkMode .check:checked ~ .iconmode .openmode{display:none;}.rah-darkMode .check:checked ~ .iconmode .closemode{display:block;}
/* Warna Dark Mode by Icloudice */ .darkMode #wrapper {background: #292e38;}.darkMode #HTML3 {background:#1d2129;}.darkMode #footer-widget-container {background:#1d2129;}.darkMode .share-this-pleaseeeee {background:#292e38;}.darkMode .related-post h4{background:#292e38;}.darkMode #label-info-th {background:#1d2129;}.darkMode body {background:#1d2129;}.darkMode .post-body {color:#cccccc}.darkMode #baca-juga h2 {color:#cccccc;background:#1d2129}.darkMode .label-info-th a {color:#cccccc;background:#3d4658}.darkMode li.recent-posts a{color:#cccccc}.darkMode .recent-posts-title h2{color:#cccccc}.darkMode .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}.darkMode .post-info {color:#cccccc}.darkMode {background:#1d2129;}.darkMode h2.post-title a {color:#9e9e9e;}.darkMode h2.post-title a:hover {color:#f17f43}.darkMode .post-title {color:#1e90ff}.darkMode ul.nav-social {color:#1d2129}.darkMode .post-snippet {color:#cccccc}.darkMode #Label1{background:#292e38;}.darkMode .post{background:#292e38;border-bottom-color: #252a33;}.darkMode .PopularPosts h2{background:#343944;}.darkMode .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}.darkMode .newspaptext{color:#9e9e9e}.darkMode .PopularPosts h2 span{color:#9e9e9e}.darkMode .list-label-widget-content ul li {border-bottom-color: #313640;}.darkMode .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;}.darkMode #footer-container{background:#12161f;}.darkMode #footer-navmenu{background:#171b25;}.darkMode .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;}.darkMode .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;}.darkMode .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;}.darkMode .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;}.darkMode .comments h3 {color:#b7b7b7;border-bottom-color: #313640;}.darkMode .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;}.darkMode .btnsocialshare {background:#383c44;}.darkMode .label-line::before{background: #1d2129;}.darkMode .label-line-c::before {background: #333740;}.darkMode a.showcontent:hover {background: #373a42;}.darkMode a.showcontent{background: #292e38}.darkMode #ignielNewsletter input{background: #272b33;border-color:#2b303a;}.darkMode .comments .comments-content .comment-content {color:#ffffff}.darkMode div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}.darkMode .related-post-style-3 .related-post-item-title {color: #bbb;}.darkMode #baca-juga ul {border: 2px solid #333740;}.darkMode #baca-juga h2 {border: 2px solid #292e38;}.darkMode #comments a.hiddencontent {background: #424854;}.darkMode .comments .comments-content .comment-thread ol {background: #292e38;}.darkMode .comments .comments-content .inline-thread{background: #292e38;}

Tampilkan Mode Dark

Dibawah ini adalah script kode untuk menampilkan Icon dan fitur mode darknya, sobat bisa menaruh kode ini dimana saja yang jelas harus meletakkan ditempat pengguna yang senang menjangkaunya

Saran: Sebagai saran dari saya kamu bisa meletakkan kodenya tepat diatas kode </header>

Berikut adalah kode untuk menampilkan mode dark dan untuk menjalankan fungsinya

<div class='rah-darkMode'><input class='check' id='rah-darkMode' title='Dark Mode' type='checkbox'/><label class='iconmode' for='rah-darkMode'><svg class='openmode' viewBox='0 0 24 24'> <path d="M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z"/></svg><svg class='closemode' viewBox='0 0 24 24'><path d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z"/></svg></label></div>

Oke sobat desain begitulah informasi kita kali ini untuk lebih jelaskan anda bisa menanyakan nya didalam form komentar, ok ๐Ÿคจ

Keindahanmu akan kuabadikan disetiap karyaku.

2 komentar

  1. Gan mode gelap ini bisa diterapkan di template viomaqz ngk?
    1. Tapi blog sampean kan udah pasang mode dark, sticky lagi, udah cakep mah menurut ane
Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.