Cara Membuat Mode Malam atau Night di Blog

adscblog

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.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 09 September and have 0 komentar