Кнопка вгору як вконтакте на wordpress

Кнопка вгору не тільки цікавий елемент дизайну, але і важливий момент юзабіліті! Нещодавно я вирішив зробити кнопку вгору, але хотів саме як Вконтакте. У мережі нічого не зміг знайти і вирішив експериментувати сам. Готовий варіант кнопки вгору як Вконтакте, ви можете спостерігати на цьому блозі в лівій частині екрана (моя гордість!). Сьогодні я поділюся з вами результатами свого експерименту і ви зможете зробити у себе на блозі таку ж кнопку!

Отже, для створення кнопки вгору на сайті WordPress нам знадобиться 1 плагін і трохи виправлень в CSS стилях. А тепер ближче до теми і поїхали.

1. Плагін, який нам потрібен, називається Scroll to Top Button. його ви можете встановити через стандартний установник Вордпресс. Встановлюємо, в настройках все залишаємо стандартно.

2. Тепер коли ми встановили плагін, нам потрібно його підігнати по CSS стилям, щоб він виглядав як Вконтакте.

Ось як повинен виглядати стиль .scroll-top-inner (просто замініть наявний у вас код, починаючи з .scroll-top-inner і до закриває дужки>)

Стилі для кнопки вгору як Вконтакте

scroll-top-inner z-index: 9999;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
opacity: 0.15;
width: 5%;
height: 100%;
display: inline;
position: fixed;
cursor: pointer;
margin: 0 auto;
left: 0px;
bottom: 7px;
background: # 000;
border: 1px solid #fff;

Для тих, хто трохи розуміє в CSS, можна код і поднастроіть під себе:

1. width: 5% - ширина кнопки «вгору», займає 5% від сторінки.
2. height: 100% - висота кнопки «вгору» на всю висоту сторінки.
3. left: 0 - позначає, що кнопка буде пришита до лівого краю впритул, за замовчуванням варто right - тобто притиснута вправо.
4. opacity: 0.15 - прозорість кнопки. Чим вище значення, тим менше прозорість.

Це основне. З рештою експериментуйте. Але взагалі-то в такому вигляді кнопка вгору як Вконтакте і буде виглядати. При цьому вона забезпечує плавну прокрутку і радує око!

Ось що вийшло у мене. Зробив все по написаної мною вище інструкції.

Кнопка вгору настройки за замовчуванням

Кнопка вгору як Вконтакте

Сподіваюся, що урок «Як зробити кнопку вгору як Вконтакте на вордпресс» вийшов простим і доступним. Сам не люблю багато копатися в коді, але в даному випадку, без цього не обійтися, доведеться трохи повозитися. Успіхів!

p.s. Чесно, як від серця відриваю! Вже така красива кнопочка вийшла! Користуйтеся із задоволенням!

p.s.p.s. Якщо в подяку потикати по кнопках соц мереж, буду вдячний!

Кнопка вгору як вконтакте на wordpress

Рекомендую почитати по темі:

Cookie на сайті