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>

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

» 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