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

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

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

Trịnh Công Sơn đã đăng Thứ Sáu, 6 tháng 4, 2018
Hiện có lượt xem và 0 bình luận

Chi tiết

Liên quan

Nhận xét

Tác giả

Bản Quyền

  • Xem toàn trang
  • 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.
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/xvhDr24.png[/img]

    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

    Trịnh Công Sơn

    Tất cả bài đăng trên website đều thuộc bản quyền về Tôi Viết Code, chỉ được phát hành lại nội dung từ website này khi có sự đồng ý bằng văn bản của admin