Hiệu Ứng Chế Độ Ban Đêm Có Button Cho Blogger

Hiệu Ứng Chế Độ Ban Đêm Có Button Cho Blogger, Ban đêm mà lướt blog mà nhìn màng hình sáng chắc chắn các bạn rất mỏi mắt của mình đúng không, bài viết này mình sẽ hướng dẫn các bạn cách thay đổi màu nền bằng một click trong button mà không phải hẹn giờ như các bài blog khác viết ra.

Hiện nay rất nhiều website đã hộ trợ chế độ ban đêm để thỏa mản người dùng, đáng chú ý nhất là youtube họ đã hộ trợ chế độ bạn đêm này chuyển màu sáng thành màu tối.


Chế độ ban đêm cho blogspot, cài đế độ tối sáng cho blog, hiệu ứng ban đêm cho blogger, Hiệu Ứng Chế Độ Ban Đêm Có Button Cho Blogger

Cách cài đặt chế độ ban đêm cho blogspot

Đầu tiên thêm đoạn Css này vào ]]></b:skin>
.night{background:#2a3548;transition:all .3s}
.night .post-body,.night .post,.night #outer-wrapper,.night #content-wrapper,.night .blogouter-wrapper,.night #comments,.night .widget,.night .tabs-content .widget li,.night .tabs-content .widget ul,.night .tabs-menu li,.night .tabs-content,.night .ticker-wrap,.night #ticker,.night #ticker ul li h3 a,.night .breadcrumbs,.night .breadcrumbs span,.night .breadcrumbs span a,.night .widget .post-body li,.night .related-post,.night .PopularPosts ul li,.night #related_post h4,.night .authorboxwrap,.night .relhead,.night .halaman,.night .comment-note,.night .comment-note h5,.night .comment_emo_list span,.night h1.post-title,.night h2.post-title a,.night #header a,.night p.description,.night .posts-title,.night .post-info,.night .blog-pager,.night .recpost .rcp-title a,.night #blog-pager,.night .PopularPosts ul li a,.night .recomments a,.night .intro-label,.night .author_description_container h4 a,.night #wrapper{background:rgba(255,255,255,0)!important;color:rgba(255,255,255,0.85)!important}
.night img{filter: brightness(70%);}
.night #NightMode{background:#fff;color:#00a1d6;}
.night #NightMode:hover{background:#fff;color:#fc4f3f;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.night #NightMode:before{content:"\f185";font-family:FontAwesome;}
@keyframes pulse{0%{-moz-box-shadow:0 0 0 0 rgba(51,51,51,0.7);box-shadow:0 0 0 0 rgba(51,51,51,0.7)}70%{-moz-box-shadow:0 0 0 10px rgba(51,51,51,0);box-shadow:0 0 0 10px  rgba(51,51,51,0)}100%{-moz-box-shadow:0 0 0 0 rgba(51,51,51,0);box-shadow:0 0 0 0 rgba(51,51,51,0)}}
#NightMode{z-index:90;position:fixed;padding:0;width:40px;height:40px;line-height:40px;bottom:80px;right:25px;overflow:hidden;background:rgba(42,53,72,0.85);color:rgba(255,255,255,0.85);font-size:25px!important;border:none;border-radius:4px;-webkit-transform: translateZ(0);transition:all .5s ease-out;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s;}
#NightMode:before{content:"\f186";font-family:FontAwesome;}
#NightMode:hover{background:rgba(42,53,72,0.5);color:rgba(255,255,255,1)}
button#NightMode{animation:pulse 1.5s infinite;box-shadow:0 0 0 rgba(51,51,51,0.7);}

Tiếp Theo Thêm Đoạn JS Này Trên </Body>

<script>$("button.iris-night").click(function () {$("body").toggleClass("night");}); </script>

Đoạn cuối cùng thì các bạn thêm đoạn html này vào HTML/Javascript Nhé

<a href='#NightMode'><button class='iris-night' id='NightMode' onclick="document.getElementById('switchCheckbox').checked=!document.getElementById('switchCheckbox').checked;"></button></a>
Tag : Chế độ ban đêm cho blogspot, cài đế độ tối sáng cho blog, hiệu ứng ban đêm cho blogger, Hiệu Ứng Chế Độ Ban Đêm Có Button Cho Blogger

8 Bình Luận "Hiệu Ứng Chế Độ Ban Đêm Có Button Cho Blogger"