Cara Membuat Night Mode Pada Template Blogger
 |
Nah sebelum kita masuk ke tahap pembuatan night mode sebaik kita pahami terlebih dulu apa sih fungsi dari mode night pada template blogger ? Secara garis besar night mode atau mode malam ini memberikan kenyamanan pembaca saat berkunjung pada blog kamu di saat malam hari atau di minin cahaya, karena night mode secara otomatis akan merubah background menjadi warna hitam dan huruf berwarna putih, dan secara otomatis huruf akan jelas terbaca karena perubahan night mode ini.
Bagaimana jika kamu tertarik, kamu bisa mengikuti cara membuat night mode dibawah ini.
Cara Membuat Night Mode atau Mode Malam Pada Template Blogger
- Pertama silahkan kamu buka blog kemudian login.
- Pada halaman dashboard blogger kamu pilih menu Tema > Edit HTML
- Pada menu Edit HTML silahkan kamu cari kode </hedaer> dan letakkan kode bawah ini tepat di atas kode </header>
<div class="smarthbtn">
<input class="togglenight togglenight-switch" id="modedark" type="checkbox" />
<label class="togglenight-btn" for="modedark" title="Mode Dark"></label>
</div>- Kemudian kamu cari lagi kode </style> atau </b:skin>, terus kamu copy kode CSS dibawah ini tepat di atas kode </style> atau </b:skin>
/* Warna Mode Malam BahasTuntas.Com*/
.Night body {background:#202125} .Night #wrapper{background:#202125}.Night #HTML3{background:#202125}.Night .share-this-pleaseeeee{background:#202125}.Night .related-post h4{background:#202125}.Night #label-info-th{background:#202125}.Night .post-body{color:#ccc}.Night #baca-juga h2{color:#ccc;background:#202125}.Night .label-info-th a{color:#ccc;background:#3d4658}.Night li.recent-posts a{color:#ccc}.Night .recent-posts-title h2{color:#ccc}.Night .widget-content{color:#ccc;background:#202125}.Night .post-info{color:#ccc}.Night h2.post-title a{color:#9e9e9e}.Night h2.post-title a:hover{color:#eee}.Night .post-title{color:#9e9e9e}.Night ul.nav-social{color:#202125}.Night .post-snippet{color:#ccc}.Night #Label1{background:#202125}.Night .blog-posts .post-outer .post{background:#202125;border-bottom-color:#252a33}.Night .PopularPosts h2{background:#202125}.Night .latest-post-title h2{background:#202125;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%,#313640 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}.Night .comments .comment-block {background:#12161f}.Night #header-container{background:rgba(32, 33, 36,.95);background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));box-shadow:0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2)}.Night .comments .comment-block{background:#12161f}.Night #header-wrapper{background:rgba(32, 33, 36,.95);background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));box-shadow:0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2)}.Night .sidebar h2{color:#b7b7b7}.Night .sidebar-sticky h2{color:#b7b7b7}.Night .latest-post-title h2{color:#b7b7b7}.Night .above-post-widget h2{color:#b7b7b7;border-bottom-color:#313640}.Night .comments h3{color:#b7b7b7;}.Night .breadcrumbs a{color:#eee}.Night .btnsocialshare{background:#383c44}.Night .label-line::before{background:#202125}.Night .label-line-c::before{background:#333740}.Night a.showcontent:hover{background:#373a42}.Night a.showcontent{background:#202125} .Night .comments .comments-content .comment-content{color:#fff}.Night div#Label1 h2{border-bottom:1px solid #eee;background:#202125}.Night .related-post-style-3 .related-post-item-title{color:#bbb}.Night #baca-juga ul{border:2px solid #eee}.Night #comments a.hiddencontent{background:#424854}.Night .comments .comments-content .comment-thread ol{background:#202125}.Night .comments .comments-content .inline-thread{background:#202125}.Night.displaypageNum a,.showpage a,.pagecurrent, #blog-pager-newer-link a, #blog-pager-older-link a {color:#eee;background:transparent;border:1px solid #eee}
.Night .label-size{color:#eee;border:1px solid #eee}
.Night .post-bottom a,.post-label a{color:#eee}
/* Toggel */
.smarthbtn{position:absolute;right:50px;top:4px;height:40px;line-height:40px;text-align:center;display:inline-block;align-items:center;z-index:10}
.togglenight{display:none;} .togglenight + .togglenight-btn{outline:0;display:inline-block;width:35px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%} .togglenight-switch + .togglenight-btn{background:#888;border-radius:99em;transition:all .4s ease} .togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z' fill='%23fff'/%3E%3C/svg%3E") center / 17px no-repeat;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);background-color: #333;}
.togglenight-switch:checked + .togglenight-btn{background:#888} .togglenight:checked + .togglenight-btn:after{content:'';left:50%;background:#222 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z' fill='%23fff'/%3E%3C/svg%3E") center / 17px no-repeat;background-color:#333;}- Nah setelah kita membuat tombol toggle nya sekarang kita buat agar tombol toggle tersebut berfungsi
- Kamu cari kode </body> kemudian kamu letakan kode di bawah ini tepat di atas kode </body>
//<![CDATA[
// Smarth Toggle BahasTuntas.Com
toggleClass("modedark")}),$("body").toggleClass(localStorage.toggled),$("#modedark").click(function(){"modedark"!=localStorage.toggled?($("body").toggleClass("modedark",!0),localStorage.toggled="modedark"):($("body").toggleClass("modedark",!1),localStorage.toggled="")});
//]]>
</script>
<script>
//<![CDATA[
// Malam Kelabu BahasTuntas.Com
$(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>- Simpan dan selesai, sekarang lihat hasilnya.
Penutup
Nah selesai deh, cukup mudah bukan membuat mode malam pada template blogger ? Nah cukup sekian juga pembahasan artikel kali ini, jika ada yang tidak di mengerti kamu bisa langsung komentar di bawah.
punya saya tidak berhasil
BalasHapusMungkin ada yang salah gan, coba perhatikan lagi
Hapus