"Tạo Slide Out Navigation hiển thị ở Top cho Blogspot bằng JQuery"

(Traidatmui.com) – Trước đây mình đã có dịp giới thiệu cùng các bạn một dạng menu với hiệu Slide Out nằm ở bên trái của blog với hiệu ứng khá thú vị (bạn xem tại đây). Và cùng với hiệu ứng Slide Out đó hôm nay bài viết này chia sẻ thủ thuật tạo Slide Out Navigation nằm ở đầu trang blog hay web của bạn. Hiệu ứng của nó không khác với bài viết trước nhưng vị trí của nó khác nhau, thủ thuật trước thay vì nó ló ra từ bên trái thì thủ thuật này hiệu ứng sẽ thả xuống từ phía trên.

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() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},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: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#cfcfcf;;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #AFAFAF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation li a:hover{
background-color:#fff;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
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">Trang chủ</a></li>
<li class="about"><a href="URL link" title="About">About Us</a></li>
<li class="search"><a href="URL link" title="Search">Tìm kiếm</a></li>
<li class="photos"><a href="URL link" title="Photos">Hình ảnh</a></li>
<li class="rssfeed"><a href="URL link" title="Rss Feed">RSS Feed</a></li>
<li class="podcasts"><a href="URL link" title="Podcasts">Podcasts</a></li>
<li class="contact"><a href="URL link" title="Contact">Liên hệ</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ủ đề

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

idontknow đã làm theo post trước nhưng bị..đứng hình, đơ như cây..kơ Cuoilon
trade.moigioiforex.com

6/14/2011 08:02:00 SA Trả lời

Anh VDinh ơi blog của em có giao diện gần giống như của anh,Phần bài đăng rộng 600,sidebar phải rộng 240.sidebarr trái 160,nhưng thanh sidebar bên phải của em nó lại cách phần bài đăng 1 khoảng lớn hơn nhiều so với sidebar trái anh ạ.Em mới làm blog nên hỏi hơi nhiều,anh thông cảm nha.Hix.Thanks anh nhiều

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

Em có thể chỉnh thuộc tính Margin trong lớp sidebar bên phải hay phần main nhỏ lại. Em tham khảo thuộc tính Margin hay Padding tại đây. Không sao, đây là anh muốn chia sẻ những gì mình biết, anh giúp được gì anh sẽ giúp trong khả năng của mình.

6/15/2011 08:19:00 SA Trả lời

A Dinh ơi anh hướng dẫn giúp em cách gắn tem ở cuối trang cho trang WEB giống như 1 số Website và của anh.Cái thanh Attribution ở cuối trang em đã xóa đi rồi và em muốn gắn tem mác blog của mình ở vị trí đó.

Admin
6/15/2011 05:44:00 CH Trả lời

Ý em là gắn tem cho phần bài đăng hay phần comment vậy em?

6/15/2011 05:50:00 CH Trả lời

Phần cuối trang ý anh.Vd như trang của nanh cái chỗ xó chữ website chạy tốt nhất với trình duyệt MozilaFireFox ý

Admin
6/15/2011 06:15:00 CH Trả lời

Việc đó anh thấy đâu khó gì đâu em, em thêm tiện ích HTML bình thường thôi em.

6/15/2011 09:56:00 CH Trả lời

Cái menu này cho được xuống cuối trang ko anh?

Admin
6/16/2011 01:51:00 SA Trả lời

Cái này anh chưa test thử, lúc nào rảnh anh test lại thành công anh chia sẻ cùng mọi người

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