Стили полосы прокрутки Blogger
Если вы хотите настроить полосу прокрутки Blogger, чтобы придать вашему блогу привлекательный вид, то этот список позволит вам сделать это с помощью простого CSS. Фактически, у вас также будет несколько стилей прокрутки для Blogger, которые вы сможете реализовать в своем блоге всего за несколько кликов. Возможно вы уже видели, что многие такие как Google и Facebook, используют свои собственные полосы прокрутки на своем веб-сайте. Соответственно вы также можете сделать свой блог выглядеть иначе с этой маленькой модификацией.
На самом деле уникальный внешний вид важен для улучшения работы вашего блога. Реализация одного из следующих стильных дизайнов полос прокрутки Blogger даст дополнительное улучшение общей красоты вашего блога. На самом деле если вы не веб-дизайнер, вы можете просто воспользоваться любым из следующих стилей полосы прокрутки Blogger. Более того, я предложу удивительный инструмент для создания собственной полосы прокрутки в конце этого поста. Теперь давайте перейдем к делу.
Как настроить панель прокрутки Blogger с помощью CSS?
Настраивать полосу прокрутки браузера по умолчанию очень легко. На самом деле, большинство сторонних разработчиков шаблонов Blogger не реализуют персональную полосу прокрутки в своем шаблоне. Таким образом, вы должны сделать это самостоятельно. Просто следуйте следующей пошаговой инструкции:
1. Прежде всего, войдите в свою учетную запись Blogger.
2. Перейдите в раздел «Тема»> «Изменить HTML» и найдите конечный код «]]></b:skin>».
3. Возьмите нужный код стиля полосы прокрутки Blogger из списка ниже и вставьте его прямо над «]]></b:skin>».
4. Наконец, нажмите кнопку «Сохранить тему» и зайдите в свой блог, чтобы увидеть полосу прокрутки в действии.
Список стильных полос прокрутки Blogger:
Обычно мы видим серую полосу прокрутки по умолчанию для многих современных браузеров, таких как Google Chrome, Firefox, Microsoft edge и т. Д. Мы собираемся изменить это. Просто выберите любой стиль полосы прокрутки из этого списка и поместите его в блог Blogger.
Стиль полосы прокрутки 1:
КОД
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #ecf400;
background: #BA8B02;
background: -webkit-linear-gradient(to right, #181818, #BA8B02);
background: linear-gradient(to right, #181818, #BA8B02);
}
::-webkit-scrollbar-thumb:hover {
background: #333;
}
::-webkit-scrollbar-thumb:active {
background: #000000;
}
Это очень простая, но стильная полоса прокрутки Blogger. На самом деле, фишка этой полосы прокрутки имеет красивую цветовую комбинацию с небольшим эффектом тени. Кроме того, прозрачная дорожка делает ее более красивой и привлекательной.
Стиль полосы прокрутки 2:
КОД
::-webkit-scrollbar {
width: 11px;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: #1a2a6c;
background: -webkit-linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);
background: linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);
}
::-webkit-scrollbar-thumb:hover {
background: #b21f1f;
}
::-webkit-scrollbar-thumb:active {
background: darkred;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-corner {
background: transparent;
}
Еще одна великолепная полоса прокрутки, которая подойдет для любого типа блога. Вы найдете удивительную цветовую комбинацию между активным и парением этой полосы прокрутки. Кроме того, трек виден для этого стиля.
Стиль полосы прокрутки 3: полоса
КОД
::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-color: #6D6027; 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: #0B3B0B;
}
::-webkit-scrollbar-track {
background-color: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}
Эта полоса прокрутки является примером абсолютной красоты. Хотя он не использует никакого эффекта парения, активный большой палец и красивая дорожка делают его привлекательным и удобным для пользователя.
Стиль полосы прокрутки 4:
КОД
::-webkit-scrollbar{
width: 11px;
}
::-webkit-scrollbar-track{
background: #c4c6c8;
}
::-webkit-scrollbar-thumb{
background: #105B74;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover{
background: #08A67C;
}
Это еще одна простая полоса прокрутки Blogger с закругленными углами. Стиль очень популярен и широко используется. На самом деле, вы возможно уже видели такую полосу прокрутки во многих блогах. По этой причине я вдохновился поделиться этим стилем.
Стиль полосы прокрутки 5:
КОД
::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset 0 0 8px #00B141;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover {
background: green;
}
::-webkit-scrollbar-thumb:active {
background: #000;
}
На самом деле, дизайн этой полосы прокрутки очень похож на описанный выше, но вы найдете разницу в наведении, активном и треке панели. Как у дорожки, так и у ползунка есть закругленные углы и красивый эффект вставки тени, который отличает эту полосу прокрутки от других.
Стиль полосы прокрутки 6: Google
КОД
::-webkit-scrollbar {
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #C2C2C2;
box-shadow: inset 0 0 5px #AEAEAE;
}
::-webkit-scrollbar-thumb:hover {
background-color: #8A8A8A;
}
::-webkit-scrollbar-thumb:active {
background-color: #727272;
box-shadow: inset 0 0 5px #595959;
}
::-webkit-scrollbar-track:hover {
background-color: #E6E6E6;
border: 1px solid #CFCFCF;
}
::-webkit-scrollbar-corner {
background: transparent;
}
Стиль полосы прокрутки 7: Codepen
КОД
::-webkit-scrollbar {
background: transparent;
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #555;
box-shadow: inset 0 0 2px #333;
}
::-webkit-scrollbar-corner {
background: transparent;
}
Стиль полосы прокрутки 8: Blue-G
КОД
::-webkit-scrollbar {
width: 10px;
height: auto;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #09123c), color-stop(1.00, #0e3e8d));
background: -webkit-linear-gradient(#09123c, #0e3e8d);
background: -moz-linear-gradient(#09123c, #0e3e8d);
background: -o-linear-gradient(#09123c, #0e3e8d);
background: -ms-linear-gradient(#09123c, #0e3e8d);
background: linear-gradient(#09123c, #0e3e8d);
}
::-webkit-scrollbar-thumb:hover {
background: #0000a0;
}
::-webkit-scrollbar-thumb:active {
background: #000000;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-corner {
background: transparent;
}
Полоса прокрутки Стиль 9: Голубой-G
КОД
::-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;
}
Стиль полосы прокрутки 10: Зеленая тень
КОД
::-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(1.00, #52d352), color-stop(0.73, #4a944b), color-stop(0.53, #2e7c2f), color-stop(0.28, #2c7a2d), color-stop(0.00, #7cff7f));
background: -webkit-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -moz-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -o-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -ms-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: linear-gradient(to bottom, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #008542;
}
::-webkit-scrollbar-thumb:active {
background: #004522;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}
Полоса прокрутки Стиль 11: оранжевый-G
КОД
::-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(1.00, #ff8a16), color-stop(0.79, #ffae5e), color-stop(0.51, #ff8916), color-stop(0.41, #ff9d3d), color-stop(0.00, #ffb268));
background: -webkit-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -moz-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -o-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -ms-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: linear-gradient(to bottom, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #FF9615;
}
::-webkit-scrollbar-thumb:active {
background: #904F00;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}
Стиль полосы прокрутки 12: многокрасочный тонкий
КОД
::-webkit-scrollbar {
width: 8px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c21b00), color-stop(0.77, #f60), color-stop(0.63, #e86a55), color-stop(0.33, #f49c8d), color-stop(0.20, #ea2804));
background: -webkit-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -moz-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -o-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -ms-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: linear-gradient(to bottom, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
}
::-webkit-scrollbar-thumb:hover {
background: red;
}
::-webkit-scrollbar-thumb:active {
background: darkred;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}
Стиль полосы прокрутки 13: Гладкая пурпурная
КОД
::-webkit-scrollbar {
width: 12px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f600fe), color-stop(1.00, #fd63ff));
background: -webkit-linear-gradient(#f600fe, #fd63ff);
background: -moz-linear-gradient(#f600fe, #fd63ff);
background: -o-linear-gradient(#f600fe, #fd63ff);
background: -ms-linear-gradient(#f600fe, #fd63ff);
background: linear-gradient(#f600fe, #fd63ff);
}
::-webkit-scrollbar-thumb:hover {
background: #C60088;
}
::-webkit-scrollbar-thumb:active {
background: #6D024B;
}
::-webkit-scrollbar-track {
background: #F6E4F0;
}
::-webkit-scrollbar-track:active {
background: #FCC9EC;
}
::-webkit-scrollbar-corner {
background: transparent;
}
Стиль полосы прокрутки 14: Серебряный блеск
КОД
::-webkit-scrollbar {
width: 9px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #bdbbbb), color-stop(1.00, #777));
background: -webkit-linear-gradient(#bdbbbb, #777);
background: -moz-linear-gradient(#bdbbbb, #777);
background: -o-linear-gradient(#bdbbbb, #777);
background: -ms-linear-gradient(#bdbbbb, #777);
background: linear-gradient(#bdbbbb, #777);
}
::-webkit-scrollbar-thumb:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #4b4b4b), color-stop(1.00, #131313));
background: -webkit-linear-gradient(#4b4b4b, #131313);
background: -moz-linear-gradient(#4b4b4b, #131313);
background: -o-linear-gradient(#4b4b4b, #131313);
background: -ms-linear-gradient(#4b4b4b, #131313);
background: linear-gradient(#4b4b4b, #131313);
}
::-webkit-scrollbar-thumb:active {
background: #111;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}
Создайте свою собственную полосу прокрутки
На самом деле, мы можем изменить высоту, ширину, цвет, фон, наведение и т. Д. Полосы прокрутки браузера по умолчанию. Если вы немного разбираетесь в CSS, вы можете легко создать собственный стиль полосы прокрутки так, как вам удобно. Фактически, новички могут использовать 3-4 селектора CSS, чтобы настроить его и поместить в файл style.css своего веб-сайта.
КОД
::-webkit-scrollbar {
}
::-webkit-scrollbar-thumb {
}
::-webkit-scrollbar-track {
}
Это три основных CSS-селектора для настройки любой полосы прокрутки браузера на основе WebKit. По сути, вы можете объявить ширину полосы прокрутки внутри первого селектора CSS. Во-вторых, вы можете стилизовать панель / ползунок внутри второго блока CSS и, наконец, вы можете стилизовать дорожку полосы прокрутки внутри третьего селектора CSS.
Если у вас нет представления о CSS, но вам нужно создать уникальный стиль полосы прокрутки для своего блога, я рекомендую вам попросит специалиста. В противном случае выберите один из указанных выше стилей полосы прокрутки Blogger и придайте вашему блогу уникальный вид. Все вышеперечисленные полосы прокрутки протестированы, но если у вас возникли проблемы, оставьте комментарий, чтобы получить поддержку. Кроме того, не забудьте поделиться этим списком, чтобы поддержать меня.
