Главное Свежее Вакансии   Проекты
Рекомендуем
Нарративы и всё самое интересное
Перейти
Продвинуть свой проект
🙀
Запись отклонена
Не соответствует тематике
37 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Создаем флеш-кнопки социальных сетей для Joomla

Интеграция социальных сетей со свободным, а, порой, и с рабочим временем пользователей, – замечательная возможность для продвижения сайтов. Вконтакте, Фейсбук, G+, Одноклассники, Твиттер не только входят в привычку современного общества, а , фактически, являются «образом его жизни».

Находчивые маркетологи используют этот шанс, чтобы проникнуть в сферу «обитания» потенциальных клиентов. В своих заметках специалисты рекомендуют создавать для ресурса аккаунты на популярных общественных сервисах, размещать на сайтах социальные кнопки. Чтобы пользователи переходили по ссылкам, делились заметками с вашего проекта, необходимо предать социальным кнопкам визуально-привлекательный вид. Давайте рассмотрим, как на cms joomla создать красивые анимационные иконки без использования дополнительных плагинов, тормозящих скорость загрузки сервиса.

Стандартные возможности Joomla позволяют активировать модуль кнопок социальных сетей буквально в пару кликов мышки. Это под силу даже молодому вебмастеру, который решил создать и раскрутить свой сайт.

Для начала работы необходимо скачать в интернете картинки в формате png. С целью наглядной демонстрации мы загрузили на компьютер вот такие прелестные кружки с логотипами.

b_58a76ee1924d5.jpgРазмер их оказался большим для размещения на сайте, пришлось создать две уменьшенные копии для каждой иконки, одну с габаритами 80х80 пикс., а вторую на 30 единиц в ширину и высоту меньше. Работа велась с помощью фотошопа, после чего оптимизированная графика была перенесена в корневую папку сайта «images».

Порядок работ

  1. Далее переходим в административную панель Joomla: «Расширения/ Менеджер модулей/Создать». Даем яркое название модулю, на пример: «Сайт в соц.сетях» или «Мы в соц.сетях»
  2. В представленном окне выбираем тип модуля «HTML-код». А в появившемся визуальном редакторе выбираем иконку «Вставить\Изменить изображение».

Высвечивается форма «Менеджер изображений», активизирующая следующие поля.

Вкладка ИзображениеСсылка - указываем относительное расположение файла с размерами 50х50 пикс, или же адрес хостинга, куда были залиты картинки.ТекстЗаполняем альтернативное название изображения, необходимое для лучшей индексации поисковиками.РазмерыПрописываем в пикселях. Поле величины начального вида иконки социальной сети можно оставить пустым.Вкладка АльтернативаЗдесь представлено всего два пункта:

  1. "Курсор мыши -", в окошке прописывается адрес картинки, выбранной ранее. Это изображение возникает, когда мышь находится не над элементом.
  2. «Курсор мыши+», указываем копию введенной картинки, но с увеличенными размерами 80х80 пикс.

Фотография появится, когда указатель мыши коснется вставленной иконки.

Жмем «Сохранить». Проделываем однотипную процедуру для всех имеющихся иконок, в результате получаем вот такую анимацию.

b_58a76ee1be142.jpgb_58a76ee1e6260.jpgb_58a76ee21a4eb.jpgb_58a76ee246144.jpg

При достаточном знании фотошопа можно немного поэкспериментировать, сделать так, чтобы при наведении курсора картинка не увеличивалась, а просто меняла цвет.

Далее к каждому изображению необходимо привязать ссылку на социальную сеть.Для этого кликаем по представленной выше картинке и нажимаем иконку «Вставить/изменить ссылку» на панели визуального редактора, добавляем адрес соответствующей страницы в социальной сети.

После чего, в настройках модуля указываем, на каких страницах и в каком месте на сайте будет выводиться элемент. Жмем «Сохранить».

После обновления главной страницы сайта, созданные иконки появятся в указанном месте.

По материалам: Создаем флеш-кнопки социальных сетей для Joomla

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Популярные за неделю
Показать следующие
Комментарии
Первые Новые Популярные
Комментариев еще не оставлено
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать
Прямой эфир