кнопка наверх

Как сделать уголок на сайте

Quick-Ribbon_thumbПривет всем! Приступим к сегодняшнему уроку, он будет творческим, дизайнерским:)

Речь пойдет о том, как сделать уголок для сайта. Такие уголки часто используют для привлечения внимания посетителя к чему-либо (конкурс, акция, интересный пост и т.п.). На моем блоге использовался такой уголок для конкурса комментаторов, и от него был эффект! Посты о дизайне еще обязательно будут, поэтому подпишитесь на RSS, чтобы их не пропустить.

Уголок для сайта

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

Первый способ — можно его нарисовать в Photoshop'е, чуть поиграться с кодом и готово. Но это для более опытных вебмастеров.

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

Я делаю подобные вещи вручную, но эту статью пишу для новичков, поэтому рассматривать мы будет второй вариант.

Для начала переходим на сервис Quick Ribbon по адресу: quickribbon.com

image

Создание уголка для сайта в этом сервисе состоит из 4 простых шагов.

  1. Первый шаг (Step 1 text options)

    imageRibbon textвпишите текст, который будет на уголке.

    Choose the font and size – укажите шрифт, размер текста.

    Text color — цвет надписи.

  2. Второй шаг (Step 2 Ribbon options)

    image

    Pick the ribbon style – выберите стиль уголка.

    Pick the ribbon color – чтобы уголок для сайта был одного цвета, нужно всех трех формах указать одинаковый цвет.

  3. Третий шаг (Step 3 Preview)

    Чтобы посмотреть, что получилось, нажмите кнопку (Apply)

    image

  4. Четвёртый шаг (Step 4 Link options)

    image

    Ribbon hyperlink – впишите адрес на который пользователь будет переходить при клике на полоску.

    Open link — вариант открытия страницы, в новом окне или в текущем.

    После чего нажмите кнопку (Generate Ribbon) и полоска генерируется. Скопируйте предоставленный код, откройте файл header.php вашего блога, найдите закрывающийся тег </head> и перед ним вставьте код, который дал нам сервис. Читайте подробнее о редактировании файлов шаблона WordPress.

    image

    Смотрим, что у нас получилось:

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


1 звезда2 звезды3 звезды4 звезды5 звезд (4 оценок, среднее: 5,00 из 5)
Загрузка...
like
Понравилось?
Подпишитесь на блог и получайте новые статьи!
Добавляйтесь в соц. сетях:
  1. Томский школьник:

    Нужно будет попробовать, вдруг понравится. Спасибо! А сама почему не поставила?)

    Ответить
  2. Анна Мокеева:

    Спасибо за ссылку на сервис. Пока код не вставила, но сейчас попробую. Однако сразу же возник вопрос — как добавить содержимое, которое будет появляться после нажатия на «уголок»?

    Ответить
    • Анна Мокеева:

      Или уголок носит чисто декоративную функцию и не является активным элементом?

      Ответить
      • Анна:

        В шаге 4 есть пункт «Ribbon hyperlink» — сюда нужно вставить вашу ссылку.

        Ответить
  3. Георгий:

    Огромное спасибо, все искал в инете как это сделать !!

    А тут все понятно русским языком расписано!!!

    Еще раз спасибо очень хорошая статья

    Ответить
  4. Александр:

    Ура наконец-то нашел, спасибо, везде только отгибающиеся уголки были, а мне вот как раз такой и надо!

    Ответить
  5. Татьяна:

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

    Ответить
  6. SoltanSaid:

    Сайт не пашет их для создания.

    Ответить
Ваш комментарий: