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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

   

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

   

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

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

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

   

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

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