gototopgototop
Register
Вход
HomeКак это сделать?... /  Как сделать popup-модуль подписки на новости сайта. Ч. 2
Как сделать popup-модуль подписки на новости сайта. Ч. 2 E-mail
Повышаем мастерство - Как сделать?...
Автор: Наталья Мельниченко   
21.01.2012 21:22

Итак, в сервисе почтовых рассылок вы зарегистрировались. Если нет, сделайте это, опираясь на подсказки первой части урока "Как сделать popup-модуль подписки на новости сайта".

А теперь скачайте одним файлом  приложения к сегодняшнему уроку и разархивируйте их. Вы увидите несколько файлов:

  • онлайн сервис popup.html - открыв файл, вы попадёте на сервис Pop-In Builder
  • index.html - отсюда мы будем брать демо-код;
  • index-popap.html - проверочный файл: после двойного щелчка мышью надо последовать изложенным в файле инструкциям  и убедиться, что попап работает;
  • PopIn.js - скрипт, без которого попап работать не будет;
  • images (папка) - здесь лежат несколько картинок, которые вы можете менять на свои, оставляя им лишь те же названия. Например, если вы замените картинку кнопки, то при сохранении дайте ей то же название, что и у меня: button-red.png. Если же вы захотите изменить и название, то тогда внесите соответствующие изменения и в файл index.html.


Начинаем движение:

 

Шаг 1. Открываем страницу сервиса Pop-In Builder. Выпавшее демонстрационное окошко убираем с экрана за ненадобностью, воспользовавшись значком X в его верхнем правом углу:

Уроки Joomla! :: Модуль подписки на новости сайта
Рис.1

Шаг 2. Знакомимся с редактором всплывающего окна. Сейчас все тексты в окне написаны по-английски:
Уроки Joomla! :: Модуль подписки на новости сайта
Рис.2

Шаг 3. Сотрём все тексты, и  вместо них впишем что-то своё. Например, вот это:

Уроки Joomla! :: Модуль подписки на новости сайта
Рис.3
Как мы видим на Рис.3, надпись на кнопке осталась неизменной. Поэтому переходим к следующему шагу.

Шаг 4. В панели редактора нажимаем на кнопку Source. Оно откроет нам html-код. Ориентируясь на рисунок, отыскиваем место со словами "Count me in!" и заменяем его на "Подписаться":

Уроки Joomla! :: Модуль подписки на новости сайта
Рис.4

Шаг 5. Отжимаем кнопку Source и убеждаемся, что кнопка подписки имеет теперь нужную нам надпись:


Рис.5


Шаг 6. Ниже окна редактора есть блоки, в которых можно не только поменять дизайн выпадающей формы подписки, но и  определить, когда и в каком месте экрана выпадающее окно будет показываться посетителям сайта. Для эксперимента я в Window заменяю только цвет заднего фона, а затем нажимаю на кнопку "Generate Pop-In window" :

 Уроки Joomla! :: Модуль подписки на новости сайта
Рис.5

Вот мой результат:

Уроки Joomla! :: Модуль подписки на новости сайта
Рис.6

Далее  я предоставляю вам возможность поэкспериментировать с настройками самостоятельно.

Должна заметить, что SmartResponder имеет собственный подобный сервис, вполне достаточный  для минималистов. Я же пишу этот урок для тех, кто настроен на индивидуальный стиль, поэтому двигаемся дальше.

Шаг 7. С помощью кнопки Source откройте html-код и полностью удалите его из поля.

Шаг 8. В Блокноте откройте файл index.html  из полученного ZIPа. Скопируйте весь содержащийся в нём html-код и вставьте его в окошко редактора popinbuilder-а. Нажмите ещё раз на кнопку Source, и вы увидите, что появилась моя картинка-заставка:

Уроки Joomla! :: Модуль подписки на новости сайта
Рис.7

Нажмите теперь на кнопку "Generate Pop-In window", и эта заставка вылетит к вам, как на крыльях.


Шаг 9. Еще раз жмём на Source. Меняем в коде:

  1. мои тексты заголовков на свои (это при необходимости);
  2. мой домен (joomlalessons.ru) на свой;
  3. меняем значения моих did[]  и uid на свои (см. первую часть урока).


Шаг 10. Перемещаемся вниз, к дополнительным настройкам. Здесь сотрите всё, что есть в строчках. И далее (ориентируйтесь на Рис.8):

1. В блоке Window:
а) поставьте в строке width  цифру 720 (это ширина нашей картинки - 700рх  плюс 20рх на свободное облегание); в строке height поставьте 383 (363+20). Если в последующем будете менять размер картинки, то учитывайте эти 20 пикселей на припуск в ширину и высоту ( я применяю портновские термины, но, надеюсь, вы меня поняли);
б) в строке Transparent поставьте галочку.


2. В блоке Show Window отметьте момент показа окошка посетителям: если хотите, чтобы оно появлялось в момент их ухода, то включайте кнопку "on page Exit". Этот вариант предпочтительнее, на мой взгляд, но дело ваше. Можете заставить их бороться с модулем при каждой перезагрузке страницы:)))))

3. В блоке Window Position отметьте место появления модуля. Экспериментируйте: подыскивайте наилучший для вас вариант, просматривая его с помощью кнопки "Generate Pop-In window" .

Вот как примерно будут выглядеть настройки:

Уроки Joomla! :: Модуль подписки на новости сайта
Рис.8

Шаг 11. Если всё нравится, нажимайте теперь на кнопку "Download Pop-In window" и сохраняйте файл скрипта PopIn.js. Кроме этого, надо скопировать к себе в Блокнот код, который находится ниже кнопки "Download Pop-In window"  на сером фоне. Он примерно таков:


<script src="/PopIn.js"
 type="text/javascript"></script>


Уроки Joomla! :: Модуль подписки на новости сайта
Рис.9

Шаг 12. В директории  своего сайта images/stories создайте папку popup. Перенесите в неё картинки из папки images, которые вы получили от меня в ZIP-архиве.

Шаг 13. Поместите файл PopIn.js в корневой каталог шаблона вашего сайта. Путь: ваш сайт/templates/название шаблона/PopIn.js.

Шаг 14. Откройте файл index.php  шаблона вашего сайта (лучше открыть его в блокноте AkelPad). Найдите в нём место (оно находится почти в самом низу) с  закрывающим тегом </body> и вставьте перед ним скопированный в шаге 11 код. Затем добавьте в него путь к файлу (вместо моего elegance поставьте название папки, в которой находится шаблон вашего сайта):

<script src="/templates/elegance/PopIn.js"
  type="text/javascript"></script>

</body>


Сохраните изменения в файле!

Шаг 15. Откройте лицевую панель вашего сайта. Проверьте, как работает модуль. Если в ходе предыдущих шагов вы не допустили ошибок, значит, модуль подписки обязательно вылетит к вам на почти ангельских крылышках.

 

Успехов!

 

 

 

 


Читайте также:
Ещё статьи:

 
ВХОД на сайт



Базовый курс создания сайта

Предисловия к Базовому курсу

Установка и настройка Joomla!

Работа с расширениями Joomla!

2011-03-11-22-16-12Работа со статьями

Создание меню

Работа с хостингом

Безопасность сайта

Ссылки для скачиваний

 

Есть ли народ на сайте?

Сейчас 37 гостей онлайн

Мы вконтакте

Как сделать?...

Контакты





Copyright © 2011. Joomla! для "чайников". Автор сайта Наталья Мельниченко
Follow us on Twitter