Sau đây mình sẽ hướng dẫn các bạn cách tạo một menu cố định cho blogspot luôn luôn hiện khi các bạn kéo trang từ trên xuống dưới nhé.

Bước 1:

- Các bạn vào phần chỉnh sửa mẫu của blog.
- Vào phần chỉnh sửa HTML
- Tìm thẻ: ]]></b:skin>
- Dán code sau và trước thẻ ]]></b:skin>:
/* PHAMDUYKHANH MENU */
#phamduykhanh_menu{background-color:#2F2E2C;height:34px;width:100%;min-width:960px;position:fixed;top:1;left:0;z-index:9999;overflow:hidden;border-top:0 solid #00AFF9;height:34px;width:100%;min-width:960;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #00AFF9;}
#phamduykhanh_menu ul{list-style:none;margin:auto;width:960px}
#phamduykhanh_menu ul li{float:left;}
#phamduykhanh_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:12px;font-family:Arial;text-shadow:0px -1px 0px
#0f669f;display:block;text-decoration:none;border-right: 0px solid #00AFF9;border-left:0px solid #00AFF9;}
#phamduykhanh_menu ul li a:hover{background-color:#FF0000;color:yellow;}  
Hình minh họa như sau:

Minh họa bước 1

Bước 2: 

- Vào phần bố cục Blog.
- Chọn thêm tiện ích
- Thêm tiện ích HTML/Javascript.
- Dán code sau vào khung nội dung của tiện ích HTML/Javascript.
<div id='phamduykhanh_menu'>
    <ul>
    <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjBaWCoj_StZvEd2_PtviCEiOaKZUJm0UafObAbn_v0DijCVp357asuV4aQozOtsWcM42sa8QQqgIEG95ZR9xo7p-Qacz1iSAOoPzAv7Ndisw4-v_sYHn47LHXJkwcu0weTGQdI9QyzUU/s1600/home_icon.gif' style='padding:0px;'/></a></li>
    <li><a href='http://www.duongdoi8x.com/search/label/Tin%20t%E1%BB%A9c%20-%20S%E1%BB%B1%20ki%E1%BB%87n'>TIN TỨC - SỰ KIỆN</a></li>
    <li><a href='http://www.duongdoi8x.com/search/label/T%C3%ACnh%20y%C3%AAu'>TÌNH YÊU</a></li>
    <li><a href='http://www.duongdoi8x.com/search/label/Th%C3%B4ng%20%C4%91i%E1%BB%87p%20cu%E1%BB%99c%20s%E1%BB%91ng'>CUỘC SỐNG</a></li>
    <li><a href='http://www.duongdoi8x.com/search/label/Clip%20hot'>CLIP HOT</a></li>
    <li><a href='http://www.duongdoi8x.com/search/label/Ngh%E1%BB%87%20thu%E1%BA%ADt'>NGHỆ THUẬT</a></li>
    <li><a href='http://www.duongdoi8x.com/search/label/Club%20th%C6%A1%20th%E1%BA%A9n'>THƠ THẨN</a></li>
    <li><a href='http://www.duongdoi8x.com/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt%20m%C3%A1y%20t%C3%ADnh'>THỦ THUẬT MÁY TÍNH</a></li>
    <li><a href='http://www.duongdoi8x.com/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt%20web'>THỦ THUẬT WEB</a></li>
    </ul>
    </div>
Minh họa bước 2


- Chú ý: Thay link  của bạn vào sau <a href=link của bạn nhé.

Sau đó lưu lại

Bước 3: 

- Lưu lại bố cục thế là xong.
- Kết quả là đây:

Kết quả

Cuối cùng: Chúc các bạn thành công với việc thêm Menu này vào blog cho tiện.
Have Fun!
Tác giả: Phạm Duy Khánh

Đăng nhận xét Blogger Disqus

  1. Tks nhé. Đang cần cái này cho giàn blog mới của cty để phát triển. :)

    Trả lờiXóa
  2. Đang cần cái này cho blog của mình. tks nhé

    Trả lờiXóa
  3. Rất cám ơn sự chia sẻ hữu ích này. :)

    Trả lờiXóa
  4. ban cho minh xin cai template trang nay duoc ko?

    Trả lờiXóa
  5. Được bạn nhé. Bạn để lại mail mình gửi cho. Hiện tại mình đang chỉnh sửa vài thứ nữa đó. :)

    Trả lờiXóa


  6. /* CAOCONGKIEN MENU */

    #caocongkien_menu{background-color:#3173f1;height:34px;width:100%;min-width:960px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-top:0 solid #9932CC;height:34px;width:100%;min-width:960;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:2px solid #9932cc;}
    #caocongkien_menu ul{list-style:none;margin:auto;width:960px}
    #caocongkien_menu ul li{float:left;}
    #caocongkien_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:12px;font-family:Arial;text-shadow:0px -1px 0px
    #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
    #caocongkien_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:yellow;}


    Bài gốc: http://caocongkien.blogspot.com/2013/10/tao-menu-co-inh-sticky-menu-cho-blogspot.htm

    Trả lờiXóa
    Trả lời
    1. Bài viết này hay phết. Nhưng lấy bên bạn về hướng dẫn thì phải. Dù sao cũng nêu cao tinh thần chia sẻ cho anh em. :)

      Xóa

 
Top