Tạo Slide Out Navigation cho Blogspot bằng JQuery
2 thg 3, 2012
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ật1. Đăng nhập vào tài khoản Blogger2. 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://traidatmui-tips.googlecode.com/files/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>
Địa chỉ bài viết: http://www.traidatmui.com/2011/05/tao-slide-out-navigation-cho-blogspot.html#ixzz1nt2AZ0G0
Nguồn: TRAIDATMUI.com
Tags:
B advace,
B MENU,
Blogspot
» Bắt đầu thủ thuật
Bài đăng
01693148668
Ý kiến bạn đọc [ 0 ]
Ý kiến của bạn