Главная » Бизнес в Интернете

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

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

Хорошая новость: поставить такой уголок сможет каждый вебмастер, причем как на простой 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>

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


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

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

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


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

14 комментариев »

  • Людмила пишет:

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

  • Людмила пишет:

    Саша, ты гений! Спасибо за помощь, за ручку провел, нашел причину — оказывается, Дримвивер барахлит, через Тоталкоммандер все получилось. Но ведь до этого надо же было докопаться! Спасибо тысячу раз! Успехов тебе!

  • Александр Ризун (автор) пишет:

    Людмила, спасибо! Рад был помочь! Действительно, Дримвивер не все забрасывал в Интернет, закинул только папку corner и один файл corner.js. Но разобрались: Total Commander сделал все, как надо. И тебе Успехов и Процветания!

  • Anna пишет:

    Красивая вещь. Нужно использовать, если есть что рекламировать. Но опять эти коды...Для меня это табу пока что. Спасибо за статью, возможно, когда-нибудь воспользуюсь, когда поумнею...

  • Александр пишет:

    Спасибо за подробный урок, все сделал по тексту. Изменил только размеры маленькая 75×75 и большая 500×500, но не отображается ничего на блоге. Не подскажете в чем может быть причина? Файл изменял в блокноте.

  • Александр Ризун (автор) пишет:

    Александр, и Вам спасибо за отзыв! Если изменяете размеры, то и размеры картинок нужно изменять. Там нужно подбирать размеры, я тоже не сразу подобрал для своего уголка.

  • Илья пишет:

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

  • Александр Ризун (автор) пишет:

    Илья, благодарю! С наступающими!

  • Крис пишет:

    Просто, несложно, бомбезно и легко устанавливается! С первого тыка установил! Круто...!!!

    Автору баальшой решпект и уважуха!

    (вот только пусть подскажет какой параметр увеличивает частоту качания не отогнутого уголка?)

  • Александр Ризун (автор) пишет:

    Крис, не могу сказать так с наскока. Если поэкспериментируете, и найдете, а также напишете об этом, буду очень признателен. :)

  • Крис пишет:

    Александру Ризуну с почтением и уважением от Криса! Никаких наскоков ))

    Процесс установки уголка (с подбором картинок) занял 20 мин. (на платформе smf)

    Установил уголок работает прекрасно! колышется, отгибается!! )) Доволен! Саша, пока с амплитудой колебания уголка не разобрался, хотя просто интересно.

    как только разберусь, конечно отпишусь.

    Еще раз тебе спасибо! с Уважением Крис.

  • Александр Ризун (автор) пишет:

    Крис, и тебе спасибо за отзыв! Заходи в гости еще! :)

  • Крис пишет:

    Привет Александр! твоя разработка и скрипт отгибающегося уголока, пашет прекрасно по сей день!

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

    Самый лучший уголок! бомба )

    Саня спс! С Ув. Крис

  • Александр Ризун (автор) пишет:

    Крис, и Вам спасибо за отзыв! Заходите! :)

Оставьте свой комментарий и ответный визит Вам обеспечен