Cara Membuat Fitur Night Mode Dengan Tombol Melayang Pada Blog

Cara Membuat Fitur Night Mode Dengan Tombol Melayang Pada Blog

Meta Moz - Halo sobat blogger, pada kesempatan kali ini Meta Moz akan membuat tutorial yang mungkin anda telah sering melihatnya dibeberapa blog. Seperti yang sudah disebutkan pada judul artikel ini kita akan membuat fitur night mode / dark mode / mode malam dengan tombol melayang. Sebenarnya tutorial fitur night mode / dark mode / mode malam telah pernah saya buat sebelumnya namun kali ini sedikit berbeda karena ada dua bloger yang meminta saya untuk memodifikasinya kembali pada bagian tombol pemicu night mode / dark mode / mode malam.

Baca Juga : Cara Membuat Popular Post Mirip Iklan Teks/Link Adsense Ala Meta Moz

Entah kenapa banyak Rapel teman blogger meminta saya memodifikasi ulang bagian tombol pemicu night mode / dark mode / mode malam. Poly versi pendapat mereka mengenai fitur night mode / dark mode / mode malam yang terkesan menambah ada perubahan dan sering kita lihat biasanya terletak digabungkan Herbi menu header blog. Mereka (sobat blogger) beranggapan bahwa tutorial fitur night mode / dark mode / mode malam yang bertebaran di Google mayoritas sama Jum Awang-awang konten blog satu dengan yang lain mulai dari penempatannya, kodenya, dan lainnya.

...Mas bikinin tutorial buat mode malam tapi tombolnya yang  melayang bukan yang di header...

Bermula dari permintaan mapersoalan satu sahabat blogger diatas, saya mencoba mengubah source code night mode / dark mode / mode malam yang telah bertebaran di Google mengikuti permintaan diatas. Akhirnya, saya tidak mengurangi membutuhkan waktu yang lama untuk menyelesaikan pengeditan kode tersebut sebab permintaan sobat blogger diatas hanya ingin peletakan yang berbeda saja dari kebanyakan blog.

Baca Juga : Cara Ampuh Mengatasi Loading Blog Dari JS Google Analytics

Jika anda belum terlalu paham desain blog jangan sungkan bagi merequest tutorial di Faronesia karena saya akan senang dan senantiasa menolong blogger dalam mendesain blog kesayangan anda.

Peringatan:

Jangan pernah merequest tutorial melalui whatsapp

Tutorial memasang fitur night mode / dark mode / mode malam saya jamin work 100% jika anda menerapkan Berhubungan dengan benar sesuai perintah yang saya tuliskan pada halaman ini. jadi, simak Berhubungan dengan teliti dan praktikkan pada blog uji coba terlebih dulu sebelum dipasang pada blog utama.

Baca Juga : 47 Free Backlinks From High Authority Sites

Sebelum mempraktekkannya, saya Bertentangan dengan harapan anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang menambah anda inginkan seperti kode tidak cocok, mapersoalan menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Cara Membuat Fitur night mode Dengan Tombol Melayang Pada Blog

• Masuk ke dashboard blog
• Lalu masuk ke menu tema blog
• Kemudian klik edit HTML
• Tempelkan kode Jquery dibawah ini tepat diatas kode </head>

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

• Tempelkan kode CSS berikut dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* Night Mode by faronesia.com */
.faronesiadark{position:fixed;float:left;z-index:5;bottom:20px;left: 20px;font-size:15px;border:2px solid #ffffff;padding:8px;border-radius: 5px;background:#e17e49;text-align:center;width:auto;box-shadow:0 3px 8px 2px rgba(0,0,0,0.1)}
.faronesiadark svg{width:24px;height:24px;vertical-align:-5px;background-repeat:no-repeat!important;content:''}
.faronesiadark svg path{fill:#fff}
.check{display:none}
.faronesiadark .iconmode .openmode{display:block}
.faronesiadark .iconmode .closemode{display:none}
.faronesiadark .check:checked ~ .iconmode .openmode{display:none}
.faronesiadark .check:checked ~ .iconmode .closemode{display:block}
/* Rona Dark Mode Faronesia.com  */
.faronesiapro #wrapper {background: #292e38;}
.faronesiapro #HTML3 {background:#1d2129;}
.faronesiapro #footer-widget-container {background:#1d2129;}
.faronesiapro .share-this-pleaseeeee {background:#292e38;}
.faronesiapro .related-post h4{background:#292e38;}
.faronesiapro #label-info-th {background:#1d2129;}
.faronesiapro body {background:#1d2129;}
.faronesiapro .post-body {color:#cccccc}
.faronesiapro #baca-juga h2 {color:#cccccc;background:#1d2129}
.faronesiapro .label-info-th a {color:#cccccc;background:#3d4658}
.faronesiapro li.recent-posts a{color:#cccccc}
.faronesiapro .recent-posts-title h2{color:#cccccc}
.faronesiapro .post-info {color:#cccccc}
.faronesiapro {background:#1d2129;}
.faronesiapro h2.post-title a {color:#9e9e9e;}
.faronesiapro h2.post-title a:hover {color:#f17f43}
.faronesiapro .post-title {color:#1e90ff}
.faronesiapro ul.nav-social {color:#1d2129}
.faronesiapro .post-snippet {color:#cccccc}
.faronesiapro #Label1{background:#292e38;}
.faronesiapro .post{background:#292e38;border-bottom-color: #252a33;}
.faronesiapro .PopularPosts h2{background:#343944;}
.faronesiapro .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}
.faronesiapro .newspaptext{color:#9e9e9e}
.faronesiapro .PopularPosts h2 span{color:#9e9e9e}
.faronesiapro .list-label-widget-content ul li {border-bottom-color: #313640;}
.faronesiapro .img-thumbnail img {background: #252931 linear-gradient(to CopyHak cipta, rgba(255, 255, 255, 0) 5%, rgb(49, 54, 64) 20%, rgba(255, 255, 255, 0) 30%);background-size: 800px 104px;}
.faronesiapro #footer-container{background:#12161f;}
.faronesiapro #footer-navmenu{background:#171b25;}
.faronesiapro .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;}
.faronesiapro .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;}
.faronesiapro .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;}
.faronesiapro .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;}
.faronesiapro .comments h3 {color:#b7b7b7;border-bottom-color: #313640;}
.faronesiapro .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;}
.faronesiapro .btnsocialshare {background:#383c44;}
.faronesiapro .label-line::before{background: #1d2129;}
.faronesiapro .label-line-c::before {background: #333740;}
.faronesiapro a.showcontent:hover {background: #373a42;}
.faronesiapro a.showcontent{background: #292e38}
.faronesiapro .comments .comments-content .comment-content {color:#ffffff}
.faronesiapro div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}
.faronesiapro .related-post-style-3 .related-post-item-title {color: #bbb;}
.faronesiapro #baca-juga ul {border: 2px solid #333740;}
.faronesiapro #baca-juga h2 {border: 2px solid #292e38;}
.faronesiapro #comments a.hiddencontent {background: #424854;}
.faronesiapro .comments .comments-content .comment-thread ol {background: #292e38;}
.faronesiapro .comments .comments-content .inline-thread {background: #292e38;}
.faronesiapro /* tambahin css Belajar sendiri sesuai selera yang akan dibuat gelap */

• Selanjutnya, jika anda menggunakan template viom*gz silahkan tempelkan kode Html dibawah ini tepat setelah kode <div id='post-wrapper'> (jika template lain silahkan sesuaikan sendiri)

<div class='faronesiadark'><input class='check' id='faronesiadark' title='Mode Dark' type='checkbox'/>
<label class='iconmode' for='faronesiadark'>
<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>

• Lalu tempelkan kode javascript dibawah ini diatas kode </body>

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

• Terakhir klik simpan tema dan memamerkan hasilnya

Demikianlah mengenai Cara Membuat Fitur night mode / dark mode / mode malam Dengan Tombol Melayang Pada Blog semoga bermanfaat bagi para pembaca dimanapun anda berada. Jika menurut anda Swasta ini bermanfaat jangan lupa share karena Berhubungan dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website https://metamoz.blogspot.com/

Thanks for visiting our article √ Cara Membuat Fitur Night Mode Dengan Tombol Melayang Pada Blog - Meta Moz. Please share it with pleasure.