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

Công Cụ TEST CODE