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
<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 !
Subscribe Our Newsletter
0 Response to "Nút sáng tối hẹp rộng cho blogger"
Đăng nhận xét