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] - Tối ưu css và js cho blogspot
Trong việc seo blogspot thì tối ưu css và js là một điều khá cần thiết cho một blogger. Trong cộng đồng blogger việc n ... 
Auto readmore 3 column không dùng js cho blogspotTiếp tục share mẫu auto readmore không dùng js (javascripts) cho các bạn muốn blog load nhanh nhưng vẫn đẹp. Hôm bữa mì ... 
Recent Post Widget For Blogspot chuyên nghiệpRecent post là widget trình diễn bài viết theo label tùy chỉnh của nhà thiết kế, nếu bạn có một label (nhãn) muốn nằm t ... 
[Tips] - Thu gọn bài viết trang chủ Blogspot không dùng JsRút ngắn bài viết cho blogspot còn có tên gọi tiếng anh đó là Auto readmore, là cách thu gọn bài viết ở trang chủ hay l ... 
[Tips] - Tối ưu seo blogspot search labelSearch label hay còn gọi là trang nhãn trong blog, những người làm seo blogspot thì ít ai nghĩ đến việc seo trang này. ...
Icon CommentsIcon Comments