Оцените статью: 5 1 1 1 1 1 Рейтинг 5.00 (2 Оценки)

Всем привет!

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

Плагин 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 в подарок