Laman

Menu cố định 3 chức năng đỉnh cho blogspot

34   nhận xét

Lại 1 menu Yolks sẽ hướng dẫn cho các bạn vào ngay hôm nay . Thú thuật không gì tuyệt bằng menu trên . Với tính năng Scroll Lên/Xuống và tính năng tìm kiếm thì quả thật là 3 trong 1.

Chúng ta sẽ bắt đầu ngay cho nóng. Và tất nhiên Demo là blog Yolks.



1.Thêm css:
Thêm đoạn css sau đây trước ]]></b:skin> :
#nav{
  height:35px;
  border-bottom:1px solid #ddd;
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitpkKR5NOrmPapHopWRrx-1uwtdtW1PasCiQ7vyvTqafXthmDZb-1d-IoB6YdO21A19mMl0uyKT5fr6JuJALOQOwuQNUd0XioEqObSS-OL1G-xjX2s6UZk54Bt3rMiFpRbBf2RdzUqsqI/s1600/nav.png) repeat-x center left;
  z-index:999999;
}
#nav ul{
  height:25px;
  list-style:none;
  margin:6px auto 0px auto;
  width:600px;  
}
#nav ul li{
  display:inline;
  float:left;
  margin:0px 2px;
}
#nav a{
  font-size:11px;
  font-weight:bold;
  float:left;
  padding: 2px 4px;
  color:#999;
  text-decoration: none;
  border:1px solid #ccc;
  cursor: pointer;
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI_KtM2rDVikIflqQllYZ5nYwLzhsAicH4uvq-nY25E8CgSL4JHpC-hO4W5ADINidwE8Z0EWfxuJnUcrYb2pA9JfiMQDIqxF1xu2vpWNlxYMrEQ1W3bFC9A2WkjxaCF7N-5s1xOk3VosY/s1600/overlay.png) repeat-x center left;
  height:16px;
  line-height:16px;
}
#nav a:hover{
  background:#D9D9DA none;
  color: #fff;
}
#nav a.top span, #nav a.bottom span{
  float:left;
  width:16px;
  height:16px;
}
#nav a.top span{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1-8bxqu_jUy6Ug6g0YykXnrUFdaQvACXgF9oJi4_2Sc1AzqTVepEl6962ZUxo3zpM6-5XhLyyT1PuHY3irhmVvi4aaoLDfIEAUn1j7UZF5vni1f-iBgQIVLdQXIsQAIQSgNnkV3bmYeQ/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN9C_0KagCK4LeJz4DFcONJV5eDd1_he555GzKyuUyaExcBVyr5phlj-gvsbXVZtAwACID4EglCdsW-3PwKO_gJR2oMF6vRHbUqkxx0IQ5FY9czeZkvrmqFTtzwt0yNcP6Y-Up6UVaCDk/s1600/bottom.png) no-repeat center center;
}

#nav ul li.search{
  float:right;
}
#nav input[type="text"]{
  float:left;
  border:1px solid #ccc;
  margin:0px 1px 0px 50px;
  padding:2px 2px 2px 2px;
}
input.searchbutton{
  border:1px solid #ccc;
  padding:1px;
  cursor:pointer;
  width:30px;
    height:22px;
  background:#E8E9EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfkyvxhUhIGdgnuVPxFcyvjfqn8smMHX4dOxpCnTwkUpB55tjDebZE5PjosWHn-Uk41uAQi8akep9P4X639rpxMp63KGyUouhSMWCZrwLeSmBD380Sjd5pbxJGCabRB_B25ev2gtAkJgU/s1600/search.png) no-repeat center center;
}
input.searchbutton:hover{
  background-color:#D9D9DA;
}

2.Thêm html:
Thêm đoạn thẻ html trên đoạn sau <body> :
<div id='top'/>
<div id='nav'>
 <ul>
 <li><a class='top' href='#top'><span/></a></li>
 <li><a class='bottom' href='#bottom'><span/></a></li>
 <li><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
 <li><a href="Link 1 ">Tên link 1</a></li>
 <li><a href="Link 2 ">Tên link 2</a></li>
 <li><a href="Link 3 ">Tên link 3</a></li>
 <li><a href="Link 4 ">Tên link 4</a></li>
 <li><a href="Link 5 ">Tên link 5</a></li>
 <li><a href="Link 6 ">Tên link 6</a></li>
 <li class='search'>
<form action='/search' class='left form' method='get'>
<input class='left text gray' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Từ Khóa Tìm Kiếm&quot;;}' onfocus='if (this.value == &quot;Từ Khóa Tìm Kiếm&quot;) {this.value =&quot;&quot;;}' type='text' value='Từ Khóa Tìm Kiếm'/>
  <input class='searchbutton' type='submit' value=''/>
</form>
 </li>
 </ul>
</div>

3.Thêm javascript:

Đặt đoạn code sau vào trước </body>
<script type='text/javascript'>
//<![CDATA[      $(function() {
        $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                        $('#nav').stop().animate({'opacity':'0.2'},400);
                    else    
                        $('#nav').stop().animate({'opacity':'1'},400);
                });
                
                $('#nav').hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'1'},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'0.2'},400);
                        }
                    }
                );
      });
    //]]>
</script>
<div id='bottom'/>
Đoạn code trên để sử dụng scroll lên/xuống.
Chúc các bạn thành công.

Pig

14 October, 2011 16:49

trông cũng khá bắt mắt nhưng nội dung của menu thì ít người kích vào đó lắm, chỉ có mỗi khung tìm kiếm và Home page là hay dùng

Huynh Nhat Ha

14 October, 2011 22:43

Sao Yolks thiếu cái nút Home. Khó điều hướng bà cố

Unknown

14 October, 2011 23:32

- Aaaaaa... gỡ cái searchbox cũ ra rồi mà vẫn không làm được, cứu mình với Yolks ơi :(

~> http://www.rs-4u.co.cc/

Yolks

15 October, 2011 09:17

Bạn làm thiếu css rồi

Unknown

15 October, 2011 10:11

@Yolks - CSS để trước ]]> nó không nhận mới đau, giờ làm được rồi mà menu nó không chịu fade đi... =="

Yolks

15 October, 2011 10:16

This comment has been removed by the author.

ABV

15 October, 2011 17:48

Nút lên #top không hoạt động hả Yolks!

Yolks

15 October, 2011 21:15

Update lại code cho các bạn để thể hiện tốt trên mọi trình duyệt

ABV

15 October, 2011 23:09

Lúc ở trên cùng của blog, nó che mất 1 phần của header, làm cho logo với header right bị mất 1 phần đó vợ ạ!

ABV

15 October, 2011 23:17

Hì lớp 9 rùi mà còn phải mang khăn quàng đỏ hả Yolks hề hề

Unknown

16 October, 2011 06:52

ec ! thêm cái menu xong mất cái menu cũ rồi cho mất cai logo lun...

Unknown

16 October, 2011 06:57

để dành có temp mới thì xài menu này

Yolks

16 October, 2011 07:12

@Linh Dung Nhà trường bắt chứ em đây cũng ko muốn

Yolks

16 October, 2011 07:13

@Cu0nglsf Chắc là do trùng css đó thôi

Yolks

16 October, 2011 07:13

@Cu0nglsf Nếu có thì cho mình xem trước nhé

VanLinhEx

17 October, 2011 07:36

Cái này hay , áp dụng liền :D
Temp này đơn giản mà đẹp quá nhỉ , phần comment-block cho cách qua bên phải 1 tí là chuẩn luôn !

Yolks

17 October, 2011 14:52

@VanLinhEx Em cố tình để nó như thế cho nó như bị cắt 1 miếng chìa vô ^^ mà chắc nghe lời a

Vịnh

17 October, 2011 20:48

Học sinh lớp 9! Hihihih.... nhìn cái ảnh là bít ràu! sao ko up cái nào nhìn rõ hơn một chút đi. trời

Yolks

17 October, 2011 21:51

@Quốc Vịnh Cho nó bí ẩn 1 chút , vậy nó có cái style riêng

Yolks

18 October, 2011 11:30

@Nguyễn Văn Đức Em thấy nó làm dc rồi đó , hihi

Unknown

20 October, 2011 13:44

:D sáng tạo vậy chú nhóc. Vote

Hoàng huệ

01 November, 2011 15:25

củm ơm anh.e làm dc rồi /hy
Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D

Subscribe to: Post Comments ( Atom )