"Tạo Slide Out Navigation cho Blogspot bằng JQuery"

(Traidatmui.com) – Hôm nay mình chia sẽ cùng bạn cách tạo thanh Navigation ẩn hiện cho Blogspot. Với thủ thuật này bạn có thể tạo cho mình thanh Navi ẩn ở bên trái của blog và với hiệu ứng Slide Out khi bạn rê chuột vào Navi này thì nó sẽ hiện ra và trở về bạn đầu khi bạn lấy chuột ra. Thủ thuật này sẽ sử dụng JQuery kết hợp với CSS để tạo hiệu ứng, các bước thực hiện cũng khá đơn gian. Bạn có thể xem Demo để thấy rỏ hơn hiệu ứng này.

Hình ảnh minh họa
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script src="http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 100px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 95px;
height: 70px;
background-color:#cfcfcf;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
background-image: url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TaaPYUHannI/AAAAAAAAANo/UjBtgeg8R0g/home.png);
}
ul#navigation .about a {
background-image: url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TaaPYXUF9TI/AAAAAAAAANg/bfYHEKhkWHM/id_card.png);
}
ul#navigation .search a {
background-image: url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TaaPZKjAk8I/AAAAAAAAAN4/VAoM_IqZFTE/search.png);
}
ul#navigation .podcasts a {
background-image: url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TaaPYbfWPLI/AAAAAAAAANw/Ag2WAN435W8/ipod.png);
}
ul#navigation .rssfeed a {
background-image: url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TaaPY2lCMCI/AAAAAAAAANs/tYD4GiXS8X4/rss.png);
}
ul#navigation .photos a {
background-image: url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TaaPYQRCwLI/AAAAAAAAANk/_mtSPUvO7U0/camera.png);
}
ul#navigation .contact a {
background-image: url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TaaPYkdzuhI/AAAAAAAAAN0/VeF8lb_A2ik/mail.png);
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<ul id="navigation">
<li class="home"><a href="URL link" title="Home"></a></li>
<li class="about"><a href="URL link" title="About"></a></li>
<li class="search"><a href="URL link" title="Search"></a></li>

<li class="photos"><a href="URL link" title="Photos"></a></li>
<li class="rssfeed"><a href="URL link" title="Rss Feed"></a></li>
<li class="podcasts"><a href="URL link" title="Podcasts"></a></li>
<li class="contact"><a href="URL link" title="Contact"></a></li>
</ul>

» Chỉnh sửa code: bạn thay (URL link) thành các link cho các thư mục trong Navi này, tương ứng với các lớp (dòng màu tím than) ở trong code.

8. Save tiện ích lại

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

Tham khảo tympanus.net

Xem khác cùng chủ đề

12 nhận xét | Viết lời bình

5/11/2011 03:05:00 SA Trả lời

idontknow bị lỗi thế này >> http://3.bp.blogspot.com/-M6YpHEpkf4c/TcpfQhrPChI/AAAAAAAABOA/rPexmpIjY5E/s320/error.png

5/11/2011 03:06:00 SA Trả lời

Các icon không ngay hàng mà lại xếp chồng lên nhau

Admin
5/11/2011 11:08:00 CH Trả lời

Bạn phải để mình xem code của bạn đã chỉnh sửa thế nào mới có thể giúp bạn sửa lỗi được bạn ah!

5/12/2011 12:19:00 SA Trả lời

thực hiện y như hướng dẫn, áp dụng cho tem khác thì ok,nhưng temp hiện tại bị chất chồng.mà không sao, tớ để lại chỉ còn 3 cái thì êm xui lleu

5/12/2011 12:40:00 SA Trả lời

Dường như bị lỗi ở bước chèn widget ấy

Admin
5/12/2011 12:42:00 SA Trả lời

Bạn thử thêm thuộc tính display: block; vào ul#navigation { nhe!

5/13/2011 05:24:00 CH Trả lời

blogspot đã hoạt động trở lại, Test test votay

5/13/2011 05:26:00 CH Trả lời

byebye nhưng dữ liệu vẫn bị mất

Admin
5/13/2011 08:28:00 CH Trả lời

Không hiểu sao lần này nó lại bị mất một số nhận xét mới nữa. lacdau

Nặc danh
5/13/2011 09:49:00 CH Trả lời

hay qua

5/14/2011 07:39:00 SA Trả lời

thằng đó spam kìa, trảm ngay

Admin
5/14/2011 08:00:00 SA Trả lời

Chảm làm sao đây! Thôi tha thứ là hình phạt kinh khủng nhất mà. lleu

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang