• ITCNTT Xin Chào Bạn -_- Khách
    Xin Chào Khách ! Đăng ký hoặc Đăng nhập Để tài vô vàn tài nguyên vip của chúng tôi Click Here
    Tài Nguyên Vip Của Chúng Tôi Đang Được Free Download Click Here Vip.
    Khách bạn hãy like fanpage để nhận thông báo dữ liệu mới nhất Click Here.
    Quan trọng! Tất cả phần mềm, khóa học, tài liệu, windows, game đều được chia sẻ miễn phí download.
    Nếu có vấn đề gì Khách hãy liên hệ cho chúng tôi Liên Hệ

Dương Hoài Nam

Administrator
Thành viên BQT
Administrator
BQT
30/5/18
1,702
28
48
Hà Nội
itcntt.com
#1
Hello anh em, hôm nay mình giới thiệu cho anh em 2 nút Sáng - Tối & Hẹp - Rộng nhé
DEMO + CÁCH LÀM :

DEMO​



CÁCH BƯỚC THỰC HIỆN :
Bước 1 : Chèn đoạn CSS dưới đây dán trước thẻ ]]></b:skin>
CSS:
/*========== Dark Skin ==========*/
body.dark-skin{background-image:url(https://i.imgur.com/K9LcLAi.jpg);color:#fff}
body.dark-skin body.boxed-layout{box-shadow:none!important}
body.dark-skin #main-wrapper{background:#1c1c1c}
body.dark-skin .post-outer{background:#1c1c1c;border-bottom:1px solid #555}
body.dark-skin #sidebar-wrapper .widget-content{background:#1c1c1c}
body.dark-skin #outer-wrapper{background:#111111}
body.dark-skin .item .post-title,body.dark-skin .index .post-title a{color:#fff}
body.dark-skin .post-readmore a{color:#888}
body.dark-skin .PopularPosts li a{color:#fff}
body.dark-skin #PopularPosts1 .widget-content ul li a{color:#fff}
body.dark-skin #PopularPosts2 ul li .item-title a:hover, .PopularPosts ul li a:hover{color:#fff}
body.dark-skin #PopularPosts1 li:nth-child(2n+2){background:#2c2c2c}
body.dark-skin .sidebar .widget-title{background:#333}
body.dark-skin #sidebar .widget h2{color:#eee}
body.dark-skin .ty-share-post{border:0;box-shadow:none}
body.dark-skin #related-postsst ul li a,body.dark-skin,body.dark-skin a.bhome{color:#fff}
body.dark-skin span.option-name,body.dark-skin span.option-name-2{color:#222}
body.dark-skin #blog-pager-newer-link a,body.dark-skin #blog-pager-older-link a,body.dark-skin a.home-link{color:#fff}
body.dark-skin #blog-pager-newer-link a:hover,body.dark-skin #blog-pager-older-link a:hover,body.dark-skin a.home-link:hover{color:#fff}
body.dark-skin .post-meta a,body.dark-skin .post-meta span,body.dark-skin .post-meta i{color:#888!important}
body.dark-skin .item .post-body{color:#777}
body.dark-skin #related-posts h5{background:#333;color:#eee;border-bottom:2px solid #444}
body.dark-skin #related-posts a{background:#222}
body.dark-skin .content_author{background:#222}
body.dark-skin .dot_author_right{border-right:10px solid #222}
body.dark-skin p.author_title{color:#fff}
body.dark-skin p.description{color:#eee}
body.dark-skin .comments h4,body.dark-skin .facebook-comment h4{background:#333;color:#eee}
body.dark-skin .comments{background:#272727}
body.dark-skin .comment_inner{background:#222}
body.dark-skin .comment_child .comment_wrap,body.dark-skin .comment_reply_form{border-left:1px solid #444}
body.dark-skin #comment-rule{background:#222;color:#eee}
body.dark-skin #comment-rule p:after{border-color:#222 transparent transparent}
body.dark-skin .comments iframe{background:#111}
body.dark-skin .brakt-buy-now{color:#777}
body.boxed-layout{max-width:1200px!important;margin:auto;box-shadow:0 0 10px #aaa!important}
Bước 2 : Tìm thẻ <body> và thay bằng đoạn code dưới
CSS:
<body class='index'>                                                  <style>
#open-switcher{display:block;color:#333;background:#fff;border:1px solid #ddd;position:absolute;top:-1px;left:-50px;border-radius:10px 0 0 10px;cursor:pointer;font-size:25px;text-align:center;line-height:50px;color:#fff;z-index:999999999999}
span.close-switcher,span.cog{color:#444;padding:14px;overflow:hidden}
#brakt-switcher{position:fixed;width:225px!important;display:block!important;top:100px;right:0;display:block;background:#fff;border:1px solid #ddd;z-index:999999999999;border-radius:0 0 0 10px;box-shadow:0 0 25px rgba(0,0,0,0.2);transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}
#brakt-switcher h2{font-size:20px;text-align:center;line-height:33px;margin-bottom:20px;display:none}
#brakt-switcher h2 .fa{margin-right:5px}
#brakt-switcher h3{color:#333;font-size:14px;text-align:center;line-height:20px;padding-top:10px;margin-bottom:10px;font-family:'Open Sans'}
.brakt-switcher-mood .fa{margin-right:5px}
.brakt-switcher-mood{display:block;font-family:'Open Sans'}
.brakt-switcher-mood ul{display:block;padding:0;padding-top:10px;overflow:hidden;text-align:center;border-bottom:1px solid #eee}
.brakt-switcher-mood ul li{display:inline-block;padding:0!important;width:41%;height:29px;line-height:29px;float:left;margin:0 10px;margin-bottom:10px;overflow:hidden}
.brakt-switcher-mood ul li span{padding:2px;width:100%;display:block;background:#eee;cursor:pointer;border-radius:1px;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease}
.brakt-switcher-mood ul li span:hover{background:#000;color:#fff}
.brakt-switcher-color{text-align:center;display:none}
.brakt-switcher-color span{height:35px;width:35px;border-radius:50%;line-height:0;cursor:pointer;display:inline-block;background-color:#eee;border:3px solid #fff}
.active-color{box-shadow:0 0 5px #aaa}
span.active-list{color:#fff;background:#0575E6;background:#3b5998!important}
.active-fimg{color:#fff;background:#0575E6;background:#3b5998!important}
span.grid.active-list{background:#e9bc30;color:#fff}
span.normal.active-list{background:#e9bc30;color:#fff}
@media screen and (max-width: 640px) {
#brakt-switcher{position:fixed;width:225px!important;display:block!important;top:70px}
}
.switch{background-color:#d6d6d6;border-radius:25px;color:#fff;cursor:pointer;display:block;font-size:14px;height:26px;position:relative;width:60px;margin:auto;text-align:center;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.switch.checked{background-color:#76d21d}
.switch input[type="checkbox"]{cursor:pointer;height:10px;left:12px;position:absolute;top:6px;-webkit-transition:left .05s ease-in-out;-moz-transition:left .05s ease-in-out;-o-transition:left .05s ease-in-out;-ms-transition:left .05s ease-in-out;transition:left .05s ease-in-out;width:10px}
.switch.checked input[type="checkbox"]{left:38px}
.switch input::before{background:#fff;border:1px solid #fff;border-radius:50%;content:'';position:absolute;top:-6px;left:-10px;width:20px;height:20px}
.switch .icon-ok,.switch .icon-remove{line-height:28px;text-shadow:0 -2px 0 rgba(0,0,0,0.2);margin:0 9px}
.switch .icon-ok{float:left}
.switch .icon-remove{float:right}
.swich-mood{overflow:auto}
.sw-1{width:50%;float:left;text-align:center;margin:auto;padding:6px 0}
.border-r{border-right:1px solid #eee}
body.item.fimg .post-body img:first-child{display:none}
.switch.checked span.b-active{float:right}
span.b-active{background:#fff;border-radius:50%;width:20px;height:20px;display:inline-block;float:left;margin:3px 5px}
span.option-name,span.option-name-2{color:#222}
</style>
<div id='brakt-switcher'>
<div id='open-switcher'><span class='zer cog' style='display:none;'><i class='fa fa-cog fa-spin'></i></span><span class='zer close-switcher'><i aria-hidden='true' class='fa fa-times'></i></span></div>
<h2><i aria-hidden='true' class='fa fa-user-circle'></i><br/>Customize</h2>
<div class='brakt-switcher-mood'>
<div class='swich-mood'>
<div class='sw-1 border-r'>
<span class='option-name'><i aria-hidden='true' class='fa fa-sun-o'></i>Light Skin</span><span class='option-name' style='display:none;'><i aria-hidden='true' class='fa fa-moon-o'></i>Dark Skin</span>
<label class='switch light-mood'>
<span class='b-active'></span>
</label>
</div>
<div class='sw-1'>
<span class='option-name-2'><i aria-hidden='true' class='fa fa-arrows-h'></i>Wide</span><span class='option-name-2' style='display:none;'><i aria-hidden='true' class='fa fa-stop'></i>Boxed</span>
<label class='switch b-boxed'>
<span class='b-active'></span>
</label>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[ 
$(function() {


  $('.switch light-mood').change(function(){
    $(this).toggleClass('checked');
  });


});
$( ".close-switcher" ).click( function() {
 $( "#brakt-switcher" ).css( "right", "-225px" ),
 $( this ).addClass( "open-s" );
});
$( ".cog" ).click( function() {
 $( "#brakt-switcher" ).css( "right", "0px" )
});
$( "#open-switcher" ).click( function() {
  $( ".zer" ).toggle();
});
$( ".dark-mood" ).click(function() {
  $( "body" ).addClass( "dark-skin" );
  $( "body" ).addClass( "checked" );
});



$( ".light-mood" ).click(function() {
  $( "body" ).toggleClass( "dark-skin" );
  $( ".light-mood" ).toggleClass( "checked" );
  $( ".option-name" ).toggle();
});


$( ".b-boxed" ).click(function() {
  $( "body" ).toggleClass( "boxed-layout" );
  $( ".b-boxed" ).toggleClass( "checked" );
  $( ".option-name-2" ).toggle();
});
      //]]>
    </script>
TỔNG KẾT :
Vậy là mình đã hướng dẫn ae làm 2 Nút Sáng - Tối & Hẹp - Rộng rồi !
Xem thêm
 

Fanpage Diễn Đàn ITCNTT.COM

Group Diễn Đàn ITCNTT.COM