Beranda / Bisnis online

Dark mode pada tamplate blogspot ini koding nya

Oleh navigasiin Posting Komentar
Navigasi Info - dark mode atau mode gelap pada tampilan blog saat ini memanglah sedang populer di kalangan blogger hampir sebagian besar blogger memasang mode gelap pada website mereka.

Dark mode pada tamplate blogspot ini koding nya
Dark mode pada tamplate blogspot ini koding nya


Memasang fitur dark mode pada tamplate blog kita memberikan kesan yang lebih profesional serta mempercantik tampilan blog kita selain itu ada manfaat lainnya terutama bagi para pembaca blog atau website kita yang mana hal ini telah dilakukan beberapa survey dan sumber terpercaya.


Manfaat mode gelap pada blog untuk visitor


Manfaat mode gelap atau dark mode bukan hanya untuk mempercantik tampilan blog kita saja akan tetapi ada fungsi lain yang membuat para visitor blog kita lebih nyaman untuk membaca setiap artikel blog kita yang mana kita telah merangkumnya langsung dari berbagai sumber maupun pengalaman pribadi yang mana sebagai berikut :

Menghemat baterai smartphone dan laptop


Manfaat utama dark mode ialah dapat menghemat baterai perangkat para visitor kita terutama bagi para visitor website kita yang mengunakan laptop dan smartphone dimana baterai sebagai tenaga untuk menghidupkan perangkat gadget jenis portable tersebut.

Dengan menggunakan dark mode secara otomatis penggunaan cahaya layar handphone maupun laptop sangat berkurang sehingga tenaga untuk mengakses nya pun lebih sedikit jika dibandingkan dengan mode normal yang mana pengunaan cahaya nya sangat besar selain itu tidak baik untuk kesehatan mata kita.

Dark mode baik untuk kesehatan mata pembaca blog kita


Dari segala manfaat mode gelap pada website kita ialah mode gelap lebih baik untuk kesehatan mata pembaca visitor blog kita dibandingkan mode cerah ( normal ) website kita sebab cahaya biru pada monitor maupun layar smartphone visitor kita mengandung radiasi dan spektrum warna yang tinggi kurang baik untuk kesehatan lensa mata hal tersebut membuat mata pembaca blog kita cepat lelah dan mengeluarkan air mata dengan sendiri.

Dengan adanya mode gelap yang mana tingkat cahayanya tidak terlalu tinggi akan jauh lebih baik jika di bandingkan dengan mode normal.

Memperindah tampilan website


Selain itu dengan ada nya dark mode pada blog kita akan memperindah tampilannya dan lebih menarik sebab dengan satu tombol dapat seketika mengubah tampilan blog kita itu terlihat lebih keren.

Hal ini juga yang membuat beberapa blogger menambahkan fiture mode gelap pada tamplate website mereka.

Cara membuat Dark mode di blogger


Untuk membuat dark mode pada blogspot dapat dibilang tidak terlalu rumit akan tetapi cukup memerlukan ketelitian dan juga tiga tahapan kode yang harus kalian terapkan pada tamplate blog kalian yang mana kode script ini saya dapat dari berbagai sumber sebagai berikut

Tahapan pertama membuat mode gelap pada blogger


  • Langkah awal kalian harus menuju dashboard blogger 
  • Kemudian pilih tema 
  • Lalu klik edit html 
Kemudian kalian copy kode dibawah ini dan paste diatas kode ini ]]></b:skin>  



Kodingan CSS Dark mode blogger

/* Button Dark Mode DezignDesu */
.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 DezignDesu*/
.DarkMode #wrapper {background: #292e38;}
.DarkMode #HTML3 {background:#1d2129;}
.DarkMode #footer-widget-container {background:#1d2129;}
.DarkMode .share-this-pleaseeeee {background:#292e38;}
.DarkMode .related-post h4{background:#292e38;}
.DarkMode #label-info-th {background:#1d2129;}
.DarkMode body {background:#1d2129;}
.DarkMode .post-body {color:#cccccc}
.DarkMode #baca-juga h2 {color:#cccccc;background:#1d2129}
.DarkMode .label-info-th a {color:#cccccc;background:#3d4658}
.DarkMode li.recent-posts a{color:#cccccc}
.DarkMode .recent-posts-title h2{color:#cccccc}
.DarkMode .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.DarkMode span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}
.DarkMode .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}
.DarkMode .post-info {color:#cccccc}
.DarkMode {background:#1d2129;}
.DarkMode h2.post-title a {color:#9e9e9e;}
.DarkMode h2.post-title a:hover {color:#f17f43}
.DarkMode .post-title {color:#1e90ff}
.DarkMode ul.nav-social {color:#1d2129}
.DarkMode .post-snippet {color:#cccccc}
.DarkMode #ignielNewsletter {background:#292e38;}
.DarkMode #Label1{background:#292e38;}
.DarkMode .post{background:#292e38;border-bottom-color: #252a33;}
.DarkMode .PopularPosts h2{background:#343944;}
.DarkMode .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}
.DarkMode .newspaptext{color:#9e9e9e}
.DarkMode .PopularPosts h2 span{color:#9e9e9e}
.DarkMode .list-label-widget-content ul li {border-bottom-color: #313640;}
.DarkMode .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;}
.DarkMode #ignielNewsletter .medsos__ {border-top-color: #313640;}
.DarkMode #footer-container{background:#12161f;}
.DarkMode #footer-navmenu{background:#171b25;}
.DarkMode .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .comments h3 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .btnsocialshare {background:#383c44;}
.DarkMode .label-line::before{background: #1d2129;}
.DarkMode .label-line-c::before {background: #333740;}
.DarkMode a.showcontent:hover {background: #373a42;}
.DarkMode a.showcontent{background: #292e38}
.DarkMode #ignielNewsletter input{background: #272b33;border-color:#2b303a;}
.DarkMode .comments .comments-content .comment-content {color:#ffffff}
.DarkMode div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}
.DarkMode .related-post-style-3 .related-post-item-title {color: #bbb;}
.DarkMode #baca-juga ul {border: 2px solid #333740;}
.DarkMode #baca-juga h2 {border: 2px solid #292e38;}
.DarkMode #comments a.hiddencontent {background: #424854;}
.DarkMode .comments .comments-content .comment-thread ol {background: #292e38;}
.DarkMode .comments .comments-content .inline-thread {background: #292e38;}

Note : diatas untuk mengatur tampilan warna ukuran dan setingan lainnya jadi kalian dapat mengatur tampilannya di kode ini.

Tahap kedua membuat dark mode di blogspot


Selanjutnya kalian menuju </header> copy dan paste kode dibawah ini tepat diatas kode  </header>



Kode script ICON mode gelap

<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>

Note : kode diatas merupakan untuk kode button icon mode gelap kalian dapat meletakan di lokasi yang kalian mau bukan hanya di  </header> saja kan tetapi lebih umum dan bagus di  </header> ( judul blog ).

Tahap terakhir membuat mode gelap pada blogger


Tahap selanjutnya kalian cari kode <body> copy kode dibawah ini dan paste dibawah kode <body>


Kodingan dark mode

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

Note : kode diatas berfungsi untuk mengaktifkan semua kode sebelumnya agar dark mode dapat dijalankan 

Jika semua langkah telah kalian ikuti selanjutnya kalian simpan maka blog kalian akan di tambahkan icon mode gelap yang mana jika di klik tampilan blog kalian akan secara otomatis berubah warna jadi gelap.

Itulah mengenai dark mode blogspot semoga bermanfaat dan terima kasih .
navigasiin
navigasiin navigasiin adalah portal Situs Berita Berbahasa Indonesia yang menyajikan berita terkini terpercaya sebagai petunjuk inspirasi anda

Posting Komentar untuk "Dark mode pada tamplate blogspot ini koding nya"