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

[ Luat1x1 ] Menu cho blog là chuyện rất nhiều blogger sôt ruột. Hôm nay mình sẽ hướng dẫn các bạn làm một menu khá độc đáo . 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 TẠI ĐÂY.

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/AVvXsEgopnC38v2RaKuHbw1N6ki29Xln4tPGgGEs2E6WxfDtHgTbE3V8ul14MV9H0qwT9W4XzaDIruE40FmAsLu5WafaMEAng8KmL-g3IEBZ3zVvOWWRhGijqBWraYjkBc2ZOioQLRekBwaLX7U/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/AVvXsEgZLyRGZuLHax3bxGW3bAbP5YGDG1I62_D5rR-LkMdNxNcgKrAGodeY2xVwpmBSYAsRlK6LfF3C-p2UwFB-fHhQAt2kmbCxtHG4tGkggKWTlgFJAGSam9nN7ERcoPx-HcP8MJr1mbceRpw/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/AVvXsEguJLZNQ6h4JzbkWm4eCmMrEJuZfdWPBYMOkk5GrJ_04A-EwieXcsOPbGUCHloMHWbexIpFiADtbHQ8RkQU0ITDXl4HxEOLSVgx4lNWlw0AaJRmZdArA81j0LRw47Ej-B6diQ7IlDbXqJo/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDxJdmwa1Q9ZlNz9fvPlvGt-lmnAlJH1Uma6j7oTUGMqVRFVjx6KY6rEoct5w4qX2iyhysgPWpuP2qhq2sx4v6PROP-YWsGQcmAYiK8P48iQNI7HoTWkKEsoHSkbeidxN-ih9eZU_raLQ/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/AVvXsEjV31bbA5ftucwa5gbzJsnt3TaK5Px9Z9EIZhvRARqn8nL4_oJiIC_6WLz0E027TPRuM0AKlc7y5IFtIkOdOz2SNqahlwat_V5LaUAFXWoFsjE6Ylr3kyBF_D5sAzl5M7QrqYTjNb_f76w/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

Nguồn Vngreenzone.com