Laman

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

31   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.
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
Sao Yolks thiếu cái nút Home. Khó điều hướng bà cố
- 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/
Bạn làm thiếu css rồi
@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... =="
This comment has been removed by the author.
Nút lên #top không hoạt động hả Yolks!
Update lại code cho các bạn để thể hiện tốt trên mọi trình duyệt
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ợ ạ!
Hì lớp 9 rùi mà còn phải mang khăn quàng đỏ hả Yolks hề hề
@Linh Dung Nhà trường bắt chứ em đây cũng ko muốn
@Cu0nglsf Chắc là do trùng css đó thôi
@Cu0nglsf Nếu có thì cho mình xem trước nhé
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 !
@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
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
@Quốc Vịnh Cho nó bí ẩn 1 chút , vậy nó có cái style riêng
@Nguyễn Văn Đức Em thấy nó làm dc rồi đó , hihi
:D sáng tạo vậy chú nhóc. Vote
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