Привіт всім, на написання сьогоднішнього уроку мене наштовхнуло пропозицію користувача нашого конструктора Михайла. відправлене за допомогою віджета відгуків і пропозицій. Ось власне сам текст пропозиції:
Все відмінно, але пропоную зробити темку по кнопці "вгору". начебто все просто, але не просто. Далеко не все працює на Okis. Було б класно.
Для того щоб встановити скрипт кнопки вгору, копіюйте запропонований нижче код і розміщуйте його в зазначені місця:
Крок 1. Почнемо установку з підключення бібліотеки jQuery і скрипта плавної прокрутки. Для цього перейдіть в Налаштування - SEO, і в поле "Мета теги" вставте наступний код:
Крок 2. Тепер прописуємо css коди надають кнопці стильний вигляд, який вказує місце розташування і відносини з іншими елементами на сторінці:
# Back-top a
width: 108px;
display: block;
text-align: center;
font: 11px / 100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
>
# Back-top span
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url (/file/pro-okis_ru/up-arrow.png) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
>
При бажання і якщо це необхідно у зв'язку з особливостями оформлення вашого сайт, ви можете змінити налаштування css і простими правками в коді оформити кнопку під себе. Даний стиль оформлення скоріше підходить для більш темних дизайнів, але змінюючи значення кольору ви легко поправити ситуацію.
Крок 3. Тепер нам залишилося розмістити безпосередньо html код кнопки, і ми робимо це копіюючи нижченаведений код і розміщуючи його на сторінці Налаштування - Статистика в поле для розміщення додаткових лічильників:
Зображення кнопки залито на сервер сайту pro-okis.ru і буде розміщено тут постійно. Але якщо ви хочете підстрахуватися ви можете перезаліть кнопку на свій сайт і змінити посилання в css коді.