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

Всем привет!

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

Плагин 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.


Похожие статьи

  • Обновление joomshopping (Урок №3)

    Joomshopping 5810
    Обновление Joomshopping. Остальные уроки http://www.homichenko.ru/joomshopping/ Это…
  • Хостинг для Joomla 2.5

    Какой хостинг выбрать для Joomla 2493
    Итак, Вы решили, что Вам нужен сайт. Всегда самым первым шагом при создание сайта…
  • Русификация Joomla 2.5.6

    Настройка Joomla 3639
    Одной из первых задач, которые нужно решить при создании сайта на Joomla 2.5, это найти и…

Интересные статьи

Самые читаемые статьи



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

BeGet

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

Домены на .ru в подарок