Создание вирусной открытки. Все секретные фишки бесплатно в одном месте.

sozdanie_virusnoj_otkrytki_1Здравствуйте, дорогие Друзья! Добро пожаловать на блог EkaterinaGabzevich.Ru!

После тщательной подготовки в несколько этапов к созданию вирусной открытки, наконец, пришла пора приступить к её сборке.

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

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

Итак… сегодняшняя статья станет итоговой. Не переживайте, если Вы до этого не успели изучить весь остальной материал. Поверьте, даже в этом случае по ходу Вы овладеете всем материалом.

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

* Создать папку на хостинге для Ваших будущих открыток. Подготовить папку для новой открытки на компьютере, именно в этой папке и будет храниться открытка, которую Вы сегодня создадите. Подготовить стихи, фоновое изображение и просто картинки для вставки непосредственно в основной лист Вашей открытки. Подготовить музыку.  Подробная информация обо всем этом ждет Вас ЗДЕСЬ и ЗДЕСЬ.

* Подготовить ударный файл, в котором предварительно сохранить: заголовок  и описание для Вашей музыкальной открытки, скрипты для запрета копирования и просмотра исходного кода страницы, фавикон для Вашей открытки, код социальных кнопок, копирайт. Подробнее обо всем этом я писала для Вас ВОТ ЭТУ статью.

* Приготовить рамку для Вашей открытки, или же, скажем так, если не хотите возиться с её созданием, взять готовую. Статья на эту тему ждет Вас ЗДЕСЬ.

Если Вы все это сделали, самое время собрать Вашу поздравительную вирусную открытку.

Откройте программу NVU (если вы её еще не скачали и не установили, установочный файл программы можно взять ЗДЕСЬ). Затем откройте для дальнейшего редактирования файл index с рамкой, который, я надеюсь, Вы создали про прошлому уроку.

Чтобы открыть этот файл нажмите на панели управления кнопку Открыть. Затем во всплывшем окне выберите файл index у себя на компьютере и нажмите уже во всплывшем окне кнопку Открыть.

sozdanie_virusnoj_otkrytki_2

Теперь Вам для начала немного предстоит поработать с кодом. Друзья, не переживайте, я проведу Вас по шагам.

Перейдите во вкладку Код и вставьте код скриптов запрета копирования и просмотра исходного кода сразу после тега <head>.

sozdanie_virusnoj_otkrytki_3

Затем, если Вы создали фавикон, Вам нужно вставить код для его отображения. Этот код также вставляется сразу после тега <head> и взять Вы его можете ЗДЕСЬ. Надеюсь, Вы сделали все правильно и сохранили изображение фавикона с названием favicon.ico в папку img.

sozdanie_virusnoj_otkrytki_4

Вставьте рамку, как создавать рамку я рассказывала Вам в этой статье.

Спуститесь вниз и вставьте код социальных кнопок для вирусной открытки (взять готовый код можно ЗДЕСЬ) перед первым закрывающим  тегом </td>. Сразу после кода кнопок пропишите тег <br>, тем самым Вы вставите дополнительную пустую строчку до нижней полоски рамки.

После тега <br> пропишите копирайт, пример копирайта можно посмотреть ЗДЕСЬ.  Сразу после текста Вашего копирайта опять таки поставьте два тега <br> (назначение тега такое же, как и в первом случае).

sozdanie_virusnoj_otkrytki_5

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

Я плеер вставляю всегда внизу страницы перед кнопками соц закладок, мне кажется это очень гармонично смотрится по дизайну. Поэтому готовый код плеера и Вам предлагаю вставить перед кодом скрипта социальных закладок, т.е. перед…

sozdanie_virusnoj_otkrytki_15

Ни в коем случае не навязываю свое мнение, Вы при желании можете вставить плеер в любую часть страницы. Для этого просто напишите текст «ПЛЕЕР», перейдите во вкладку код, найдите там этот текст и вместо него вставьте готовый код плеера.

На этом работа с кодом закончена, и можно перейти к следующему этапу создания вирусной открытки. Да, кстати, не забудьте сохранить внесенные изменения нажатием кнопки Сохранить.

sozdanie_virusnoj_otkrytki_6

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

Давайте пропишем эти данные. Перейдите во вкладку Обычный и щелкните мышкой в рамке рядом с надписью Ваш текст. Затем в верхнем меню Формат выберите в выпадающем списке пункт Заголовок и свойства страницы.

sozdanie_virusnoj_otkrytki_8

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

sozdanie_virusnoj_otkrytki_9

После внесения данных нажмите кнопку ОК для сохранения внесенных изменений.

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

Чтобы Ваша открытка приобрела фон выберите в верхнем меню Формат в выпадающем списке пункт Цвета и фон страницы…

sozdanie_virusnoj_otkrytki_10

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

sozdanie_virusnoj_otkrytki_11

Осталось совсем немного, наполнить лист Вашей открытки содержанием и она будет готова.

Поставьте пробел перед текстом «ВАШ ТЕКСТ» и нажмите клавишу Enter. Сделать это нужно для того, чтобы у Вас в самом верху листа образовалась пустая строка и Вы смогли начать формировать содержание своей вирусной открытки путем вставки изображений.

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

Чтобы этот код «не повредить» мы и устанавливаем его одним из первых, а затем отделяем от содержания листа открытки текстом «ВАШ ТЕКСТ».

sozdanie_virusnoj_otkrytki_12

Наполните свою открытку отличным настроением, любовью и теплом. Вставьте в свою открытку все, что Вы для неё подготовили.

Для вставки изображений используйте кнопку Изображение. Во всплывшем окне с помощью кнопки Выбрать файл Вы будете выбирать изображения у себя на компьютере в папке img.

Настройку Не использовать альтернативный текст задайте, чтобы не создавать дополнительную нагрузку при загрузке Вашей вирусной открытки.

Во вкладке Размеры Вы можете задать нужный (например, меньший) размер для Вашего изображения, если это потребуется.

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

sozdanie_virusnoj_otkrytki_13

Если Вы решите писать текст открытки непосредственно в программе NVU, а не подготавливать заранее в виде картинок для дальнейшей вставки, как я рассказывала ЗДЕСЬ, Вам стоит отметить для себя и запомнить несколько важных моментов по работе с текстом.

Настроек по работе с текстом, конечно очень много, но я хочу обратить Ваше внимание на основные. Опорной точкой для себя возьмите текст «ВАШ ТЕКСТ», который встроен  в код рамки по умолчанию. Если решите его не использовать — просто удалите.

Запомните, для того, чтобы производить какие-либо изменения с текстом прежде всего его необходимо выделить. Затем все свое внимание переключите на панель настроек текста.

Выделив текст, Вы можете настроить: 1- цвет текста, 2 — размер, 3 — вид шрифта, 4 — выравнивание.

sozdanie_virusnoj_otkrytki_14

Для изменения типа шрифта Вам потребуется в меню Формат выбрать пункт Шрифт.

Возьмите себе за правило, для удобства вставки изображений (помимо, разумеется, фоновых) давать им названия izobragenie_1,  izobragenie_2, izobragenie_3 … izobragenie_10 и т.д.

Смотрите, вот так выглядит содержание папки с изображениями для открытки, которую я сегодня вместо с Вами создала.

У меня на рабочем столе создана папка drugu, в ней создана папка для изображений img. Есть favicon.ico изображение, изображения для рамки, фоновое изображение и еще несколько изображений под номерами для удобства формирования картинки. Ничего лишнего/

Кстати, чуть не забыла Вам сказать, чтобы задать положение изображения (в центре или же с какой-то из сторон), его также, как и текст надо выделить и потом уже задать, как с текстом настройку в меню управления.

sozdanie_virusnoj_otkrytki_17

Если Вы последовательно выполнили все действия, могу Вас поздравить с созданием поздравительной вирусной открытки. Осталось несколько штрихов. Программу NVU можете закрыть, более она Вам не понадобится.

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

Введите название. Обратите внимание*: название пишется с маленькой буквы, вместо пробела ставится нижний прочерк (зажимаете на клавиатуре клавишу Shift и одновременно прочерк, находящийся рядом с клавишей Backspace, получается _ )? мягкий знак в названии не пишется.

Чтобы перевести русский текст в латиницу нажмите кнопку Б-В.

sozdanie_virusnoj_otkrytki_18

Копируйте полученный в результате транслитерации текст и переименуйте свой файл index. Думаю, это у Вас получится сделать и без моей подсказки.

Для того, чтобы загрузить созданную Вами вирусную открытку на хостинг Вам необходимо папку с её содержимым(в нашем случае это папка drugu) заархивировать, если быть более точной создать zip архив.

Для архивации я использую программу winRAR( скачать для 32-системы здесь, скачать для 64-системы здесь, скачать ключ здесь, скачать инструкцию по активации здесь).

После установки и активации программы щелкните по папке с открыткой, которую Вам необходимо заархивировать, правой кнопки мыши и в выпадающем меню выберите пункт Добавить в архив…

sozdanie_virusnoj_otkrytki_21

Обязательно выберите формат архива ZIP и нажмите кнопку ОК для архивации.

sozdanie_virusnoj_otkrytki_22

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

До скорой встречи.

22 комментария на “Создание вирусной открытки. Все секретные фишки бесплатно в одном месте.”

  • Наталья:

    Екатерина, давно хотела освоить создание такой открытки БЫСТРО и с ДОСТУПНЫМИ инструкциями! Может, мне сейчас повезёт? ;-)

  • Спасибо за бесплатную и доступную информацию. А то что-то только платная информация попадалась.

  • viktor:

    Все прекрасно Екатерина! Хотелось бы получить от Вас видео урок по созданию таких открыток в программе Sharepoint Designer,если конечно возможно,а также подробную информацию о переносе материала на хостинг и создании там своих папок,как то-картинки,музыкальный файл,плеер,и т.д.Буду очень благодарен Вам Катюша.Спасибо. 8-)

    • Здравствуйте, Виктор! Я не работаю с программой Sharepoint Designer и не записываю видеоуроков, поскольку считаю, что форма подачи информации, выбранная мной (картинки+описания к ним) более понятна. А информацию по созданию специальной папки и переносе открытки на хостинг Вы можете найти ЗДЕСЬ.

  • Добрый день Екатерина. Добросовестно 3 дня сидела изучала ваш блог, давно хотелось научиться делать такие открытки, но нигде еще не встречала такого подробного описания как делать. Все что мне попадалось это при помощи шаблонов, а это не интересно для меня, или как приложение к какому нибудь «боольшому» курсу.
    Спасибо, очень подробно все описано, но конечно пришлось немного и потрудиться, чтобы приспособить к своему хостингу и прочим условиям. Но благодаря Вашим объяснениям, почему и для чего, разобралась :)
    Два момента у меня остались не решенными. Я попыталась несколько раз писать шрифтом, прямо из Nvu, но когда открыла на сайте, получаются вопросики вместо букв. Меняла шрифт даже на ареал, вроде есть везде, та же самая картина. Пришлось перейти на картинки :)
    Еще один не решенный вопрос, в Хроме показывает все отлично, а вот когда перехожу в оперу, например, размер по горизонтали увеличивается в несколько экранов :(
    Причем расползается мой текст из сверкающих букв, стих в конце. Толи это он раздвигает рамки, то ли величина его растягивает в одну строку. :shock:
    Посмотрите на мою первую открытку и может подскажете в чем проблема :sad: dvidga.in.ua/otkritki/NY/standart/S Novym Godom.html

  • Очень полезно иногда писать вопросы. Пока пишешь сам начинаешь понимать. Поняла, что надо где то поставить конец строки. Зашла в коды, нашла эти строчки и поставила там переход над другую строку и все стало на место, теперь и в опере корректно отображается :x Спасибо за вашу учебу еще раз, я реально продвинулась в своей работе! :give_rose: :give_rose: :give_rose:
    Осталось разобраться со шрифтами, но это уже не такой горячий вопрос, его можно обойти.

    • Здравствуйте, Татьяна! Рада, что одна из возникших у Вас проблем решилась сама собой. Что касается шрифтов… :whistle: . Их очень много, браузеры, как правило, воспринимают только стандартные. Именно поэтому и я написала целую статью на тему, как красиво оформить тексты для открытки :d_daisy: :d_daisy: :d_daisy:

  • Ещё раз огромное спасибо, Екатерина! Хочу узнать, в какой программе можно сделать такие красивые скриншоты с рваными краями? Может быть сделаете урок на эту тему? А пока просто кратко ответьте, пожалуйста. Согласна с вами , что форма подачи материала вашим методом описания с картинками, а не видео, более понятна, т.к. всегда можно вернуться и разобраться, тем более , когда дело касается кодов. Хочу применить такой метод объяснения на своём блоге. Вы меня вдохновили! :thank:

  • Вячеслав:

    Большое спасибо за Вашу методику. Вы природно настроены
    приносить людям максимум пользы по сравнению с мужчинами.
    Может быть из -за большего спокойствия Вашего 3-го глаза
    Вы меньше думаете о своей выгоде.
    С уважением, Вячеслав

  • Спасибо огромное,Екатерина, за замечательную статью!У меня к Вам вопрос,можно ли сделать так,чтобы фон страницы прокручивался?

  • Анастасия:

    Екатерина, подскажите пожалуйста ,где взять картинку , которая машет рукой и показывает на рисунок с подарком? Заранее спасибо.

  • Анастасия:

    еще не подскажите можно установить яндекс метрику на музыкальную открытку?

  • Виктория:

    Добрый день Екатерина. Спасибо вам огромное за статьи по созданию открыток. Все очень понятно написано, даже для чайников. :pleasantry: Когда сделаю свой сайт обязательнодам ссылку на ваш. Удачи вам в работе. Еще раз спасибо. :d_daisy:

Оставить комментарий

This blog is kept spam free by WP-SpamFree.