+ Tận dụng tối đa không gian trống ở cuối thanh Sidebar.
+ Làm nổi bật một nội dung một Widget nào đó.
+ Giúp người dùng truy cập nhanh vào một nội dung nào đó.
+ Hay cố định một banner quảng cáo của các bạn.
+ ...v.v
Trên mạng có rất nhiều trang hướng dẫn nhưng hầu như tất cả các cách hướng dẫn đều làm cố định Widget ở cuối Sidebar. Bài này mình sẽ chia sẻ với các bạn thêm một cách nữa đó là cách làm cố định một Widget nằm ở bất kỳ vị trí nào trên Sidebar (Demo là Widget Namesilo của mình).
- Bước 2: Xóa phần code của các bạn trong Widget đó đi. Sau đó copy phần code bên dưới đây thay vào đó.
1. Làm Cố Định Widget Bất Kỳ Trên Sidebar:
- Bước 1: Các bạn vào trang quản trị Blogger của mình đến Bố cục và tìm Widget mà mình muốn cố định, nhấn vào chỉnh sửa rồi copy toàn bộ code của nó đem ra Notepad để tạm nhé. :)- Bước 2: Xóa phần code của các bạn trong Widget đó đi. Sau đó copy phần code bên dưới đây thay vào đó.
<div class="banner">
CODE CỦA BẠN
</div>
<script>
var $stickyHeight = 460; // chiều cao
var $padding = 80; // khoảng cách từ trên xuống khi cố định
var $topOffset = 2560; // khi bạn cuộn trang xuống 2560px Widget sẽ xuất hiện, các bạn có thể thay đổi cho phù hợp độ dài Sidebar của mình.
var $footerHeight = 100; // Địểm dừng của Widget,
tính từ chân lên
/* <![CDATA[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
var aOffset = $('#sticky').offset();
if($(document).height() - $footerHeight - $padding <
$(window).scrollTop() + $stickyHeight) {
var $top = $(document).height() - $stickyHeight - $footerHeight
- $padding - 185;
$('#sticky').attr('style', 'position:absolute;
top:'+$top+'px;');
}else if($(window).scrollTop() + $padding > $topOffset) {
$('#sticky').attr('style', 'position:fixed;
top:'+$padding+'px;');
}else{
$('#sticky').attr('style', 'position:relative;');
}
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]]> */
</script>
<div class="sticky" id="sticky">
CODE CỦA BẠN
</div>
<style>
div.sticky {
box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);
}
@media screen and (max-width: 990px){
div.sticky {
display: none;
}
}
@media screen and (min-width: 990px){
div.banner {
display: none;
}
}
</style>2. Làm Cố Định Widget Ở Cuối Sidebar:
Vậy để làm cố định Widget ở cuối Sidebar phải làm như thế nào?
Để làm điều này các bạn làm như sau:- Bước 1: Các bạn cũng vào trang quản trị Blogger của mình đến Bố cục và tìm Widget mà mình muốn cố định (Widget ở cuối Sidebar). Xác định Tên Widget (ID Widget) của Widget đó bằng cách nhấn vào chỉnh sửa sau đó xem Tên Widget ở cuối đường link của Widget đó sau dấu =. Như hình dưới Tên Widget là "HTML9"
</body>.
<script>
//<![CDATA[
StickyWidget("Tên Widget");
// enter your widget ID here
function StickyWidget(elem) {
var GCVN_sticky =
document.getElementById(elem);
var scrollee =
document.createElement("div");
GCVN_sticky.parentNode.insertBefore(scrollee, GCVN_sticky);
var width =
GCVN_sticky.offsetWidth;
var iniClass =
GCVN_sticky.className + ' GCVN_sticky';
window.addEventListener('scroll', GICO_sticking, false);
function
GICO_sticking() {
var rect =
scrollee.getBoundingClientRect();
if (rect.top
< 0) {
GCVN_sticky.className = iniClass + ' GICO_sticking';
GCVN_sticky.style.width = width + "px";
} else {
GCVN_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.GICO_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:relative9 !important;}
</style>
Các bạn chọn cách nào trong 2 cách trên?
Chúc các bạn thành công!
Facebook