Здравствуйте все все все! Большинство уже видели на разных сайтах отгибающийся уголок. Именно о нем я хочу сегодня рассказать. Поэтому сразу к теме.

Хотите создать уголок для своего сайта или блога? Прежде всего, решите, какой именно уголок вам нужен. Они бывают двух видов:

Простыми, с какой-нибудь надписью на ленте, например: «Акция!!» или «Внимание! Розыгрыш!». Он будет выделяться, и пользователи будут обращать внимание на надпись на его ленте и, нажав на нее, попадут на нужную Вам страницу с информацией.

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

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

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

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

Простой уголок

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

Вначале я не понимал, как правильно это сделать, чтоб выглядело как уголок. Потом уже понял, что это как обычный квадрат, просто с прорисованной полосой. Делается все в обычной программе Photoshope или Illustratore.

С фото-редактором думаю ни у кого проблем не будет, ведь функции потребуются универсальные.

Потом вставляете квадрат на свой сайт, создаете div, даете ему class=”ugol”. Получается:

<div class=»ugol»></div>

И нужно прописать его стиль.

Заранее посмотрите: сколько у вашей картинки пикселей.

Если Вам нужна на уголке не только надпись, а ссылочка на что-то, то чтобы уголок получился кликабельным, измените немного надпись div и вставьте html с ссылкой:

<div class=»ugol»><a href=»https://любая_Ваша_ссылка.ru»><img src=»https://адрес_до_картинки/ugol.png» alt=»» /></a></div>
В CSS нужно будет background убрать.

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

Отгибающийся уголок

Теперь я постараюсь более подробно рассказать, как создаются отгибающиеся уголки.

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

Далее, его нужно открыть с помощью блокнота или обычного html-редактора.
Все необходимые настройки для нашего уголка содержатся в коде файла corner.js. Все что необходимо переделать, отмечено комментариями, написанными после значка // (двойной слеш).

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

Теперь займитесь выбором картинок. Найдите два подходящих изображения: одно побольше – для открытого, а второе поменьше – для закрытого положения. Разместить их нужно в соответствующих папках: папка large.jpg (для картинки побольше) и small.jpg (для картинки поменьше).

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

Их легко подобрать самостоятельно.

Теперь перейдем к процессу подключения созданного вами уголка к нужному Вам сайту. При создании сайта на компьютере для подключения уголка в корневой папке сайта нужно поместить папку corner, а перед тегом </head> нужно прописать в коде index.html следующую строку:

<script type=»text/javascript»src=»/corner/corner.js»></script>
Почти готово.

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

Если Ваш уголок будет размещаться на WordPress, процесс подключения будет немного отличаться. Для этого нужно переделать папку corner тем же способом и при помощи FTP или через хостинг закинуть ее в корневой каталог вашего блога.

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

Теперь зайдите в административную панель, откройте Внешний вид — Редактор, найдите шаблон шапки и вставьте перед тегом </head>, код указанный выше.

Если Вы сделали всё правильно по пунктам, то уголок, созданный Вами, появится на нужной страничке. Вот и всё. Ничего сложного в этом нет. А если вы не хотите возиться с кодами, то можно использовать плагин — Page Peel.

Вы можете посмотреть так же записи