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

Xin chào các bạn. Hôm trước tình cờ thấy được thủ thuật này của bác Tiểu Bảo Blog khá hay và chất nên hôm nay chia sẻ cho các bạn. Rất đơn giản thôi chỉ từ vài đoạn css là xong. Mời các bạn theo dõi bài viết.

HƯỚNG DẪN 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 rồi ~ chỉ trong 2 bước là bạn đã có một thanh cuộn tuyệt đẹp cho blog. Chúc các bạn thành công.

#NGUỒN:TIEUBAOBLOG