CHIA SẺ 2 MẪU THANH CUỘN SCROLLBAR TUYỆT ĐẸP CHO BLOGSPOT

Bạn đã quá chán với thanh cuộn mặc định trên Blog của mình? Vậy thì hôm nay mình sẽ hướng dẫn các bạn đổi màu và làm đẹp thanh cuộn của blog nhé! rất đơn giản thôi chỉ từ vài đoạn css thôi, mời các bạn theo dõi bài viết chia sẻ 2 mẫu thanh cuộn scrollbar tuyệt đẹp cho blogspot, làm theo mình nào.

CÁC BƯỚC THỰC HIỆN

Bước 1: Các bạn chỉ việc lấy 1 trong 2 đoạn code dưới đây và chèn nó trước thẻ ]]></b:skin> thôi.
Bước 2: Sau khi chèn code xong các bạn click vào lưu chủ đề.

Mẫu 1

::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #b6e2fd), color-stop(0.20, #91bae4), color-stop(0.50, #8fbff0), color-stop(0.51, #6ba8e4), color-stop(0.75, #87c2fb), color-stop(1.00, #bcf4fd));
background: -webkit-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -moz-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -o-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -ms-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: linear-gradient(to bottom, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #2E9AFE;
}
::-webkit-scrollbar-thumb:active {
background: #555;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Mẫu 2

::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-color: #7577a9;  background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,
transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,
transparent 75%,transparent)
}
::-webkit-scrollbar-thumb:active {
background: #7D75A9;
}
::-webkit-scrollbar-track {
background-color: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

LỜI KẾT 

Vậy là xong 2 mẫu thanh cuộn cũng khá là đơn giản thôi không hiểu chỗ nào các bạn bình luận xuống phía dưới để mình giúp nha, thấy bài viết hữu ích đừng quên để lại nhận xét nhé! Chúc các bạn thành công.