Как сделать отгибающийся уголок для сайта

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

Хорошая новость: поставить такой уголок сможет каждый вебмастер, причем как на простой html-сайт, так и на сайт, работающий на движке, например, на блог WordPress. Поставьте себе такой уголок — и он будет привлекать внимание посетителей к той рекламе, которую Вы хотите до них донести.

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

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

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

• Скачать архив

Затем разархивируйте его, и откройте в блокноте или html-редакторе код файла corner.js.

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

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

После изменения кода файла corner.js Вам нужно подобрать свои картинки для уголка: большую для раскрытого, и маленькую для закрытого положений. Размещаете их в папке под именами large.jpg и small.jpg, вместо тех, которые там уже находятся. Если Вы не меняли ширину и высоту уголка в коде corner.js, картинки делайте таких же размеров, как и исходные — и Вы не ошибетесь. Если ширину и высоту уголка Вы сделали слои — размеры картинок Вам придется подбирать самостоятельно, чтобы они стали нормально в уголке.

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

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

<script type="text/javascript" src="/corner/corner.js"></script>

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

В случае с блогом WordPress все немного по-другому. Вы все в папке corner переделываете так, как написано выше, и закидываете папку в корневой каталог блога, то есть в папку, название которой является адресом блога.

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

После того, как закинете папку, заходите в административную панель, в пункт Внешний вид — Редактор, находите шаблон шапки, или header.php, и вставляете тот же самый код, который подходит для странички, и тоже перед закрывающим тэгом </head>:

<script type="text/javascript" src="/corner/corner.js"></script>

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

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером