Thư viện

Trải nghiệm

Chủ Nhật, tháng 10 06, 2013

Tạo Sticky cho nhiều Widget của blogspot

Sticky này cho dù bạn kéo chuột đến vị trí nào đi nữa thì tiện ích của bạn vẫn luôn xuất hiện tại vị trí mà bạn muốn, trong bài viết này là trên đầu của blog.

Chia sẻ:
Tạo Sticky cho nhiều Widget của blogspot
Thông thương khi các bạn kéo thanh cuộn xuống để xem phần dưới của blog thì các phần trên nó sẽ bị ẩn đi. Vậy nếu muốn hiển thị một tiện ích có ID bất kỳ khi bạn kéo chuột xuống dưới blog dạng Sticky thì phải làm thế nào.

Bài viết này namkna sẽ hướng dẫn các bạn làm điều đó tạo Sticky cho một widget có Id bất kỳ, Bạn có thể áp dụng nó cho các widget chứa các nút like của các mạng xã hội hay hộp đăng ký nhận tin của bạn, hoặc đơn giản hơn là cho một menu, một banner quảng cáo mà bạn muốn. Với cách tạo Sticky này cho dù bạn kéo chuột đến vị trí nào đi nữa thì tiện ích của bạn vẫn luôn xuất hiện tại vị trí mà bạn muốn, trong bài viết này là trên đầu của blog.

Bạn có thể xem demo ngay trên blog của mình hãy kéo chuột xuống dưới chân trang và chú ý thanh menu ở trên đầu blog mình cũng di chuyển theo và không hề biến mất nha.

» Bước 1: Xác định ID của Wdget tiện ích cần tạo hiệu ứng Sticky

1.1- Vào Bố cục (Layout) -> Nhấp vào Chỉnh sửa (Edit) trên Widget cần áp dụng tiện ích Sticky.
Tạo Sticky cho nhiều Widget của blogspot
1.2 - Một cửa sổ Popup bật lên, bạn nhìn vào phía trên góc phải (gần thanh tiêu đề) sẽ thấy dòng có dạng tương tự sau: …null&widgetId=HTML10 (trong trường hợp này là widget HTML10, đối với widget khác sẽ có ID khác)
Tạo Sticky cho nhiều Widget của blogspot
- Sau khi xác định được Id của tiện ích bạn đóng cửa sổ popup đó lại và tiến hành bước tiếp theo nha.

» Bước 2: Thêm code để tạo hiệu ứng Sticky  cho widget mà bạn muốn

Sau khi xác định được Id của tiện ích cần tạo hiệu ứng Sticky  bạn tiếp tục thực hiện các bước sau để dán Sticky  cho tiện ích đó nha:
2.1- Đăng nhập vào blog của bạn.
2.2. Vào phần Mẫu (Template) => Chọn Chỉnh sửa HTML (Edit HTML)
2.3- Chèn đoạn code bên dưới vào trước thẻ </head> .
<script>
// Sticky widget by namkna.blogspot.com
// Tutorial at http://namkna.blogspot.com/2013/10/tao-sticky-cho-nhieu-widget-cua-blogspot.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML10"); 
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style> 
» Tùy chỉnh:
  • Thay HTML10 thành Id widget  mà bạn muốn hiển thị trong chế độ Sticky. Trong trường hợp này id của mình là HTML10 bạn hãy thay đổi lại nó cho phù hợp với tiện ích mà bạn muốn áp dụng nha;
  • Bạn cũng có thể tùy chỉnh lại màu săc, cỡ chữ và cị trí dính banner bằng cách thay đổi các thuộc tính nằm trong class .bs_sticking.
2.4- Lưu mẫu lại và vào blog kiểm tra lại xem tiện ích mà bạn vừa áp dụng có hiển thị khi kéo chuột xuống chân của blog không nha.

58 nhận xét:

  1. nó không hoạt động anh Nam ơi, nó không tự động dính vào, anh xem lại dùm em nhé!

    Trả lờiXóa
  2. ak em làm được rồi, phải là đặt trước thẻ(/body) chứ hk phải (/head) anh ak!

    Trả lờiXóa
    Trả lời
    1. Không hẳn đâu tùy từng template thôi em ak. Như template của em thì đặt ở đóa nó mới hoạt động.

      Xóa
  3. sẵn anh cho em hỏi luôn, em muốn 1 sticky ở trang chủ và 1 ở trang bài viết thì làm sao anh Nam nhỉ?

    Trả lờiXóa
    Trả lời
    1. 1- Để tạo ở chỉ ở trang chủ thì em thêm đoạn code trong bài viết vào giữa 2 thẻ bên dưới :

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      </b:if>

      2- Để tạo ở chỉ ở trang bài viết cụ thể thì em thêm đoạn code trong bài viết vào giữa 2 thẻ bên dưới :

      <b:if cond='data:blog.url == "URLbài viết"'>

      </b:if>

      Xóa
  4. Nếu muốn nó dừng ở một điểm nào thì sao anh Namkna?

    Trả lờiXóa
  5. Chào bạn Nam Ta. Mình có làm 1 cái Blog dùng giao diện của ISM. Nhưng phần blog page bị lỗi hiển thị. Bạn có thể giúp mình được không.
    Link page bị lỗi của mình là: http://engclip.blogspot.com/p/testing.html
    Còn đây là Code mình đang dùng: https://docs.google.com/file/d/0BxjSJkpiSMmIOWU2eWV2NEs1Z1E/edit?usp=drive_web
    Nam Ta có thể chỉ cho mình là lỗi ở đâu để mình sửa không, Cảm ơn nhiều và chúc Blog bạn ngày càng phát triển

    Trả lờiXóa
    Trả lời
    1. Bạn thấy phần main nó bị biến đổi phải không chỉ cần chú ý thẻ width trong các đoạn code sau: #main-wrapper

      Xóa
    2. Mình cũng thử sửa đổi width. Nhưng vẫn không ổn :(
      Giao diện của temp này nó hơi khác ở chỗ là ở trang chủ thì là 3 cột. Nhưng vào trang post thì lại còn 2 cột.
      Mà cái right sidebar ở trang chủ thì 195px. Nhưng sang trang post thì nó lại biến thành 320px.
      Cho nên mình đã thử sửa width thì lại được cái nọ, mất cái kia.
      Mình không biết cái này có liên quan gì đến js không nữa. Mình cũng đã báo lỗi này cho bên thiết kế rồi (khoảng 2 tuần trước) họ cũng xác nhận là có lỗi nhưng mà chưa có Ver 2.
      Link temp gốc: http://www.templateism.com/2013/07/videoism-blogger-template.html
      Mình thì không biết nhiều về code, chỉ sửa được 1 chút HTML với CSS.
      Nam Ta có thể sửa giúp mình trực tiếp trên blog của mình không. Mình sẽ setup bạn làm admin có được không?
      Rất mong nhận được sự giúp đỡ :x
      Trước mình hay nhờ bác Hồng Hòa Vi. Nhưng blog bác ấy nghỉ rồi, lại chuyển sang WP.

      Xóa
    3. Thứ nhất: Như bạn nói phần quảng cáo ở trang chủ nó có chiều rộng chỉ 195 px như vậy khi xem bài viết nó sẽ hiển thị bị lệch là đúng, Ta hoàn toàn có thể điều chỉnh lại độ rộng của phần đó, Trường hợp này đoạn CSS đó nó nằm ở sau thẻ b:skin của bạn.

      Tất nhiên là được bạn có thể gửi lời mời cho mình qua địa chỉ mail là:
      tavannam01@gmail.com

      Xóa
    4. Mình đã sửa lỗi đó bằng cách ẩn rsidebar ở các trang statics rồi. Rất cảm ơn Nam đã nhiệt tình giúp đỡ nhé. Chúc blog ngày càng phát triển nhé. Mình rất hay dùng thủ thuật của Nam đấy. Hi

      Xóa
    5. Rất vi vì bạn đã ủng hộ blog mình, hy vọng trong thời gian tới bạn tiếp tục ủng hộ blog mình và có những góp ý để blog của mình ngày càng phát triển hơn nha.

      Xóa
    6. Nam ơi, hôm nay mình mới để ý cái temp hôm trước mình nhờ Nam sửa vẫn dính 1 lỗi. Đấy là cái submenu khi rê chuột vào ấy. Nó lại bị ẩn dưới video box.
      Mình đã thêm thuộc tính z-index rồi mà vẫn không được. Nam có cách nào không
      Ps: trang mình là
      http://engclip.blogspot.com/2013/09/bai-so-chin.html

      Xóa
    7. Mình kiểm tra thấy nó vẫn hiện trên video mà bạn đang dùng trình duyệt nào thế :)

      Xóa
  6. @Komzon R'leg : bạn chú ý các phần CSS ấy, phần quảng cáo bên cạnh theo mình nền để các tiện ích vào *_* blog video thế này sao hấp dẫn dc :D

    Trả lờiXóa
    Trả lời
    1. @Thang Pham: Mình định làm site học tiếng Anh qua video thôi ^^

      Xóa
  7. Nam Kha ơi blog hồng anh của cô có hiện tượng . ở trang chủ cô để 10 bài mà lại chỉ hiện ở trang 1 có 3 bài . tích vào trang thứ 2 lại thấy đủ 9 bài là sao nhỉ . hiện tượng này vừa mới bị như vậy . có cách khắc phục không ? cô nhờ cháu chỉ giúp

    Trả lờiXóa
    Trả lời
    1. Nguyên nhân chính là do cô không để dấu ngắt cô ak.

      Dung lượng feed cho phép là 516kp nếu cô không để dấu ngắt thì một bài viết đã chiếm hết bằng đó nên nó chỉ có thể hiển thị một bài đó,

      Nếu cô đang để hiển thị 10 bài viết thì cô chỉnh sửa khoảng 20 bài mới nhất được đằng gần đây và thêm dấu ngắt vào cho nó cô nha, Cô có thể xem hình ảnh động sau để hiểu rõ cách thêm dấu ngắt cho một bài viết nha cô XEM HÌNH ẢNH MINH HỌA

      Xóa
  8. Lâu rồi mới thấy anh Nam xuất hiện

    Trả lờiXóa
    Trả lời
    1. Uk giờ đi làm rồi nên thời gian cũng có phần eo hẹp hơn so với trước đây còn thất nghiệp mà e :)

      Xóa
  9. anh Nam ơi cho em hỏi đối với blog này của em thì id của thanh menu là gì vậy anh, vì em muốn tạo sticky cho menu. hôm bữa em nhớ anh có chia sẽ một bài mak em quên là nó nằm ở đâu rồi.

    Trả lờiXóa
    Trả lời
    1. có 2 loại chủ đạo bên dưới :

      id='tombolmenu'



      class='menu'

      Xóa
    2. anh Nam ơi giúp em với em làm hoài mak cái menu nó ko chịu dính vào khi kéo chuột, em gửi template qua gmail anh giúp em thêm vào nhé! thank anh Nam.

      Xóa
    3. anh Nam check gmail nhé, khi nào xong thì comment cho em nhé!

      Xóa
    4. Oke lát anh sẽ check mail rồi trả lời em :)

      Xóa
    5. anh Nam ơi check mail chưa vậy anh?

      Xóa
  10. I am really impressed along with your writing abilities
    its very nice
    its very infomatics web like that

    Hindi Songs Download Free
    funmaza

    Trả lờiXóa
  11. em đã gửi vào mail anh rồi, anh check mail dùm em nhé. nội dung em đã trình bày trong mail rồi ấy.

    Trả lờiXóa
  12. nếu được thì anh trả lời sớm dùm em nhé. :v

    Trả lờiXóa
    Trả lời
    1. Ủa anh trả lời em trong mail lâu rồi mà em kiểm tra hòm thư spam xem sao nha em :)

      Xóa
  13. xin lỗi anh, chứ em vẫn chưa nhận được mail từ anh Nam, anh Nam gửi lại vào địa chỉ này dùm em nhé: nhoxpro090@gmail.com
    cám ơn anh Nam nhé.

    Trả lờiXóa
    Trả lời
    1. em đã kiểm tra hết tất cả các hòm thư kể cả thư spam nhưng vẫn không có anh à.
      à mà địa chỉ là: nhoxpro090@gmail.com(số 090) anh Nam nhé.

      Xóa
  14. Trả lời
    1. Tại hòm thư của anh bị hack tấn công nên một số thư gửi đi không dến được địa chỉ em ak. Hôm nay kiểm tra mới phát hiện ra và lấy lại pass.

      Mẫu em gửi mới nhất cho anh lỗi rồi không sử dụng được em kiểm tra lại đi nha,

      Xóa
    2. ak, xui nhỉ, vậy anh lấy lại được pass chưa?
      lỗi rồi hả anh? sao kỳ vậy ta. vậy để em gửi lại, anh xem và giúp dùm em nhé. cám ơn anh ^-^

      Xóa
    3. Được rồi em ak. Vấn đề em bảo làm sticky hiện tại nó xung khắc với đoạn code bacjktotop nên chưa hoạt động được em ak.

      Xóa
  15. Mình chèn và tuy nhiên khi Sticky hoạt động thì độ rộng của nó lại lớn hơn Wdget tiện ích, kéo lên cũng ko trơ lại bình thường, chỉ có cách là load lại site thì trơ lại bình thường
    Blog mình đây: http://sieuhai24h.blogspot.com
    Thanks!

    Trả lờiXóa
    Trả lời
    1. Mình vào thì không thấy hiện tượng bạn nói bạn ak. Tiện ích HTML3 bạn chèn quảng cáo hoạt động rất oke đó mà :/.

      Xóa
  16. còn đối với tiện ích"PopularPosts1" thì làm sao vậy anh Nam?

    Trả lờiXóa
    Trả lời
    1. Em chỉ cần thay id nó vào đoạn sau:
      bs_makeSticky("PopularPosts1");

      Xóa
  17. em chen link anh thì nó hoạt động - và code quoảng cáo bidvertiser thì nó cũng hoạt dngj tốt - code adsen thì nó dính hăn trên luon-làm sao dc anh

    Trả lờiXóa
  18. Làm sao cho nó chỉ trượt 1 đoạn thôi a, VD nó trượt cách cuối trang 2000px thì không trượt nữa

    Trả lờiXóa
  19. làm thế nào để wiget nằm ở giữa vậy anh, em đang làm cái sticky cho navbar
    khanh98.blogspot.com

    Trả lờiXóa
    Trả lời
    1. Em xác định ID của widger ví dụ là HTML1

      dán đoạn bên dưới vào trước thẻ ]]></b:skin>

      #HTML1{margin: 0 auto}

      Lưu ý: Nó chỉ căn giữa trong phạm vi của vị trí đặt widget như: sidebar, main, header, footer,...

      Xóa
    2. không được anh ạ, anh kiểm tra giúp em. cái navbar1 anh nhá, em muốn nó ở giữa kiểu như cái menu màu xanh của anh.

      Xóa
    3. Với thanh đó thì e chỉ cần dùng đoạn code:

      #Navbar1{
      position: fixed;
      top: 0;
      left: 0;
      }

      không cần dùng thủ thuật trên.

      Xóa
    4. em muốn có 1 cái menu giống cái màu xanh lá cây như anh thì phải làm sao.
      làm sao để nó luôn ở một chỗ và căn giữa như vậy, có thể áp dụng kiểu của menu trên vào cái navbar của em ko(ở yên một chỗ và căn giữa)

      Xóa
    5. Muốn nó căn giữa em sửa thành:

      #Navbar1{
      position: fixed;
      top: 0;
      left: 0;
      margin:0 auto;
      }

      Tương tự nếu muốn menu như a e chỉ cần thêm một menu xác định id hoặc class bao ngoài nó rồi thêm đoạn mã có dạng như bên dưới:

      ID hoặc class{
      position: fixed;
      top: 0;
      left: 0;
      margin:0 auto;
      }

      Ví dụ em thêm menu bảng xổ dọc tại đây thì chỉ cần thêm đoạn bên dưới:

      #topmenu{
      position: fixed;
      top: 0;
      left: 0;
      margin:0 auto;
      }

      Xóa
  20. em lại hỏi anh tiếp, em muốn có được cái khung như trang này http://khanh98.blogspot.com/2014/07/viet-ten-len-lon-coca-cola.html
    từ file này
    https://drive.google.com/file/d/0B2w8P_cE_NUybElXbU1RelcxUWs/edit?usp=sharing
    thì phải làm sao ???
    cảm ơn anh nhiều !!!

    Trả lờiXóa
    Trả lời
    1. Mẫu e đưa chỉ là file zip nên anh không thể xem được hình ảnh đó.

      Xóa
    2. Nó ko phải là hình ảnh, trong đó có một số file php để tạo thành cái khung kia, anh mở ra thử xem

      Xóa
    3. Khung dó e phải hiểu về php, để khai báo các thuộc tính, chứ một bài viết không thể hướng dẫn hết được đâu em ak.

      Xóa
  21. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa