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

™» CGC Blog «™ 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/AVvXsEhdrEzB6iidYNrPUfxgLMzNpPg1bReqPfOp-ZEku_VX-QVOBnddjSobUXgkg-0So04SCP2E69xMhOeh3rHC6jlnVZ-gQk16VFWifO7MGzXQMO2tiBv42Or5-N2CKBA6bbK1j46i42Q1bzc/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/AVvXsEh7SQvYDef44X92J1TMX24ftmVSxZnsdFf5oIWjSd7J0hf6xDFsXG5sRNazAxDL2EeU8rsxDb-dhsweUxzo5D4J_akpuD_tovxcNtt_G5IIPiNOyYH2o1JGKpWhujrZP0YZvC__sngvsms/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/AVvXsEjue804FDuYtAAM9yoU5GFWHLeIJBhmns0zOErjflncRd4EHBbjYRz1TZ4VI2TrG0tfMhMjza-oyCeuZuKbdDy89646iemhmjFdTnYMhlP1YbQcb_VGFbF15H9BNU8SOB6914Rf3AbV5BA/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl8IWkyrkaZiK_V8NVf3WtLe2ern8BSUenmZBETI8arF9-amtSO1ewozmqF6IICk7UjGb92HQxzKB-toI16n0-Nn-o5bw_QU4esIflf5x8-BdUyn3kq5bsA2KKOd-QXzA3HGD5qi-7vrI/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/AVvXsEg92t6B8o2zznK3034b32QBuhqHiFS1a-4_yutSeLwGVYSGnEdBCtPtHimP5qCiDDBd8LA_kKwQBfzEKo-kn2sp-PpeuQVtwYxSiuadm2VpM0SNm6hEm02pkE7mrz1kEeP9xv8DrVgldUs/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 : test-temp-vngreenzone.blogspot.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!

0 Bình Luận:

Đăng nhận xét

☺ Nội quy comments của CGC Forum :
1. Comments không được sử dụng lời lẽ thiếu văn hóa, ảnh hưởng xấu đến chính trị, tổ chức, cá nhân.
2. Không được sử dụng comments với mục đích spam.
Những comments làm trái quy định sẽ bị xóa...!
Xin cảm ơn các bạn đã đóng góp comments và tuân thủ nội quy của blog !
Notice by Admin

CGC Forum | Thủ Thuật