Cara Membuat Mode Malam atau Night di Blog

Cara Membuat Mode Malam atau Night di Blog

Jalak Ikal 09 September 0 komentar Read
kali ini saya akan berbagi trik bagaimana cara membuat Mode Night atau mode malam di blog,mungkin sobat blogger juga pernah atau bahkan sering melihat mode malam atau Mode Night ini di salah satu blog yang anda kunjungi

Sebenarnya sih Menurut saya mode malam ini tidak terlalu berguna untuk di basang di blog,tetapi mungkin saja sebagian orang tidak menyukai untuk screen yang terlalu cerah sehingga bisa untuk mengaktive kan mode malam atau mode night ini
Disini saya akan berbagi bagaimana cara memasang mode malam di blog dengan menekan tombol untuk meng aktive kan atau juga menon aktive kan mode malam atau mode Night tersebut dengan tampilan yang menarik dan mudah untuk di gunakan oleh para pengunjung blog

Dan ternyata untuk membuat tombol night atau tombol malam ini sangatlah mudah dan mungkin anda pun akan dengan sangat cepat untuk membuat tombol Mode malam atau Mode Night tersebut tanpa harus repot repot meng otak atik kode kode yang ada di template blog sobat

Cara Membuat Mode Malam atau Gelap di blog

Untuk pembuatan Mode Night ini anda hanya perlu mengikuti langkah-langkah penerapan nya di bawah ini maka dengan cepat blog andapun akan memiliki Mode night atau mode malam di blog sobat,dan untuk penerapan nya adalah sebagai berikut
  • Silahkan sobat masuk ke akun bloger sobat
  • Lalu kemudian silahkan sobat pilih blog yang sobat miliki
  • Kemudian Klik Tema lalu kemudian klik Edit HTML
  • Setelah berada di bagian edit HTML Silahkan sobat letakan Kode CSS berikut
/* faronesia.com Night Mode */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 20px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #bdc3c7;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1d2129;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(40px);
-ms-transform: translateX(40px);
transform: translateX(40px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
.Night #wrapper {background:#1d2129;}
.Night #HTML3 {background:#1d2129;}
.Night #footer-widget-container {background:#1d2129;}
.Night .share-this-pleaseeeee {background:#1d2129;}
.Night #label-info-th {background:#1d2129;}
.Night body {background:#1d2129;}
.Night .post-body {color:#cccccc}
.Night #baca-juga h2 {color:#cccccc;background:#1d2129}
.Night .label-info-th a {color:#cccccc;background:#1d2129}
.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:#1e90ff}
.Night .post-title {color:#1e90ff}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}

  • Langkah selanjut nya silahkan sobat cari Kode </body> dan letakan kode berikut sebelum kode </body> tersebut,dan biasa nya kode tersebut berada di bagian Akhir Kode template sobat
<script>//<![CDATA[

$("#Night").click(function(){

$("body").toggleClass('Night');

});

//]]></script>

  • Dan Langkah terakhir adalah letakan kode HTML berikut di bagian yang ingin anda letakan tersebut,baik di bagian atas Header ataupun di bagian atas Main-Wrapper template blog sobat
<li><br/><label class='switch' for='Night'>

<input id='Night' type='checkbox'/>

<div class='slider round'/></label></li>

  • Kemudian Save template dan lihat hasil nya
 Nah itu lah cara membuat Mode Malam/Gelap di Blog semoga bartikel ini bisa membantu sobat blogger semua selamat mencoba dan salam blogger.

Posted by Jalak Ikal, Published at 09 September and have 0 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi