Прокрутка страницы плагином Go-to-Top

Прокрутка страницы плагином Go-to-Top

У меня уже была информация про плагин Scroll to Top, который делает прокрутку страницы блога наверх. Сегодня покажу ещё один плагин выполняющий такую же функцию. Это плагин для блога на Wordpres Go-to-Top.

Вроде бы зачем ещё один, если первый нормально работает. Причина простая.

Плагин Scroll to Top выводит только картинку в виде кнопки и редактируется в файле scrolltotop.php, что не всем нравиться.

Плагин Go-to-Top может выводить и картинку в виде кнопки и текстовый формат, к тому же он редактируется в CSS.

Теперь подробно.

Установка у плагина обычная, в папку wp-content/plugins. После активации он появиться в панели администратора в разделе «Параметры»

Прокрутка страницы плагином Go-to-Top

Заходим в плагин и делаем настройки.

Хоть плагин и не переведён, но у него всё просто в настройках

Прокрутка страницы плагином Go-to-Top

Что тут надо и что тут есть.

1. Вместо «Go To Top» напишите что-нибудь своё. Я написал — «Вернутся к началу»

2. Скорость прокрутки по-умолчанию 1000ms, здесь кому как, медленнее или быстрей.

3. Появление надписи или кнопки будет по-умолчанию через 200рх прокрутки страницы, здесь тоже ставьте как вам надо.

4. Два индикатора, которые определяют, что выводить, картинку или надпись.

5. «Show only in posts, not all pages» (Где будет показана прокрутка), если поставить галку, то индикатор прокрутки будет только в постах, если не ставить, то и на главной и в постах.

6. «Enable» — включить прокурутку.

Нажимаем «Сохранить настройки»

Теперь у вас в блоге есть прокрутка страницы.

Редактирование плагина Go-to-Top.

Начну с текста.

В папке плагина есть папка CSS с файлами.Внутри файл style-black-arrow.css — это для картинки и соответственно для текста style-normal-text.css

Вот заданный стиль для текста.

#gtt_go-to-top a {
font: normal 12px/150% verdana, arial, helvetica, sans-serif;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#gtt_go-to-top a {
width:auto;
background:#ff0005;
border:1px solid #ccc;
text-align:center;
padding:3px 20px;
position:fixed;
bottom:10px;
left:10px;
cursor:pointer;
color:#000;
text-decoration:none;
z-index: 100;
}

И по-умолчанию вот такой результат

Прокрутка страницы плагином Go-to-Top

Для примера, я поменял цвет фона и текста

Получилось вот так

Прокрутка страницы плагином Go-to-Top

Если вам знаком CSS то вы подстроите под свой блог.

С кнопкой в виде картинки, результаты такие же.

Надо поменять название картинки и установить её размеры, только потом в настройках активировать интдикатор, что будет показано изображение вместо текста. Кнопка для примера в левом углу.

#gtt_go-to-top a span {
display: none;
}
#gtt_go-to-top a {
background-image: url(../images/black-arrow.png);
background-position: left top;
width: 18px;
height: 19px;
display: block;
position:fixed;
bottom:10px;
right:10px;
cursor:pointer;
z-index: 100;
}
#gtt_go-to-top a:hover{
background-position: right top;
}

ДА, изображения надо загружать в папку images плагина.

Создание блога на wordpress это не сложно, тем более информации сейчас в интернете предостаточно.

This site is using SEO Baclinks plugin created by InfoMotru.ro and Locco.Ro










Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *