CÁCH THỰC HIỆN
Bước 1: Các bạn vào Chủ đề -> Chỉnh sửa template tìm đến thẻ
]]></b:skin> và chèn đoạn code sau lên trước nó:label .bsw{position:absolute;top:125px;left:0;width:30px;height:2px;background:white;display:block;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}Bước 2: Sau đó các bạn tìm đến thẻ
label .bsw:after,label .bsw:before{transition:.5s ease-in-out;content:"";position:absolute;display:block;width:100%;height:100%;background:#fff}
label .bsw:before{top:-8px}
label .bsw:after{bottom:-8px}
label input{display:none}
label input:checked + .menu{}
label input:checked + .menu .bsw{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
label input:checked + .menu .bsw:after{-webkit-transform:rotate(90deg);transform:rotate(90deg);bottom:0}
label input:checked + .menu .bsw:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:0}
label .menu{position:fixed;right:-100px;top:-100px;z-index:100;width:150px;height:150px;background:0;border-radius:0;transition:.5s ease-in-out;box-shadow:none;cursor:pointer}
label ul:hover::-webkit-scrollbar-thumb{background:#ccc}
label ul::-webkit-scrollbar{width:6px}
label ul::-webkit-scrollbar-track,.left_slidemenu_bacsiwindows::-webkit-scrollbar-thumb{background:transparent}
label ul{z-index:999;background:#fff;max-width:100%;width:300px;height:100vh;position:fixed;overflow:auto;top:0;left:-250px;opacity:0;visibility:hidden;-webkit-transition:.5s;margin:0;padding:0;box-shadow:5px 10px 15px 5px rgba(0,0,0,.05)}
label ul li{list-style:none;display:block}
label a{padding:15px 25px;display:block;color:#666;font:400 18px "Roboto";text-transform:capitalize;text-decoration:none;text-align:left;transition:1s ease-out}
label a:hover,label a:focus{background:#eee;color:#666}
label input:checked + .menu + ul{opacity:1;visibility:visible;left:0}
label ul li img{position:relative;top:8px;margin:0 6px 0 0;width:25px;height:25px;border-radius:100%}
span.btn-close-bsw {display: block; padding: 0 22px; color: #666!important; font: 500 18px Roboto; line-height: 55px; border-bottom: 1px solid #eee;cursor:pointer}
@media all and (max-width:768px){
label .bsw,label .bsw:after, label .bsw:before{background:#fff}
@media all and (max-width:768px){
label .bsw{left:15px}
label .menu {left:0;width:100%;background:#7577a9}
}
<body> và chèn đoạn code sau bên dưới thẻ <body><label><input type='checkbox'/><span class='menu'><span class='bsw'></span></span><ul><li><span class='btn-close-bsw'><i class='fa fa-times' style='margin:0 8px 0 0'></i>CLOSE MENU</span></li><li><a href='/' title='Home page'><i class='fa fa-home' style='margin:0 8px 0 0'></i>Trang chủ</a></li><li><a href='/search/label/Facebook' title=''><i class='fa fa-facebook-official' style='margin:0 8px 0 0'></i>Thủ Thuật Facebook</a></li><li><a href='/search/label/Blogger' title=''><i class='fa fa-html5' style='margin:0 8px 0 0'></i>Thủ Thuật Blogspot</a></li><li><a href='/search/label/Windows' title=''><i class='fa fa-paint-brush' style='margin:0 8px 0 0'></i>Thủ Thuật PhotoShop</a></li><li><a href='/p/gioi-thieu-blog.html' title=''><i class='fa fa-windows' style='margin:0 8px 0 0'></i>Thủ Thuật Windows</a></li><li><a href='/search/label/PSD' title=''><i class='fa fa-file-image-o' style='margin:0 8px 0 0'></i>PSD PhotoShop</a></li><li><a href='/search/label/Ebook' title=''><i class='fa fa-book' style='margin:0 8px 0 0'></i>Ebook</a></li><li><a href='/search/label/All Shared Code' title=''><i class='fa fa-code' style='margin:0 8px 0 0'></i>Code</a></li><li><a href='/rule' title=''><i class='fa fa-university' style='margin:0 8px 0 0'></i>Quy định</a></li><li><a href='/p/lien-he.html' title=''><i class='fa fa-user-plus' style='margin:0 8px 0 0'></i>Liên hệ</a></li></ul></label>
Bước 3: Lưu template lại và xem kết quả
LỜI KẾT
Vậy là chỉ với vài bước đơn giản bạn đã có thể tự tạo cho blog của mình một menu dọc thật tuyệt vời rồi.
Chúc các bạn thành công!
Nếu bạn gặp bất cứ lỗi nào vui lòng để lại comment bên dưới bài viết này.
Không có nhận xét nào