Здравейте приятели. Отдавна в Блог за блогове има публикация как да промените външния вид на скролбара, познатата ни лента за превъртане. Дребно нещо, но не бива да остава без внимание. Днес, по молба на читатели, ще споделя как още малко да изменим стила ѝ.
Ще променим не само цвета на плъзгача, но и на самата ивица, върху която той се движи. Ще добавим и възможност за закръгляване на формата му. Ето как ще изглежда в браузъра.
За по-голяма яснота зададох в кода контрастни цветове на плъзгача и лентата, в която той се движи. Изберете свои цветове, по желание, като използвате тази таблица.
Много е лесно, нали? Ако желаете тази промяна, направите я.
Успех!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Ще променим не само цвета на плъзгача, но и на самата ивица, върху която той се движи. Ще добавим и възможност за закръгляване на формата му. Ето как ще изглежда в браузъра.
За по-голяма яснота зададох в кода контрастни цветове на плъзгача и лентата, в която той се движи. Изберете свои цветове, по желание, като използвате тази таблица.
Код
::-webkit-scrollbar-button {background-image:url('');
background-repeat:no-repeat;
width:6px;
height:0px}
::-webkit-scrollbar-track {background-color: #BFCFFE;box-shadow: 0px 0px 3px #8E8E8E inset;}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;background-color: #00248E;
box-shadow:0px 1px 1px #fff inset;
background-position:center;
background-repeat:no-repeat;}
::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:7px;
height:0px
}
::-webkit-scrollbar{width:17px;}
background-repeat:no-repeat;
width:6px;
height:0px}
::-webkit-scrollbar-track {background-color: #BFCFFE;box-shadow: 0px 0px 3px #8E8E8E inset;}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;background-color: #00248E;
box-shadow:0px 1px 1px #fff inset;
background-position:center;
background-repeat:no-repeat;}
::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:7px;
height:0px
}
::-webkit-scrollbar{width:17px;}
Инсталиране
От администраторски панел ➔Тема ➔ Редактиране на HTML кода ➔ търсим реда ]]></b:skin> и над него вписваме посочения по-горе код.Много е лесно, нали? Ако желаете тази промяна, направите я.
Успех!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Не мога да намеря реда където трябва да го поставя...
ОтговорИзтриванеЗдравейте, за да Ви помогна, моля, пратете URL адреса на Вашия блог. Искам да го погледна. А ако имате стандартна тема на Blogger направете следното: от админ. панела изберете "Тема" и после "редактиране на HTML кода" на темата. Щом се отвори кодът на темата натиснете клавишите Ctrl+F. В горния десен ъгъл ще се отвори прозорец. В него впишете това, което търсите, а именно - ]]> и натиснете Enter. Ще се появи търсеният ред, оцветен в жълто. Над него впишете кода. Така се внасят допълнителни кодове в секцията "стилове" на темата. Успех и пишете.
ИзтриванеТърсете ]]></b:skin>
Изтриване