DomaiNesia
Beranda Blogger Cara Memasang Mode Malam Di Blog Dengan Mudah

Cara Memasang Mode Malam Di Blog Dengan Mudah

Minggu, 02 Februari 2020 Tambah Komentar Edit

Pada kesempatan kali ini admin mau berbagi Cara Memasang Mode Malam Di Blog Dengan Mudah, seperti yang sobat ketahui kebanyakan pengguna internet di malam hari, karena di siang hari separuh dari pengguna sibuk bekerja. Selain menambah fitur di blog kita, mode malam juga memiliki fungsi yang sangat baik yaitu mengurangi contrast terhadap visitor, intinya memberikan kenyamanan pada visitor.

Youtube pun sekarang menambahkan fitur mode malam, karena youtube tahu ramainya visitor yang menonton video di seluruh dunia di malam hari. Karena menurut admin ciri - ciri blog yang profesional selain memberikan konten yang bermanfaat juga memberikan kenyamanan dengan desain yang profesional. Salah satu contoh kenyamanan terhadap visitor ialah menambahkan mode malam pada blog sobat.

Jika sobat ingin blog sobat lebih profesional dengan menambahkan mode malam di blog sobat, sobat bisa ikuti langkah - langkahnya di bawah.

Menambahkan CSS
  • Masuk ke blogger kalian masing - masing dengan Gmail,
  • Selanjutnya pilih menu Tema ~ Edit HTML
  • Ketikkan CTRL + F di keyboard untuk mempermudah pencarian dan masukkan kode ]]><b:skin> ada kan, lalu copy dan pastekan kode CSS dibawah ini tepat diatas ]]></b:skin>
/* Button Dark Mode Expxo.net */
.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 */
/* Night Mode expxo.net */
.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:#fff;background:#292e38;}
.Night .post-body table.tr-caption-container td{color:#fff;}
.Night .post-body table td{background:no-repeat;border:1px solid #f5f5f5;padding:10px;text-align:left;vertical-align:top}
.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:#000;}
.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 h3{background:#343944;}
.Night .latest-post-title h3{border-bottom-color: #313640;}
.Night .newspaptext{color:#9e9e9e}
.Night .PopularPosts h3 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 h3 {color:#b7b7b7;border-bottom-color: #313640;}
.Night .sidebar-sticky h3 {color:#fff;border-bottom-color: #313640;}
.Night .latest-post-title h3 {color:#fff;border-bottom-color: #313640;}
.Night .above-post-widget h3 {color:#b7b7b7;border-bottom-color: #313640;}
.Night .comments h3 {color:#fff;border-bottom-color: #313640;}
.Night .breadcrumbs {color:#fff;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:#000;}
.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;}
Memasang Tombol Mode Malam
  • Memasang tombol mode malam yang lebih responsif dan memudahkan visitor yaitu di bagian Header blog.
  • Untuk memasangnya sobat cari kode </header>, lalu copy kode di bawah ini dan pastekan di atas </header>
<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='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg>
</label>
</div>
Untuk penempatannya sobat bisa sesuaikan sendiri.
Memasang javaScript
  • Untuk memasang JavaScript sobat cari kode </body> ( Biasanya ada di bawah )
  • Copy JavaScript di bawah ini dan pastekan tepat di atas </body>
<script type="text/javascript">
    var _0xcf07=[&quot;x74x6Fx67x67x6Cx65x64&quot;,&quot;x74x6Fx67x67x6Cx65x43x6Cx61x73x73&quot;,&quot;x62x6Fx64x79&quot;,&quot;x63x6Cx69x63x6B&quot;,&quot;x4Ex69x67x68x74&quot;,&quot;x64x69x73x70x6Cx61x79&quot;,&quot;x62x6Cx6Fx63x6B&quot;,&quot;x63x73x73&quot;,&quot;x2Ex73x65x63x74x69x6Fx6Ex2Dx63x65x6Ex74x65x72&quot;,&quot;&quot;,&quot;x6Fx6E&quot;,&quot;x23x6Dx6Fx64x65x64x61x72x6B&quot;,&quot;x68x61x73x43x6Cx61x73x73&quot;,&quot;x63x68x65x63x6Bx65x64&quot;,&quot;x70x72x6Fx70&quot;,&quot;x72x65x61x64x79&quot;];$(document)[_0xcf07[15]](function(){$(_0xcf07[2])[_0xcf07[1]](localStorage[_0xcf07[0]]),$(_0xcf07[11])[_0xcf07[10]](_0xcf07[3],function(){_0xcf07[4]!= localStorage[_0xcf07[0]]?($(_0xcf07[2])[_0xcf07[1]](_0xcf07[4],!0),localStorage[_0xcf07[0]]= _0xcf07[4],$(_0xcf07[8])[_0xcf07[7]](_0xcf07[5],_0xcf07[6])):($(_0xcf07[2])[_0xcf07[1]](_0xcf07[4],!1),localStorage[_0xcf07[0]]= _0xcf07[9],$(_0xcf07[8])[_0xcf07[7]](_0xcf07[5],_0xcf07[9]))}),$(_0xcf07[2])[_0xcf07[12]](_0xcf07[4])?$(_0xcf07[11])[_0xcf07[14]](_0xcf07[13],!0):$(_0xcf07[11])[_0xcf07[14]](_0xcf07[13],!1)})
</script>

  • Jika JavaScript di atas tidak berfungsi sobat bisa pakai JavaScript di bawah ini

<script type='text/javascript'>
//<![CDATA[
$(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 tema blog sobat dan lihat hasilnya
Silahkan anda atur tempat untuk meletakan Tombol Night Modenya dan atur juga ukuran tombol di setiap ukuran layar, silahkan cek menggunakan responsinator
Nah seperti itulah cara memasang mode malam di blog, bagi sobat yang belum mengerti dan belum paham silahkan berkomentar di bawah, nanti bisa di bantu oleh admin. Sekian dulu postingan Cara Memasang Mode Malam Di Blog Dengan Mudah, semoga bermanfaat.
Seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.
  • Facebook
  • WhatsApp
  • Instagram
    • Tampilkan Komentar
    Sembunyikan Komentar

    Belum ada Komentar untuk "Cara Memasang Mode Malam Di Blog Dengan Mudah"

    Posting Komentar

    Langganan: Posting Komentar (Atom)

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel