Hôm nay Khám Phá Blog giới thiệu cho các bạn một mẫu menu khá đẹp, tất nhiên đó là một mẫu stick menu thông thường những nó có tích hợp thêm hộp tìm kiếm bên phải menu giúp blog của bạn trông gọn gàng và chuyên nghiệp hơn.
Cách thêm slick menu vào blogspot
Để thêm mẫu menu này vào blogspot thì bạn có thể làm theo hai cách đơn giản bên dưới nhé.
1. Thêm script vào mẫu
Đăng nhập vào Blogger > Mẫu (templates) > Chỉnh sửa HTML, tìm đến thẻ </head> và thêm đoạn code sau ngay trên nó.
<link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>
2. Chỉnh sửa menu
Bay giờ bạn tìm đến nơi mà bạn cần đặt menu này, thường thì chúng ta nên đặt dưới thẻ <body> trong templates blogspot và dán đoạn code này vào.
<div id="nav">Trong đó :
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></a></li>
<li class="search">
<form method="get" action="/search">
<input name="q" type="text" placeholder="Search..."/><input type="submit" value="" class="searchbutton"/>
</form>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>
- Thay Link 1 đến Link 6 là tên menu của bạn
- Url là url đích đến của menu
Bài Viết Cùng Chủ Đề
[Tips] - Slider Image đơn giản cho blogspotSlider Image (slider ảnh) là một tiện ích được các blogger thường hay dùng để thêm phần chuyên nghiệp cho blog của mình ... 
[Tips] - Menu responsive cho blogspotResponsive là điều chỉnh blogspot phù hợp khi xem trên thiết bị di động. Menu responsive có nghĩa là menu khi xem ... 
[Tips] - Viết bài như thế nào là chuẩn seo cho blogspotPhải nói rằng seo blogspot là một cuộc cách mạng cho những blogger, ngoài việc tối ưu cho blog và seo offpage ra thì vi ... 
Tại sao cần phải thiết kế giao diện mobi cho blogspotGiao diện mobi cho blogspot nói chung là một giao diện khi xem blog trên mobi hay các thiết bị di động khác mà blog vẫn ... 
Cách để bạn bắt đầu với một blog miễn phíTôi rất vui mừng khi nghe điều này mà bạn đang bắt đầu blog của riêng bạn nhưng không may, bạn không biết cách để bạn b ...
Icon CommentsIcon Comments