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

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.