Плагин SmoothTop для Joomla - кнопка "Наверх"

Всем привет!


В данной статье, Вы научитесь создавать кнопку(полосу) "Наверх" как ВКонтакте.


Плагин SmoothTop для Joomla - кнопка "Наверх"


Для начала давайте скачаем и установим плагин SMOOTHTOP - http://craziation.com/joomla/smoothtop


После, идем в "Менеджер плагинов" - SMOOTHTOP и настраиваем его:


smoothtop


  1. Текст ссылки - Вы можете указать любой текст, который хотите видеть на кнопке.
  2. Заголовок ссылки - Вы можете написать подсказку, которая будет показана наводя на кнопку.
  3. Button Reveal Position - Укажите количество пикселей, расстояние от начала страницы, при прокрутке, когда будет показываться кнопка.
  4. Всегда сверху Да, Нет - показывать в верхней части страницы.
  5. Показывать в админке Да, Нет - Кнопку можно активировать не только на сайте, но и в админ-панеле Вашего сайта.
  6. Горизонтальное положение: Слева, По центру, Справа - Горизонтальное положение, в котором будет отображаться кнопка. По умолчанию справа.
  7. Смешение по горизонтали - Укажите значение позиции кнопки по горизонтали. Можно указывать в %, em, px.
  8. Вертикальная позиция Верх, Низ - Укажите позицию по вертикали, где будет расположена кнопка.
  9. Смещение по вертикали - Укажите значение смещения кнопки по вертикали. Можно указывать в %, em, px.
  10. Эффект перехода - Выберите эффект на свой вкус.
  11. Время эффекта - Укажите время для анимированного перехода.
  12. Непрозрачность при наведении - Укажите значение прозрачности кнопки при наведении.
  13. Собственный стиль - Включить стиль CSS. Вы можете написать собственный стиль.
  14. Стиль css - CSS стили для кнопки или ссылки.


Для того, чтобы сделать стиль, как ВКонтакте используйте настройки, указанные на картинке выше и данные стили:


#smoothtop{


font-size: 12pt; - Размер шрифта


text-align: center; - Выравнивание текста


height:100%; - Высота


width:90px; - Ширина


background-image: url ('http://vdoske.org.ua/images/main-bg-texture.jpg'); - задний фон (картинка).


или


background: #ccc; - задний фон (цвет)

}


#smoothtop:hover{background-position: centerbottom;} - действие при наведении на область.


Вот и все, пример можете посмотреть на сайте vdoske.org.ua.

Хотите комплексно решить Ваш вопрос? 

Перейдите в наш раздел видео-курсов

Оставьте первый комментарий

Не смогли найти, то что искали? Воспользуйтесь поиском

Популярные статьи

Последние статьи


Рекомендуем хостинг

 

 

BeGet

 

30 дней бесплатно!

 

Дополнительно Вы получаете бонусные домены, которые можно использовать как для регистрации, так и для продления доменов в зонах .RU, .РФ, .ONLINE, .SPACE, .SITE, .WEBSITE, .FUN, .HOST, .PRESS, .PW.