Отгибающийся уголок на сайте — без плагина


Отгибающийся уголок на сайте - без плагина

Рассмотрим как сделать на блоге отгибающийся уголок. Это привлекающий внимание пользователя визуальный эффект, расположенный например в верхний правый уголок области вашего блога. Уголок немного отгибается заманивая пользователя навести на него. После того как у пользователя не останется сил совладать со своим любопытством и огромным желанием навести указатель мыши на уголок, ему начнет повелеваться уголок. Уголок начнет отслаиваться от блога при этом приоткрывая свою тайну и покажет пользователю, что было за ним спрятано весьма заманчивое предложение. А при клике на этому предложению пользователь перейдет на заранее созданную страницу.

Отгибающийся уголок на сайте — плагин Page Peel для WordPress

Сразу предупрежу, если вас сложны и пугают простые вещи такие как закачать файл на сайт, внести небольшие изменения в файлы темы оформления, то лучше установите себе плагин Page Peel для WordPress. Привлекательность этого плагина в том, что он легок в настройках, а именно в них указывается всего три ссылки:

  1. Ссылка на страницу перехода
  2. Ссылка на маленькую картинку размером 75х75 px
  3. Ссылка на большую картинку размером 500х500 px

[download]

Отгибающийся уголок на сайте без плагина

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

Для начала давайте подключим скрипты и стили css заходите в файл header.php вашего шаблона и до </head> вставляем код:


Если у вас Jquery подключен в шаблоне, то эту строчку можно удалить:

Далее где-нибудь после тега <body> вставляем картинку, которая должна скрываться за уголком с ссылкой на нужную вам страницу:

не забываем указать ссылку на нужную вам страницу.

Данный уголок хорош тем, что в нем можно поменять настройки под нужды вашего сайта. Ниже представлены описания всех настройк, которые находятся в файле turn.js

Теперь осталась закачать нужные файлы в тему шаблона на вашем блоге.

[download]

Ну вот и все! Теперь на Вашем блоге должен быть установлен уголок.


Понравился пост, подпишись на обновления

Понравилась статья? Получай свежие статьи первым по e-mail

[newsletter_signup_form id=0]

20 раз(а) написали о “Отгибающийся уголок на сайте — без плагина

  1. ссылка на демо в первом случае 404 🙁

    Ответить
    • Сайт разработчика временно закрыт на реконструкцию, поэтому пока демо поставил на своем сайте.

      Ответить
  2. оо, спасибо — приятная и полезная весчь =) Симпотишно будет смотреться на большинстве сайтов различной тематики =)

    Ответить
  3. Игорь, ручками прописывать все некогда. Я бы выбрал плагин (чисто время сэкономить).
    Посмотрел в поиске плагинов — нашел только это

    Версия: 0.3
    Автор: Nemanja Avramovic
    Обновление: 690 дней назад
    Требуемая версия WordPress: 2.5 или выше
    Совместим вплоть до: 3.0.5

    Но больно он старый.

    У Вас что то другое или то-же?

    Ответить
    • Про используемый плагин написано в статье и он прекрасно работает с последней версией wordpress

      Ответить
  4. Я установила плагин. Для меня работа с шаблоном и css — темный лес пока. Поэтому мне проще было поставить плагин. Пользуюсь уже несколько месяцев. Очень нравится!

    Ответить
  5. Я вчера сделала себе такой уголок с помощью плагина. Скажите, а какая визуальная разница при реализации обоими способами. Если использовать способ без плагина, уголочек тоже будет колыхаться, как на ветру?

    Ответить
    • Без плагина уголочек колыхаться на ветру не будет и при отвороте картинка не отзеркаливает.

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

        Ответить
        • Друг мой сделал без плагина с отзеркаливанием и с колыханием. Когда соберусь, буду делать как он делал. Таак что это возможно!

          Игорь забыла поля заполнить и пришлось снова все писать. Почему не сохраняется? у всех сохраняется, остается только нажать кнопку назад(стрелки) и заполнить поля, а текст остается. Может какой то сбой вышел? Проверьте, если это от вас конечно зависит.

          Ответить
  6. Актуальная тема про отгибающийся уголок. Я пока воспользуюсь плагином. Но буду иметь ввиду Ваш пост. Думаю позже пригодится. Спасибо.

    Ответить
  7. Охриненная тема! А на joomla 1.5.26 такое сделать можно????

    Ответить
    • Сделать можно ан любом сайте и cms.

      Ответить
    • Что за разделение, в Джумлу код запрещают вставлять ? 🙂

      Ответить
  8. Даже не подозревал, что так все просто. На выходных попробую применить

    Ответить
  9. Добавил статью в закладки! Скоро буду делать что-то подобное, вот и статья пригодится!

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

    Ответить
    • Скорее всего в CSS надо просто сделать позицию зафиксировано для уголка.

      Ответить
      • -А ПОПОДРОБНЕЙ МОЖНО, А ТО Я ДУБ-ДУБОМ В ТАКИХ ВОПРОСАХ.

        Ответить
        • Попробуйте так прописать #target {position: fixed;top: 0;right: 0;}

          Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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