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>
Bước 1 : Chèn đoạn CSS dưới đây dán trước thẻ ]]></b:skin>
/*========== 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
#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 !
No comments