Seiring dengan trennya ala ala dark mode atau mode gelap yang banyak di adaptasi oleh beberapa website seperti sebut saja twitter dan situs situs besar lainnya. Bukan berarti anda tidak bisa mengikuti tren seperti itu. Anda bisa menambahkan fitur dark mode atau mode baca hitam dimana tampilan akan berubah hanya dengan slide pada suatu tombol saja.
Bagi pengguna blogger ini akan menjadi daya tarik tersendiri. Ini diterapkan hanya dengan meletakkan beberapa kode CSS saja. Sebagai demo awal anda bisa kunjungi blog yang secara random saya lihat memiliki fitur mode dark ini. Silakan lihat cekrisna.com. Ada slide pada bagian bar untuk model dark mode. Blog tersebut di buat dengan cms Blogger.
Adapun langkah dan tahap serta script untuk menjadikan template blogspot bisa dark mode sebagai berikut,
Menambahkan Kode Mode CSS
Disini kita akan menambahkan kode CSS pada HTML Template Editor. Untuk yang sering otak atik template mungkin sudah tahu posisinya dimana. Tetapi untuk yang pemula anda bisa lihat menu Tema pada bilah kiri setelah anda masuk pada dashboard blogger.
Temukan Sesuaikan dan klik panah berarah ke bawah. Selanjutnya bisa memilih Edit HTML. Klik sembarang tempat pada kolom yang berisi kode kode yang mungkin membuat anda bingung sebagai pemula. Lanjutkan dengan kombinasi CTRL+F pada keyboard komputer anda. Akan muncul kolom pencarian kecil dan ketikkan b:skin
<style type="text/css">
/*---- Night Mode/Dark Mode Oleh petunjukonlene.com ----*/
.modedark {
background: linear-gradient(to right, #eb3349 40%, #f45c43); /*Background color of icon*/
float: left;
position: fixed;
bottom: 0; /*Change this for position*/
z-index: 999;
opacity:0.7 /*Opacity Degree Of Icon*/
}
.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
}
/*----- Element yang akan di night mode-----*/
// Tambahkan elemen yang akan berubah warna pada class atau id dengan awalan .nightmode contoh
.nightmode{background:#15202B;color:rgba(255,255,255,.7)}
.nightmode #outer-wrapper,.nightmode #sidebar-wrapper{background:#323232;color:#fff!important}
/* --- Silakan tambahkan elemen lain seperti menu bar, footer dll --- */
</style> Sebagaimana pada bagian akhir kode, anda bisa tambahakan bagian atau elemen apa saja yang akan diubah warnanya dengan night/dark mode pada template blogspot tersebut. Silakan tambahakan .nightmode pada awalan CSS setiap kode.
Sebagai contoh sebuah kode yang lengkap anda bisa gunakan kode berikut ini.
.nightmode .header-menu {
background: #2B2B2B;
color: #fff!important
}
.nightmode .header-menu a,
.nightmode .header-menu span {
color: #EEEEEE!important
}
.nightmode #outer-wrapper,
.nightmode #sidebar-wrapper {
background: #323232;
color: #fff!important
}
.nightmode #PopularPosts1,
.nightmode #Label3,
.nightmode #Label1 {
background: #323232;
}
.nightmode #PopularPosts1 a,
.nightmode #PopularPosts1 .title,
.nightmode #Label1 a,
.nightmode #Label3 a,
.nightmode #Label1 .title,
.nightmode #Label3 .title {
color: #eeeeee!important
}
.nightmode .post-body h1,
.nightmode .post-body h2,
.nightmode .post-body h3,
.nightmode .post-body h4,
.nightmode .post-title,
.nightmode .index-post .post-info > h2 > a {
color: #fff!important
} Pada bagian kode di atas bagian yang akan berubah antara lain label post, judul postingan header menu dan label serta index post.
Tambahan Javascript
Masih di bagian yang sama. Anda temukan kode </body> pada template editor anda. Kemudian letakkan kode javascript di bawah ini.
<script type='text/javascript'>
//<![CDATA[
/* Mode Gelap ala Petunjukonlene.com */
/* Jangan Hapus kredit */
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode",$(".section-center").css("display","block")):($("body").toggleClass("nightmode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("nightmode")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
//]]>
</script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> Terakhir kita akan tambahkan kode pemanggil.
Kode Pemanggil
Yang dimaksud dengan kode pemanggil disini adalah tempat atau dimana slide atau tombol untuk perubahan menjadi night/dark mode diletakkan. Anda bisa saja meletakkan di menu bar, top artikel atau lainnya.
Atau yang lebih mengesankan menurut saya pribadi tombol tersebut diletakkan melayang atau floating. berikut kodenya,
<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> Share Yuk
Related Posts
Loading...
No comments:
Post a Comment