Сосновский.ру – о Ёлках и не толькоВыжать максимум из посетителя и оставить его на сайте |
Друзья, после публикации кроссворда про блогеров и seo кроссворда мне пришло много вопросов: “как же сделать такой кроссворд?”. Сегодня я с радостью расскажу вам как его организовать у себя на сайте. Это легко, а еще и бесплатно
.
Как только пришла мне в голову идея создания интерактивного кроссворда, я пошел искать для этого решения. Но к моему удивлению в рунете нет подобной возможности (по крайней мере, которая бы мне подошла). Поэтому я пошел теребить google на поиск в буржунете. После нескольких минут я наткнулся на один очень полезный сайт – EclipseCrossword.com. Там предлагается скачать программу для создания кроссворда. По PR=7 понял, что этому сайту можно доверять. Изначально кроссворды получаются на английском языке, но ниже я расскажу как его русифицировать
.
Для тех, кто не видел пример кроссворда – вот он. Итак, что нужно сделать:
1) Скачиваем программу для создания кроссворда здесь.
2) Устанавливаем ее к себе на компьютер.
3) Открываем установленное приложение, выбираем “Я хочу начать новый кроссворд” и нажимаем “Далее” (Next).

4) Далее программа спрашивает есть ли у вас список слов или вы хотите создать новый. Выбираем “Создать новый список слов” и опять же кнопочку “Next”.

5) Далее идет добавление необходимых слов. Вводите слово, чуть ниже описание для него и нажимаете кнопку “Add word to list” (добавить слово в список). Итак пока все слова не будут добавлены. Если вы передумали с каким-нибудь словом, то его можно удалить, выбрав его слева в списке и нажав “Remove word” (удалить слово). После того как все слова будут добавлены кнопка “Next”. Программа спросит нужно ли сохранить этот список слов. Если вы хотите работать дальше с этим списком, то сохраняйте.

6) На следующем этапе вводите свое имя, имя для кроссворда и желаемые копирайты.

7) Дальше выбираем размер кроссворда в клетках и жмем “Next”.

8 ) Программа составит возможный вариант для кроссворда. Если он вам сразу понравился, то кликаете на заветную кнопку “Next”. Если же нет, то там есть кнопка “Make another puzzle like this one” (сделать другую раскладку пазлов). Жмете ее пока на экране не появится желаемый вариант.
9) Далее переходите на вкладку “Save as a web page” (сохранить как веб-страницу), жмете на “Interactive with Javascript”, задаете имя и сохраняете у себя на компьютере.

“Empty gird and clues” – это сохранение в виде статичной веб-страницы с вопросами внизу. “Answer key grid” – кроссворд с ответами.
10) Теперь русифицируем кроссворд. Открываем полученный html-файл через текстовый редактор (я советую пользоваться Notepad++). Если вы будете делать кроссворд для wordpress в кодировке UTF-8, то вам надо сначала сохранить файл в этой кодировке (для Notepad++ это “кодировать в UTF-8 без ВОМ”), а потом после строчки:
<meta name=”generator” content=”EclipseCrossword” />
вставить строчку:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
Далее ищем строчку, содержащую фразу:
Copyright 2000-2007 Green Eclipse
Начиная с этой строчки вниз заменяем содержание на содержание этого файла.
Сохраняем полученный html файл и загружаем его на сервер. Все. Поздравляю! Вы создали свой первый интерактивный кроссворд
. Как вам такие кроссворды? Я думаю, что он разнообразит контент любого блога или сайта на различную тематику. Если у вас возникли вопросы, то я с удовольствием на них отвечу в комментариях.
Постовой:
А вы знаете, что учеба за рубежом сейчас набирает положительную динамику роста? Многие хотят получить американское или европейское образование.

Есть одно но. В коде страницы видны все слова:) Я уж не знаю, насколько это принципиально.

Вот хорошо объяснили, теперь я тоже попробую составить свой женский кроссворд.Спасибо.

Duna, да, но в код мало кто смотрит

>Есть одно но. В коде страницы видны все слова:)
>Я уж не знаю, насколько это принципиально.
>
Можно немного модифицировать код и слова зашифровать

Это как ответ в конце книги, кто не хочет подумать лезет туда, а если еще бабки за скорость платят, то честно играть не будет никто!

Белоногов Илья, в идеале согласен, но это надо код шифровать или обращаться к разработчикам, что достаточно трудоемкий процесс.
Попробовал зашифровать кусок кода через pr-cy – не работает кроссворд.

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

Клевая штукень,
нужно будет попробовать сделать кроссвод по дорам)

сделаю по форекс такой кроссворд))))

Спасибо, будем делать кроссворд на авто тематику)

Полезнаю штучка. КАк нить на досуге попробую у себя на блоге! Авось и пригодится.

Для интересности сайта само то. Очень спасибо за сервис. Тоже обязательно воспользуюсь. А то я думала вы сами клеточки чертите и ломаете голову как бы все совпало.

Как раз хотел у вас спросить, а чем же это кроссворды делали))) Чето у меня правда желание отбилось создать кроссворд, после того как узнал, что в коде ответы. Но в принципе, если делать кроссворд не для продвинутых юзеров, то будет интересно

На словах выглядит все просто))) будет пробовать создать что-то свое)
спс, за инструкцию

Круто
Кроссворд, да ещё и с подсказками ![]()
Кстати, хочу постовой

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

Сергей, скорее всего проблема в кодировке. Нужно вставить строчку в код страницы, которая в посте
.

Если эту строчку…
…то вот с ней как раз и такое происходит.

!!!meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″!!!

Ксати скачала и попробовала. Классная штука. Очень понравилась.

Сергей, вместо UTF-8 поставьте windows-1251 (вообщем кодировку сайта). Инструкция была для wordpress с кодировкой UTF-8

Так:?
!!! meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″ !!!

Разобрался!
Спасибо!

Сергей, да

Спасибочки за как всегда полнейшие разъяснения. Спешу попробовать кроссвордик на блог

Спасибо огромное, Сергей!
Давно мечтала о такой полезности, да всё руки не доходили поискать… Буду ставить эксперименты и шифровать.. шифровать!

а на вашем сайте еще планируется акции с использованием кроссворда?

Ян, думаю, еще что-нибудь придумаю интересное.
- Rookee, Seopult или Webeffector? - Часть 2.
- Китайские рестораны в Америке.
- Эксперимент по конверсии.
- Увеличьте свой доход в Google Adsense, используя только 2 вещи
- 8 секретов успешной работы с Google Adsense


- Цель до 1.01.2010 - 200 подписчиков и 100 посетителей в день
- Цель до 1.06.2010 - 1000 подписчиков и 300 посетителей в день
- От Нью-Йорка до Теннессии, путешествуя с китайцами
- Настоящая американская вечеринка в доме у озера
- Чрезвычайное происшествие в Нью-Йорке на Брайтон Бич
- Эффективное распложение ключевого слова в заголовке страницы
- Увеличение количества читателей с помощью контекстной рекламы
- seopult, rookee или webeffector – кто лучше продвигает?
- вверх по рейтингу блогов от яндекса с помощью блогуна
- Продвижение статьями - есть ли эффект?
- Эксперимент по поднятию ТИЦ статьями.
А я думал специальный плагин для wp, оказывается всё намного легче. Спасибо.