by Yolks

17 Comments »

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/AVvXsEhztZE0yP-9km5sLb4gD85y7fYG7yFgWXicNXsSdvQk9DR0AJXm5WWddXc_tj5Ahcw7_d4Y0Mf7HDosJkCpMFSmwyDlVOrwCyrY8oZdcYarxImR6NvX6L8wH_SraLeVf_juMusbEgzvB04/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/AVvXsEjh2mcKS7pxCRmR_vIeRcClV7SBSbCioRBWuFPTJlxi84InL4LYcvipTmQ8A9FEiDIrxHU3w5pQfEgcUN2EDQ3L1rPIszUmD82LMROUskkdrQM2vGNvewf3NzXlVHwI0MIIiRYatCM6zxg/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/AVvXsEi9qJjqp5HglGqZeWqbynUy4yXzefTlRc5AHRvjOImBQSozeE716MtfcSy5DAgnok8_n0mrxf2iTbDFaZxUQgdLBPWpVcFr9PNPwRbw0kJWGxfleBcOfICj5EEJ5MfU4QxLEG3_-_XMys4/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWJRO76by4wBkrQzgeK9ZMRYdktAhQTiAAwgMk9U5dXW11W3tRqzldrChOODzFHrFJdQBGoS4zPbGnyeL-ygASQ1Cb9Oaj0GcIpSovIDa2UjmQWEyl9gzisWFGsprmDsc9-k6UmtpIkM8/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/AVvXsEiW4xRBvG7j4ckut6wj7u4pLV1Enn9aEqcQQnzTSgOXsVK1rskvNNz-z6VAHJKGGRy9dnRjFOiwaxpSJLTxlRT8XDYqbLMWdXTqAuozbd5Rd-iX1Hpg1k43A-rQQRDcmzHCDWLGfUs7R6Y/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.

17 Comments

Next Post »
« Previous Post

Leave a Reply