Tạo menu tựa giống Facebook ở bottom responsive cho blogspot

Bài viết hôm nay mình sẽ hướng dẫn các bạn tạo một menu tựa giống menu Facebook ở bottom hoàn toàn bằng css cực nhẹ và đẹp nhé!


Hình ảnh có liên quan

CÁCH THỰC HIỆN

Thêm toàn bộ CSS này vào trước thẻ ]]></b:skin> trong mẫu
.mobile-theme-bsw{float:right;vertical-align:inherit;margin:5px!important;background:#eee;padding:5px 10px;border-radius:100px;color:#888}#log-out-bacsiwindows-btn{z-index:-1;position:absolute;bottom:70px;background:#fff;width:100%;text-align:center;padding:10px;box-sizing:border-box;font-size:15px;color:#d25252!important;font-weight:500;border:1px solid #ddd;border-left:0;border-right:0}.fbuser_info_BSW{font-weight:500}.right_btn_{position:absolute;right:0;font-size:24px;color:#fff!important;padding:10px}.left_btn_{position:absolute;left:0;font-size:24px;color:#fff!important;padding:10px 18px}.bsw_bsw_wrapper{margin:6px auto 15px}#top_wrapmenu_bacsiwindows_v13{height:50px;background:#4267b2;position:relative}#top_wrapmenu_bacsiwindows_v13_s{width:75%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}#search_bacsiwindows_v13{}.search_bacsiwindows_v13{background:rgba(0,0,0,.2);width:100%;text-align:center;height:27px;line-height:27px;font-size:14px;color:#555}.search_bacsiwindows_v13::placeholder{color:#ccc!important}#bttop,.go_group_BSW a,.comment_t,#bsw_loading_,.post_comment,.ghim,.pinned_post{display:none!important}.bacsiwindows_slidemenu_v3{visibility:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;background:#eee;box-shadow:0 0 30px rgba(0,0,0,.1);display:block;font-size:16px;font-weight:400;height:100%;left:0;position:fixed;overflow:auto;transform:translate(10%,0);transition:all .35s ease-in-out;width:100%;z-index:20;opacity:0;top:0}.bacsiwindows_slidemenu_v3.show{visibility:visible;transform:none;opacity:1}.info_bacsiwindows_{padding:0;margin:0 0 30px;height:50px;position:relative;border-bottom:1px solid #eee;background:white}.info_bacsiwindows_ img{border-radius:50%;height:auto;width:35px;position:absolute;top:50%;left:0;transform:translate(65%,-50%)}.profile_text_BSW{z-index:1;position:absolute;bottom:0;padding:10px;text-align:center;width:100%;box-sizing:border-box}.profile_text_BSW a{display:block;line-height:1.5;font-size:16px}.bacsiwindows_slidemenu-onmobile_-menu-v13{list-style:none;margin:0;padding:0;border:1px solid #ddd;border-left:0;border-right:0}.bacsiwindows_slidemenu-onmobile_-menu-v13 li{display:block;position:relative;background:white}.bacsiwindows_slidemenu-onmobile_-menu-v13 a{font:400 14px Roboto;background:transparent;color:#444;display:block;line-height:24px;padding:10px 20px;text-decoration:none}.bacsiwindows_slidemenu-onmobile_-menu-v13 a:after{content:'';background:#f5f5f5;height:1px;width:84%;position:absolute;bottom:0;right:0}.bacsiwindows_slidemenu-onmobile_-menu-v13 a i{background:#444;width:16px;height:16px;line-height:16px;text-align:center;color:#fff;border-radius:100px;padding:7px}.bacsiwindows_slidemenu-onmobile_-menu-v13 a:hover{background-color:#eee}.bacsiwindows_slidemenu-onmobile_-menu-v13 a.active{color:#333333}.bacsiwindows_slidemenu-onmobile_-menu-v13 a.active .bsw_dropdown_-icon{color:#333333}.nav-item_BSW{padding:0}.nav-item_BSW i{margin:0 10px 0 0}.nav-item_BSW2{padding:0 0 0 15px}.bsw_dropdown_{display:none;list-style:none;margin:0;padding:0}.bsw_dropdown_ a{color:#666;padding-left:62px}.bsw_dropdown_ a:hover{background:#ddd}.bsw_dropdown_-icon{color:#757575;height:16px;right:16px;position:absolute;text-align:center;top:16px;width:16px;transition:.5s;opacity:0;transform:rotate(180deg)}.bsw_dropdown_-icon.show{opacity:1;transform:none}.bacsiwindows_slidemenu_v3::-webkit-scrollbar-track,.bacsiwindows_slidemenu_v3::-webkit-scrollbar-thumb,.bacsiwindows_slidemenu_v3::-webkit-scrollbar{width:0}#responsive_menu_v3_bacsiwindows{z-index:21;position:fixed;bottom:0;left:0;width:100%;background:#fff;text-align:center;box-shadow:0 0 30px rgba(0,0,0,.2)}.responsive_menu_v3_bacsiwindows a{display:inline-block;width:15.5%;text-align:center;margin:0;padding:15px 0;box-sizing:border-box;color:#888;font-size:16px}.responsive_menu_v3_bacsiwindows a:hover{color:#4267b2}.responsive_menu_v3_bacsiwindows{display:inline;position:relative}div#overlay{display:none;z-index:3;background:#fff;position:fixed;width:100%;height:100%;left:0;top:0;text-align:center}div#jQsearchBSWv3{display:none;position:fixed;z-index:4;margin:auto;width:100%;background:#FFF;color:#000}.form-search .jsSearchBSWv3{background:#eee;border:0;padding:10px 20px;color:#444;font:400 15px Roboto;position:fixed;left:15px;top:15px;box-sizing:border-box;border-radius:100px;margin:0;width:93%}.form-search input:focus{outline:0}#close{position:fixed;right:8px;top:12px;border-radius:50%;padding:15px 20px;cursor:pointer;color:#999}.trending-search-bsw .content{position:fixed;top:60px;padding:10px;background:#fff;box-sizing:border-box;width:100%;text-align:left;height:80vh;overflow:auto}.trending-search-bsw .content a{display:block;font:400 15px Roboto;color:#888;margin:0 0 10px;padding:0 10px 10px}.number-noty{font-size:10px;position:absolute;background:#da5858;padding:2px 4px;border-radius:4px;top:-5px;color:#fff}#top_wrapmenu_bacsiwindows_v13,#top-menu-bacsiwindows,#top-wrap-bsw-menu{display:none}#res_menu_bsw{background:#fff;border-bottom:1px solid #ccc;position:relative}.logo_text{padding:10px}.logo_text img{width:40px;height:40px;border-radius:50%;vertical-align:middle}.logo_text a{vertical-align:middle;font:500 18px Roboto;text-transform:uppercase;color:#555;margin:0 0 0 10px}
Thêm toàn bộ code này vào trước thẻ đóng </body>




Chỉ đơn giản vậy thôi bạn đã có ngay 1 menu cực ngàu đúng không nào!.
Chúc bạn thành công.

19 nhận xét:

  1. Trả lời
    1. Đương nhiên quen rồi, tui xài mà

      Xóa
    2. - :v Phải chăng đây là V12 BSW Facebook của Nhân dzai

      Xóa
    3. Đây là code của www.bacsiwindows.com mà ta ghi nguồn vô

      Xóa
    4. Biết của bsw thì qua bsw mà xin qua đây hỏi mình viết bài chi bạn

      Xóa
    5. - :v Ý bạn ấy là nguồn ấy Sơn

      Xóa
    6. biết là nguồn rồi cơ mà bạn này qua đây hỏi viết bài menu làm gì khi đã biết của bsw

      Xóa
    7. Bạn nói chuyện kì vậy, lấy code ở đâu thì ghi nguồn ở đó vào chứ, bạn biết nguồn của BSW rồi nhưng đâu phải ai cũng biết?

      Xóa
    8. Bạn à, đây là code của codedayroi nhé bạn

      Xóa
    9. - Code này By : Bacsiwindows - Trường Nguyễn , code được view source trong theme v12 của BSW, thêm cái nguồn vào cuối bài cũng k sao đâu ô -.-, Mà cái menu cứ lỗi css mãi:3

      Xóa
    10. Tui vẫn chưa tìm ra cách fix cái menu đây ông

      Xóa
  2. Trả lời
    1. Bạn có đọc bài không vậy

      Xóa
    2. Có mà ko thấy code dươia body

      Xóa
    3. Cái chèn toàn bộ code này trên thẻ đóng kìa

      Xóa
    4. Đây có thể là lỗi, mình sẽ cập nhật bài viết nhé

      Xóa

- Không spam link bừa bãi.

- Không nói tục, chửi bậy.

- Không bình luận mang tính chính trị.

- Hãy là một độc giả có ý thức!