Hướng dẫn tạo menu dọc cực đẹp cho blogger

#Thủ Thuật #Windows #Blogger #Facebook

Hướng dẫn tạo menu dọc cực đẹp cho blogger

Share:
Chào các bạn, theo yêu cầu của một bạn đã gửi đến Bác Sĩ Windows muốn tạo menu dọc như của BSW trước đây. Hôm nay mình viết bài viết này để hướng dẫn các bạn cách tạo một menu dọc cực đẹp cho blogger, thích hợp để hiển thị trên mọi thiết bị.

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}
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}
}
Bước 2: Sau đó các bạn tìm đến thẻ <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.

CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

3 Nhận xét

Muốn bỏ underline khi trỏ chuột vào các ô trong menu thì chỉnh sửa như nào vậy ạ ?

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.