[Tips] - Menu ghim cố định khi lăn chuột cho blogspot

Menu ghim cố định còn có tên gọi khác là sticky menu, là menu được cố định trên top của blogspot, khi lăn chuột lên xuống thì nó vẫn được ghim cố định, giúp cho độc giả đỡ tốn thời gian cuộn trang mà vẫn có thể chuyển sang bài viết khác.

Cách thêm menu ghim cố định cho blogspot

Để thêm menu này vào blogspot bạn làm theo 2 bước sau :

Bước 1 : Đặt đoạn code sau vào nơi cần hiển thị menu

<script type='text/javascript'>
//<![CDATA[
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#sticky_navigation').css({ 'position': 'relative' });
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
//]]>
</script>
<div id="demo_top_wrapper">
<!-- sticky menu by khamphablog.com-->
<div id="demo_top">
<div class="demo_container">
<div id="my_logo">www.Khamphablog.com</div>
</div>
</div>
<!-- sticky menu by khamphablog.com-->
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="demo_container">
<ul>
<li><a href="#" class="selected">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CLIENTS</a></li>
<li><a href="#">PARTNERS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</div>
</div><!-- #demo_top_wrapper -->
<!-- sticky menu by khamphablog.com-->

Bước 2 : Tìm đến thẻ ]]></b:skin> trong templates blogspot của bạn và thêm đoạn code dưới ngay trên nó

.demo_container { width:980px; margin:0 auto; }#demo_top_wrapper { margin:0 0 20px 0; }
#demo_top { height:100px; padding:20px 0 0 0; }
#my_logo { font:70px Georgia, serif; }
/* our menu styles */
#sticky_navigation_wrapper { width:100%; height:50px; }
#sticky_navigation { width:100%; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; }
#sticky_navigation ul { list-style:none; margin:0; padding:5px; }
#sticky_navigation ul li { margin:0; padding:0; display:inline; }
#sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
#sticky_navigation ul li a:hover, #sticky_navigation ul li a.selected { color:#fff; background:#111; }

Ở bước này các bạn có thể chỉnh màu lại tùy ý cho phù hợp với blogspot của bạn thêm phần bắt mắt. Cuối cùng lưu mẫu lại và kiểm tra thành quả nhé. 

Bài Viết Cùng Chủ Đề