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.
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)
- 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.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.
Nhận xét
bóc tem quả này...:D
Trả lờiXóanó 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óaak em làm được rồi, phải là đặt trước thẻ(/body) chứ hk phải (/head) anh ak!
Trả lờiXóaKhô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óasẵ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óa1- Để 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 :
Xóa<b:if cond='data:blog.url == data:blog.homepageUrl'>
và
</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"'>
và
</b:if>
Nếu muốn nó dừng ở một điểm nào thì sao anh Namkna?
Trả lờiXóaĐây là code đơn giản nên nếu muốn dừng ở một điểm thì em xem bài này nha:
XóaTạo banner dính (Sticky banner) với Javascript cho Blogspot - banner quảng cáo.
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.
Trả lờiXóaLink 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
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óaMình cũng thử sửa đổi width. Nhưng vẫn không ổn :(
XóaGiao 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.
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.
XóaTấ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
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óaRấ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óaNam ơ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.
XóaMì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
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@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@Thang Pham: Mình định làm site học tiếng Anh qua video thôi ^^
XóaNam 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óaNguyên nhân chính là do cô không để dấu ngắt cô ak.
XóaDung 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
Lâu rồi mới thấy anh Nam xuất hiện
Trả lờiXóaUk 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óaanh 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óacó 2 loại chủ đạo bên dưới :
Xóaid='tombolmenu'
và
class='menu'
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óaanh Nam check gmail nhé, khi nào xong thì comment cho em nhé!
XóaOke lát anh sẽ check mail rồi trả lời em :)
Xóaanh Nam ơi check mail chưa vậy anh?
Xóaanh Nam ơi!
XóaI am really impressed along with your writing abilities
Trả lờiXóaits very nice
its very infomatics web like that
Hindi Songs Download Free
funmaza
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óanếu được thì anh trả lời sớm dùm em nhé. :v
Trả lờiXóaỦ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óaxin 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
Trả lờiXóacám ơn anh Nam nhé.
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 à.
Xóaà mà địa chỉ là: nhoxpro090@gmail.com(số 090) anh Nam nhé.
đợi mail từ anh :V
Trả lờiXóaTạ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.
XóaMẫ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,
ak, xui nhỉ, vậy anh lấy lại được pass chưa?
Xóalỗ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 ^-^
Đượ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óaMì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
Trả lờiXóaBlog mình đây: http://sieuhai24h.blogspot.com
Thanks!
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óacòn đối với tiện ích"PopularPosts1" thì làm sao vậy anh Nam?
Trả lờiXóaEm chỉ cần thay id nó vào đoạn sau:
Xóabs_makeSticky("PopularPosts1");
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óaEm áp dụng nó để a kiểm tra nha.
XóaEm xem bài viết này nha: Sticky có điểm dừng cho blogspot
Trả lờiXóalàm thế nào để wiget nằm ở giữa vậy anh, em đang làm cái sticky cho navbar
Trả lờiXóakhanh98.blogspot.com
Em xác định ID của widger ví dụ là HTML1
Xóadá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,...
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óaVới thanh đó thì e chỉ cần dùng đoạn code:
Xóa#Navbar1{
position: fixed;
top: 0;
left: 0;
}
không cần dùng thủ thuật trên.
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.
Xóalà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)
Muốn nó căn giữa em sửa thành:
Xóa#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;
}
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
Trả lờiXóatừ 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 !!!
Mẫu e đưa chỉ là file zip nên anh không thể xem được hình ảnh đó.
XóaNó 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óaKhung 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óaNhận xét này đã bị tác giả xóa.
Trả lờiXóa