Как раскрутить свой сайт? С чего начать зарабатывать?

Web-zarabotok.info

заработок в интернете, создание и продвижение сайтов (SEO)

Как создать кнопку для сайта онлайн

  • 3 комментария


  • Как создать кнопку для сайта онлайн

    Здравствуйте, дорогие читатели блога web-zarabotok.info.

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

    cooltext.com

    Cooltext — сервис, с помощью которого, можно создавать различные статичные (png) или анимированные (gif) кнопки для сайта. Преимуществом данного сервиса, есть наличие 100 готовых шаблонов, которые можно использовать бесплатно.

    Примеры кнопок, созданных в cooltext:

    Пример №1 Пример №2
    Пример №3 Пример №

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

    Итак, давайте перейдем к уроку, в котором я шаг за шагом расскажу, как создать анимационную кнопку за пару минут.

    Как создать анимационную кнопку для сайта онлайн

    Шаг 1. Переходим на главную страницу сайта Cooltext.

    Шаг 2. Наводим курсор мыши на Logos. Перед нами список готовых шаблонов:

    Шаблны кнопок

    Шаг 3. Выбираем любой, понравившейся шаблон. Мне понравился этот:

    Шаблон 1

    Шаг 4. Нажимаем по шаблону, после чего перед нами меню настроек:

    Шаблон 2

    Шаг 5. Если на вашей кнопке будет надпись Русским языком, то вам понадобится сделать три дополнительных действия:

    1. Шаблон 3

    2. Шаблон 4

    3.Шаблон 5

    [warning]Эти три действия нужно делать, всегда, если на вашей кнопке надпись на Русском языке. Если этого не делать, то надпись на кнопке появляться не будет.[/warning]

    Возвращаемся на страницу настроек. После чего можем приступить к созданию анимированной кнопки.

    Шаг 6. Идем вниз и находим Render Effect и Mouse Over:

    Шаблон 6

    Шаг 7. Выбираем стили кнопки до и у время нажатия:

    До нажатия: У время нажатия:
    Шаблон 7 Шаблон 8

    Шаг 8. Нажимаем Create Button.

    Шаг 9. Сохраняем картинки к себе на компьютер:

    Шаблон 9

    Шаг 10. Устанавливаем кнопку к себе на компьютер. Я покажу, как это делается на CMS WordPress (у меня на боге установлена именно эта CMS система).

    Шаг 11. Админка — Добавить — Запись (статья) — Добавить медиафайл — загружаем 2 ранее сохраненные картинки.

    Шаг 12. Нажимаем Текст и вставляем html-код:

    Шаблон 10

    а вот и сам htm-код, который нужно скопировать и вставить

    <img src=»cooltext1862623328.png» onmouseover=»this.src=’cooltext1862623328MouseOver.png’;» onmouseout=»this.src=’cooltext1862623328.png’;» />;

    Шаг 13. Вместо cooltext1862623328.png и cooltext1862623328MouseOver.png вставляем ссылки на картинки, которые были загружены раньше. Будет выглядеть это так:

    <img src=»http://ваш сайт/wp-content/дата загрузки/название изображения 1.jpg» onmouseover=»this.src=’http://ваш сайт/wp-content/дата загрузки/название изображения 2.jpg’;» onmouseout=»http://ваш сайт/wp-content/дата загрузки/название изображения 1.jpg’;» />;

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

    Спасибо за внимание!

    С уважением, админ блога web-zarabotok.info.



    Понравилась статья?, поделись с друзьями


    Пидпишись на новости! и будь в курсе событий на блоге.



    Логотип