Tạo Menu Cố Định CHo Blogspot

Chào các bạn, theo yêu cầu của một bạn thì hôm nay mình xin được chia sẻ cho các bạn cách tạo Sticky Menu tuyệt đẹp cho Blogspot mà mình đang sử dụng. Sticky Menu sẽ làm cho Blog bạn thêm phong phú, hiện đại và đẹp đẽ hơn. Bắt đầu thôi


Các bước thực hiện:
B1: Chèn đoạn CSS này vào trước thẻ ]]>
#top-wrap-bsw-menu{z-index:9999;width:100%;height:52px;padding:6px 0;background:#447F00;-moz-transition:all .1s ease;-webkit-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease}
.top-wrap-menu_bsw{width:100%;margin:0 auto}
.top_wrap-menu-bsw{margin:0 auto;max-width:1200px;position:relative;width:100%}
.top_wrap-menu-bsw ul,.top_wrap-menu-bsw li{margin:0 0;padding:0 0;list-style:none;}
.top_wrap-menu-bsw li a:hover{background:rgba(0,0,0,.2)}
.top_wrap-menu-bsw li a:focus{background:rgba(0,0,0,.3);color:white}
.top_wrap-menu-bsw li{margin:0 5px 0 0;float:left;display:inline;position:relative;text-transform:none}
.top_wrap-menu-bsw a{display:block;padding:0 15px;line-height:40px;text-decoration:none;color:#fff;font-size:17px;font-weight:400;text-transform:none;letter-spacing:-.11px;border-radius:4px;transition:.1s}
.res-bsw-menu{display:none;margin:0 0;paddi.top_wrap-menu-bsw ul.drop-down-bsw_menung:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
.res_bsw-menu{font:bold 30px 'Roboto',sans-serif;display:none;width:35px;height:36px;line-height:36px;text-align:center}
.top_wrap-menu-bsw ul.drop-down-bsw_menu{margin:0;width:250px;background:#fff;box-shadow:0 10px 23px rgba(0,0,0,.2);position:absolute;z-index:99;border-top:6px solid #447F00;padding:0;opacity:0;visibility:hidden;transition:all .5s ease-in-out}
.top_wrap-menu-bsw ul.drop-down-bsw_menu:before{content:'';position:absolute;top:-12px;right:10px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:12px solid #fff;left:35px}
.top_wrap-menu-bsw ul .drop-down-bsw_menu li{display:block;width:100%;font:12px 'Roboto',sans-serif;text-transform:none}
ul.drop-down-bsw_menu.morong-colum{width:500px}
.top_wrap-menu-bsw li:last-child ul.drop-down-bsw_menu{right:0}
.top_wrap-menu-bsw li:last-child ul.drop-down-bsw_menu:before{content:'';position:absolute;top:-12px;right:35px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:12px solid #444;left:inherit}
.top_wrap-menu-bsw li:hover ul.drop-down-bsw_menu{opacity:1;visibility:visible;transform:none}
.top_wrap-menu-bsw ul.drop-down-bsw_menu a{color:#555;padding:12px 20px;line-height:normal}
.top_wrap-menu-bsw ul .drop-down-bsw_menu li a{font:400 15px Roboto!important;text-transform:uppercase;letter-spacing:.012435em}
.top_wrap-menu-bsw ul.drop-down-bsw_menu a:hover{background:rgba(0,0,0,.1)}
.top_wrap-menu-bsw ul.drop-down-bsw_menu a:focus{background:rgba(0,0,0,.3)}
.search_box_menu{display:inline;float:right}
#bsw_menu_search_box_v2_top_ws{background:rgba(0,0,0,.2) url(//3.bp.blogspot.com/-xFfHAeNGXEY/WMo2gvshvbI/AAAAAAAAAHU/o80fP425rwMHfpVrUnnQ62N7SkQWAj30gCLcB/s24/search-eee-icon--------bacsiwindows-com.png) no-repeat center left;background-position:3% 50%;outline:0;border:0;border-radius:5px;color:#eee;padding:0 10px 0 42px;font:400 16px Roboto;line-height:35px;float:left;margin:3px 0 0 0;width:350px;letter-spacing:0}
#bsw_menu_search_box_v2_top_ws::-webkit-input-placeholder{color:#ddd}
/* TOP MENU with Banner */
#bsw_bg_m_top{background:#fff;position:relative;padding:15px 0 5px 0;margin:auto;max-width:100%;overflow:hidden;text-align:left;margin:0}
.bsw_bg_m_top{width:1200px;margin:auto}
.bsw_bg_m_top a{color:#66689c;font:700 34px Roboto;text-transform:uppercase;letter-spacing:.05em}
.bsw_bg_m_top a:hover{color:333}
@media screen and (max-width:768px){.top_wrap-menu-bsw ul.drop-down-bsw_menu a{color:#ccc!important}
.top-wrap-menu_bsw{width:100%!important;margin:0 auto}
.top_wrap-menu-bsw{margin:0 auto;width:100%!important;position:relative}
#top-wrap-bsw-menu{z-index:9999;width:100%;height:55px;background:#447F00!important;position:inherit!important;top:0;padding:0}
.top_wrap-menu-bsw ul{background:rgba(48,55,59,0.98);position:absolute;top:40px;right:0;left:0;display:none;padding:15px 0!important;transition:.1s;position:relative;z-index:99999}
.top_wrap-menu-bsw ul.drop-down-bsw_menu:before{display:none!important}
.top_wrap-menu-bsw a{display:block;line-height:0;padding:10px 15px!important;text-decoration:none;color:#fefefe!important;text-transform:none}
.top_wrap-menu-bsw ul li a{font:400 18px Roboto!important}
.top_wrap-menu-bsw ul.drop-down-bsw_menu{height:auto;width:100%!important;background:transparent!important;position:inherit!important;z-index:99;display:block!important;visibility:visible;opacity:1;border:0;box-shadow:none!important;padding:8px 0!important;top:0!important;display:none;transform:none}
.top_wrap-menu-bsw li{display:block;float:none;width:100%}
.top_wrap-menu-bsw input,.top_wrap-menu-bsw label{position:absolute;top:12px;left:15px;display:block}
.top_wrap-menu-bsw input{z-index:4;width:90%}
.top_wrap-menu-bsw input:checked + label .hamburger1{transform:rotate(225deg);top:14px}
.top_wrap-menu-bsw input:checked + label .hamburger2{transform:rotate(-45deg);top:12px}
.top_wrap-menu-bsw input:checked + label .hamburger{transform:rotate(90deg);top:-50px}
.top_wrap-menu-bsw input:checked ~ ul .top_wrap-menu-bsw label{top:10px}
.top_wrap-menu-bsw input:checked ~ ul{top:55px;display:inherit;text-align:center;padding: 70px 0 0 0!important}
.top_wrap-menu-bsw input:checked + ul .drop-down-bsw_menu{display:block}
.hamburger,.hamburger1,.hamburger2{transition:.45445s!important}
.hamburger{font-size:18px;background:#fff;height:2px;display:block;position:relative;top:6px}
.hamburger1{font-size:18px;background:#fff;height:2px;display:block;position:relative;top:12px}
.hamburger2{font-size:18px;background:#fff;height:2px;display:block;position:relative;top:18px}
.top_wrap-menu-bsw .title-bsw{color:#fff;font:500 26px Roboto;text-transform:uppercase;line-height:55px;left:70px;position:absolute;letter-spacing:0;display:none}
B2: Chèn đoạn Script này và trước thẻ đóng 
 
B3: Chèn đoạn code sau vào nơi muốn hiển thị Menu (Đối với các template thì thường là sau phần tiêu đề):









  • BLOGSPOT
  • Thủ thuật Blogspot
  • Templates blogspot


  • FACEBOOK
  • THỦ THUẬT MÁY TÍNH
  • Windows XP
  • Windows 7
  • Windows 8
  • Windows 10


  • PHOTOSHOP

  • KHÁC
  • Mẹo vặt
  • Giải trí
  • Tên miền
  • Một số nội quy
  • Liên hệ
  • Buff Facebook
  • Tri ân bạn đọc
  • Bình luận gần đây
  • Top bình luận








  •  Nguồn: http://www.thanhhuy-it.design/2017/05/tao-menu-co-inh-sticky-menu-tuyet-ep.html 

    0 bình luận

    Mã Hóa Code

    Loading...