Всем привет!

Сегодня я вам покажу, как сделать кроссворд на сайте. На самом деле, ничего сложного в этом нет, и вы сами в этом убедитесь, прочитав статью полностью. А в самом конце поста вас по традиции ждет очередной кроссворд на blogiseo.ru №6 с денежными призами.

как сделать кроссворд на сайте

Кроссворд, как известно,  является замечательным инструментом, тренирующим память и логическое мышление. Разгадывая кроссворды, можно с пользой для себя провести время, а иногда просто тупо его убить.

Но помимо пользы для людей, они способствуют продвижению ресурса. Спросите как? Вы опубликовали его у себя на блоге, посетители заходят и начинают разгадывать. Время препровождения на вашем блоге значительно увеличивается, а с ним вместе улучшаются поведенческие факторы.

Как сделать кроссворд на сайте

Делать «зарядку для ума» на блоге мы будем при помощи специальной программы. Так как программа не имеет в своем функционале русского языка, буду показывать всю последовательность составления со скриншотами и пояснениями. Итак, приступим.

Программа, помогающая сделать кроссворд на блоге, называется eclipse crossword. Скачать ее можно по этой ссылке. Установки она не требует, после скачивания ее просто нужно запустить. Перед вами появится вот такое окно:

кроссворд на сайте

Здесь ничего делать не нужно, просто нажимаем кнопку «Next» и переходим в следующее окошко:

как сделать кроссворд на блоге

Аналогично, нажимаем кнопку «Next». А вот в этом окошке и будет формироваться наш кроссворд:

как сделать кроссворд на сайте

Ввод слов и вопросов для получения полноценного кроссворда я показывать не буду, это ни к чему. А поясню на примере одного слова с вопросом, что бы было все понятно. Итак, смотрим на скриншот, поясняю. В первом поле вводится слово, которое нужно разгадать, во второе поле — вопрос. Третье, жмем «Add word to list» для запоминания пары (слово/вопрос), что дальше:

кроссворд на сайте

  1. После нажатия кнопки «Add word to list», слово переносится в окошко, где формируется весь список слов, которые посетитель должен будет разгадать.
  2. Здесь ведется подсчет слов.
  3. Если вдруг вы случайно ввели слово с ошибкой или вам оно просто разонравилось, и вы хотите его удалить, выделите такое слово курсором мышки и нажмите «Remove word». Слово вместе с вопросом исчезнет из общего списка.
  4. После того, как весь список будет сформирован, в зависимости от того, насколько большой он у вас будет. Я обычно делаю кроссворд на 18-20 слов, жмем кнопку «Next» и перед вами всплывает окошко, в котором предлагается его записать:

кроссворд на сайте-2

             Жмем «Да» и сохраняем у себя на ПК.

Дальше, вас перекинет в следующее окно:

кроссворд на сайте-6

  1. В этом поле вам нужно придумать и ввести имя вашего будущего кроссворда.
  2. В этом поле,  ваше имя.

Оба имени, будут отображаться на странице при разгадывании его посетителем (пример):

кроссворд на сайте-10

После чего, снова нажимаем «Next» и нас перекидывает вот сюда:

кроссворд на сайте-7

Что нам потребуется сделать в этом окне? А здесь нас просят указать минимальную ширину и высоту. На 20 слов я ставлю 18/18, можно сделать и меньше, но программа может не сгенерировать кроссворд, если сделать больше, он будет слишком редким.

В общем, здесь сами можете по экспериментировать, сложного ничего нет. Всегда можно будет ввести новые значения, в случае неудачной попытки. Установили, жмем «Next». После того, как программа сгенерирует наш кроссворд, он появится в новом окне:

кроссворд на сайте-8

Снизу, я подчеркнул на скриншоте, программа показывает, сколько слов было задействовано и размеры. Если вас устраивает такое расположение слов, жмем «Next». Если нет, можете нажать «Make another pazzle like this one» и программа сгенерирует его заново и выдаст вам другое расположение слов.

Теперь остается сохранить кроссворд для дальнейшего его использования:

кроссворд на блоге-9

Для этого жмем «Save as a web page», далее «Interactuve with JavaScript», сохраняем его в формате html и жмем «Close», больше программа нам не нужна. Теперь вы можете открыть его при помощи обычного браузера и посмотреть, что у вас получилось! Посмотрели? Замечательно! Но это еще не все. Нужно немного отредактировать код кроссворда.

Откройте его при помощи текстового редактора, я пользуюсь Notepad++, это супер редактор. Лучше я не встречал, скоро напишу про него отдельный пост, подпишитесь на обновления, что бы ничего не пропустить. Теперь найдите строчку с ответами и удалите ее, что бы посетители не смогли ей воспользоваться. Она находится в пределах 170-180 строк:

кроссворд на блоге-11

Сохраняем отредактированный файл. Для загрузки его на страницу блога, необходимо закинуть html — файл с кроссвордом в корневую папку вашего ресурса. Я завел в корне блога отдельную папку «krossvordi» и закидываю их туда при помощи ftp — клиента. А уже в самом тексте поста вам нужно будет указать ссылку на него.

Ну и последнее. Как сделать картинку самого кроссворда в тексте? Делается также все очень просто. Снова открываем html — файл, делаем скриншот экрана, обрезаем картинку при помощи любого графического редактора и вставляете в текст статьи. На этом создание кроссворда закончено! Теперь вы тоже знаете, как сделать кроссворд на сайте. Если возникнут сложности, пишите в комментариях, всегда помогу.

Кроссворд на blogiseo.ru №6 с денежными призами

А теперь, как и обещал, очередной призовой кроссворд! Правила те же, ознакомиться с ними можно здесь. Призы сегодня следующие:

Призы за сегодняшний разгаданный кроссворд:
1 место — 150 рублей
2 место — 100 рублей
3 место — 50 рублей

Подсказка для кодового слова: цветок! Приятного времяпрепровождения.

->НАЧАТЬ РАЗГАДЫВАТЬ<-

призовой кроссворд №6

->ОТПРАВИТЬ КОДОВОЕ СЛОВО<-

Победители по традиции будут объявлены в следующей статье. Не пропустите.

-->Подписаться на обновления блога<--

На этом у меня все. Желаю всем удачи и отличного настроения. Пока, до скорых встреч!

 С уважением, Николай Коротков