×

search by faronesia.com

FARONESIA.COM
Profesional and Specialist WebDesign

Unduh dan dapatkan template blogger terbaik mulai dari premium hingga gratis tersedia di Faronesia.com

Unduh sekarang

Cara Membuat Fitur Night Mode Melayang Pada Blog

Faronesia.com - Halo sobat blogger, pada kesempatan kali ini faronesia akan membuat tutorial yang mungkin anda sudah sering melihatnya dibeberapa blog. Seperti yang telah 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 sudah pernah saya buat sebelumnya namun kali ini sedikit berbeda karena ada beberapa bloger yang meminta saya untuk memodifikasinya kembali pada bagian tombol pemicu night mode / dark mode / mode malam.

Entah kenapa banyak sekali teman blogger meminta saya memodifikasi ulang bagian tombol pemicu night mode / dark mode / mode malam. Banyak versi pendapat mereka mengenai fitur night mode / dark mode / mode malam yang terkesan tidak ada perubahan dan sering kita lihat biasanya terletak digabungkan dengan menu header blog. Mereka (sobat blogger) beranggapan bahwa tutorial fitur night mode / dark mode / mode malam yang bertebaran di Google mayoritas sama antara 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 salah satu sahabat blogger diatas, saya mencoba mengubah source code night mode / dark mode / mode malam yang sudah bertebaran di Google mengikuti permintaan diatas. Akhirnya, saya tidak membutuhkan waktu yang lama untuk menyelesaikan pengeditan kode tersebut sebab permintaan sobat blogger diatas hanya ingin peletakan yang berbeda saja dari kebanyakan blog.

Jika anda belum terlalu paham desain blog jangan sungkan untuk merequest tutorial di Faronesia karena saya akan senang dan senantiasa membantu 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 dengan benar sesuai perintah yang saya tuliskan pada halaman ini. jadi, simak dengan teliti dan praktikkan pada blog uji coba terlebih dahulu sebelum dipasang pada blog utama.
Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah 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}
/* Warna 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 right, 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 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 lihat hasilnya

Demikianlah mengenai Cara Membuat Fitur night mode / dark mode / mode malam Dengan Tombol Melayang Pada Blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.
Buka komentar
Tutup komentar
  1. Makasih mas sudah di buatkan tutorialnya dan saya terapkan di blog saya bisa yaa walapun warna pada tombol nya saya ubah sesuai dengan warna theme nya, good lah:)

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Developer

test-1 test-2
Saya adalah seorang Web Designer dan Front-End Developer, 5 tahun dalam pengalaman bermain coding sejak SMA. Pemilik Blog Faronesia sekaligus Desainer Template Blogger.

azza / owner faronesia
Saya adalah mahasiswi sekaligus penulis lepas di sela-sela kesibukan saya. Penulis Faronesia sekaligus penyempurna naskah artikel.

shofi / author faronesia
Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup