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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

12 nhận xét

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

    Trả lờiXóa
  2. Các icon không ngay hàng mà lại xếp chồng lên nhau

    Trả lờiXóa
  3. 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!

    Trả lờiXóa
  4. 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

    Trả lờiXóa
  5. Dường như bị lỗi ở bước chèn widget ấy

    Trả lờiXóa
  6. Bạn thử thêm thuộc tính display: block; vào ul#navigation { nhe!

    Trả lờiXóa
  7. blogspot đã hoạt động trở lại, Test test votay

    Trả lờiXóa
  8. byebye nhưng dữ liệu vẫn bị mất

    Trả lờiXóa
  9. 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

    Trả lờiXóa
  10. thằng đó spam kìa, trảm ngay

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

    Trả lờiXóa