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
TẠO MENU CỐ ĐỊNH (STICKY MENU) TUYỆT ĐẸP CHO BLOGSPOT

Các bước thực hiện:
B1: Chèn đoạn CSS này vào sau vào trước thẻ ]]></b:skin>:
#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 &#39;Roboto&#39;,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:&#39;&#39;;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 &#39;Roboto&#39;,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:&#39;&#39;;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 </head>:
<script>//<![CDATA[
// sticky menu
!function(t){var e={topSpacing:0,bottomSpacing:0,className:"is-sticky",center:!1},n=t(window),i=t(document),c=[],s=n.height(),a=function(){for(var t=n.scrollTop(),e=i.height(),a=e-s,o=t>a?a-t:0,r=0;r<c.length;r++){var p=c[r],l=p.stickyWrapper.offset().top,d=l-p.topSpacing-o;if(d>=t)null!==p.currentTop&&(p.stickyElement.css("position","").css("top","").removeClass(p.className),p.currentTop=null);else{var h=e-p.elementHeight-p.topSpacing-p.bottomSpacing-t-o;0>h?h+=p.topSpacing:h=p.topSpacing,p.currentTop!=h&&(p.stickyElement.css("position","fixed").css("top",h).addClass(p.className),p.currentTop=h)}}},o=function(){s=n.height()};window.addEventListener?(window.addEventListener("scroll",a,!1),window.addEventListener("resize",o,!1)):window.attachEvent&&(window.attachEvent("onscroll",a),window.attachEvent("onresize",o)),t.fn.sticky=function(n){var i=t.extend(e,n);return this.each(function(){var e=t(this);if(i.center)var n="margin:auto;";stickyId=e.attr("id"),e.wrapAll('<div></div>').css("widthth",e.width());var s=e.outerHeight(),a=e.parent();a.css("widthth",e.outerWidth()).css("heightht",s).css("clear",e.css("clear")),c.push({topSpacing:i.topSpacing,bottomSpacing:i.bottomSpacing,stickyElement:e,currentTop:null,stickyWrapper:a,elementHeight:s,className:i.className})})}}(jQuery),$(document).ready(function(){$("#top-wrap-bsw-menu").sticky({topSpacing:0})});
//]]></script>
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 đề):
<div class='' id='top-wrap-bsw-menu'>
<div class='top-wrap-menu_bsw'>
<nav class='top_wrap-menu-bsw'>
<input class='res-bsw-menu' type='checkbox'/>
<label class='res_bsw-menu'><span class='title-bsw'>Trọng Khanh Nguyễn Blog</span>
<span class='hamburger'/>
<span class='hamburger1'/>
<span class='hamburger2'/>
</label>
<ul>
<li><a expr:href='data:blog.homepageUrl' itemprop='url' style='background:rgba(0,0,0,.2)'><i class='fa fa-home fa-lg'/></a></li>
<li> <a href='/search/label/Blogspot' style='margin:0 0 0 8px; color:#fff'>BLOGSPOT<i class='fa fa-angle-down' style='margin:0 0 0 8px; color:#fff'/></a>
<ul class='drop-down-bsw_menu'>
<li><a href='/search/label/Blogspot Tips'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Thủ thuật Blogspot</a></li>
<li><a href='/search/label/Templates Blogspot' target='blank'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Templates blogspot</a></li>
</ul>
</li>
<li><a href='/search/label/Facebook' style='background:#3b5998;color:#fff;clear:both'>FACEBOOK</a></li>
<li><a href='/search/label/Thủ thuật máy tính' style='margin:0 0 0 8px; color:#fff'>THỦ THUẬT MÁY TÍNH<i class='fa fa-angle-down' style='margin:0 0 0 8px'/></a>
<ul class='drop-down-bsw_menu'>
<li><a href='/search/label/Windows XP'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Windows XP</a></li>
<li><a href='/search/label/Windows 7'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Windows 7</a></li>
<li><a href='/search/label/Windows 8'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Windows 8</a></li>
<li><a href='/search/label/Windows 10'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Windows 10</a></li>
</ul>
</li>
<li><a href='/search/label/PSD' style='margin:0 0 0 8px; color:#fff'>PHOTOSHOP</a>
</li>
<li><a href='#' style='margin:0 0 0 8px; color:#fff'>KHÁC<i class='fa fa-angle-down' style='margin:0 0 0 8px'/></a>
<ul class='drop-down-bsw_menu'>
<li><a href='/search/label/Mẹo vặt'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Mẹo vặt</a></li>
<li><a href='/search/label/Giải trí'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Giải trí</a></li>
<li><a href='/search/label/Tên miền'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Tên miền</a></li>
<li><a href='/p/hop-tac.html'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Một số nội quy</a></li>
<li><a href='/p/lien-he.html'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Liên hệ</a></li>
<li><a href='/p/auto-like-facebook_9.html'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Buff Facebook</a></li>
<li><a href='/p/tri-ban-oc.html'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Tri ân bạn đọc</a></li>
<li><a href='http://www.trongkhanhnguyen.com/p/ul.html'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Bình luận gần đây</a></li>
<li><a href='http://www.trongkhanhnguyen.com/p/content-wrapperwidth100.html'><i class='fa fa-angle-right' style='margin:0 10px 0 0'/>Top bình luận</a></li>
</ul>
</li>
<div class='search_box_menu'>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='bsw_menu_search_box_v2_top_ws' name='q' placeholder='NHẬP TỪ KHÓA TÌM KIẾM...' size='30' type='text'/>
</form>
</div>
</ul>
</nav></div></div>
Bây giờ, các bạn chỉ cần điều chinhr nội dung, url phần menu cho phù hợp với blog của bạn là xong rồi! Ở đây, mình có sử dụng Fontawesome, nếu blog bạn nào chưa có thì thêm vào nhé!

Chúc các bạn thành công!


Công Cụ TEST Thử CODE JS CSS HTML Trước Khi Coppy

CHIA SẺ BÀI VIẾT

- - 14 bình luận
CHUYÊN MỤC

BÌNH LUẬN (14)

  1. Trần Đức Minh09:03 14 tháng 6, 2017

    B3 thì chèn vào đâu nhỉ

    Trả lờiXóa
    Trả lời
    1. Chèn vào đâu cũng được bạn , Đối với các template thì thường là sau phần tiêu đề.

      Xóa
  2. Trả lời
    1. Bạn tìm: background:#447F00 đổi mã màu kia thành màu khác là ok.

      Xóa
    2. - em muốn đổi màu phần Bài Viết Vừa Cập Nhật thì làm sao hả ad ?

      Xóa
    3. Bạn gửi link demo mình xem nhé!

      Xóa
  3. sao :v không đổi thanh theme được cho templates BMAG :(

    Trả lờiXóa
  4. Công cụ test code trỏ về home bác ơi. Check lại nha.

    Trả lờiXóa
  5. loạng quạng mãi 2 đêm trong blog này thấy nhiều cái vít ghê :v

    Trả lờiXóa