Tạo Thực đơn dọc nổi sử dụng jQuery cho blogspot

Đăng bởi Admin | 17/10/13 | 0 nhận xét

Tạo ra một hệ thống menu đẹp và tiện lợi là công việc mà mỗi blogger phải làm khi kiến tạo blog. Để tạo 1 thực đơn nổi xuất hiện ở bên cạnh blog, bạn hãy làm theo các bước sau:

Bước # 1: Đăng nhập vào Blogger , vào Layout

Thêm một tiện ích của HTML / JavaScript  

Sau đó thêm mã này vào nó: 

<div id="floatMenu" style="top: 350px; ">   <ul class="menu1">      <li><a href="#" onclick="return false;"> Home </a></li>   </ul>   <ul class="menu2">     <li><a href="#" onclick="return false;"> Table of content </a></li>     <li><a href="#" onclick="return false;"> Exam </a></li>     <li><a href="#" onclick="return false;"> Wiki </a></li>    </ul>   <ul class="menu3">     <li><a href="#" onclick="return false;"> Technical support </a></li>   </ul> </div>

Sau đó hãy nhấp Lưu

Bước # 2:
Đăng nhập vào Blogger , vào Mẫu -> Chỉnh sửa HTML

 Bước # 3:  Tìm (nhấn CTRL + F) đoạn mã này trong các mẫu:

]]></b:skin>

Dán đoạn mã dưới này vào trước nó:

#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}Và dán đoạn mã dưới này vào sau nó:

<script language='javascript' src='http://files-teckzest.bravehost.com/jquery.js'></script>
<script language='javascript' src='http://files-teckzest.bravehost.com/jquery.dimensions.js'></script>
<script language='javascript'>
$(document).ready(function(){
// code will go here
});

$(document).ready(function(){
$(window).scroll(function () {
// code will go here
});
});
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
// code will go here
});
});
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});

</script>

.,

Click Save Template

Bạn sẽ thấy 1 thực đơn nổi ở bên phải của trang web của bạn.

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

.,

                                                                                      Tham khảo: bdlab.blogspot.com