Sozdaiblog.ru
Назад

Угловой баннер с сюрпризом!

Опубликовано: 27.04.2013
Время на чтение: 5 мин
32
3

угловой баннер

Приветствую всех друзей и читателей – Sozdaiblog.ru!

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

Вот и сегодня я пишу этот пост в ожидании очередной дозы позитивной энергии.

То, чем в этот раз мне хотелось бы с Вами поделиться называется «угловой баннер с сюрпризом». У этой штуковины нет официального названия, поэтому, будем называть её так.

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

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

угловой баннер

ДЕМО СКАЧАТЬ

Всем кому понравилось, могут установить такую ленту на свой сайт.

Как установить угловой баннер с сюрпризом?

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

Скачайте архив и распакуйте в удобное для Вас место. Там будет находиться некоторое количество файлов. Найдите среди них файл index.html, откройте его на редактирование любым текстовым редактором и скопируйте всё, что находится между тегами <body> </body>.

Всё что Вы скопировали Вам необходимо вставить в такой же файл и в то же место на своём сайте или блоге.

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

<img src="https://Путь к изображению/1.jpg">
<img src="https://Путь к изображению/2.jpg">
<img src="https://Путь к изображению/3.jpg">
<img src="https://Путь к изображению/4.jpg">

Далее в распакованном архиве отыщите файл forkit.js и по предыдущей аналогии закиньте его на сервер, прописав к нему путь в том же коде:

<script src="https://Путь к файлу/forkit.js"></script>

Теперь Вам необходимо найти в архиве файл CSS и перенести его содержимое в такой же файл на своём Веб-ресурсе. Если Ваш сайт, как и мой, работает на движке WordPress, то все файлы необходимые для редактирования находятся в папке Вашей активной темы оформления.

Размер и цвет всех элементов каждый сможет отредактировать самостоятельно в файле CSS.

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

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

Ну а на сегодня это всё! До новых встреч, друзья…

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Степан
    Опубликовано: 27.05.2013 Ответить на сообщение

    Добрый день Денис.Мне нравятся такие штучки.Спасибо.

    • Денис Черников
      Опубликовано: 27.05.2013 Ответить на сообщение

      Привет, Степан! Мне они тоже по душе!

  • Марина Антонова
    Опубликовано: 27.05.2013 Ответить на сообщение

    Благодарю за интересную фишку. Нужно придумать какой сюрприз спрятать в уголок.

    • Денис Черников
      Опубликовано: 27.05.2013 Ответить на сообщение

      Пожалуйста, Марина! Я уверен, Вы найдёте применение этой фишке!

  • Виктор
    Опубликовано: 27.05.2013 Ответить на сообщение

    Здравствуй, Денис! Мне очень понравились: и твой угловой баннер, и твоя положительная виртуальная «наркозависимость» в придумывании такого множества очень хороших вещей. У меня своя зависимость, литературная, и я понимаю твое вдохновение к творчеству. Будем радовать других, и тогда наша радость будет неисчерпаема. Всего тебе наилучшего.

    • Денис Черников
      Опубликовано: 27.05.2013 Ответить на сообщение

      Здравствуйте, Виктор! Спасибо, за положительный отзыв я рад, что Вам понравилось и Вы не осуждаете меня за мою зависимость! Мне нравиться находить новые фишки, дорабатывать, перерабатывать их и показывать своим читателям. Интернет огромен и в нём куча такого материала, который желает чтобы его увидел свет!

  • Сергей Москвитин
    Опубликовано: 27.05.2013 Ответить на сообщение

    Привет Денис! Классная штучка. Опят ты нас порадовал новой интересностью. Спасибо большое. Не пора ли тебе уже выпустить книжку с этими интересными штучками. Я думаю она многим бы пригодилась. Удачи тебе в твоем творческом процессе.

    • Денис Черников
      Опубликовано: 27.05.2013 Ответить на сообщение

      Привет, Сергей! Рад, что Вам понравилось! На счёт книжки не получится, такие вещи изобретаются часто и придётся книгу каждый день переписывать!

  • Настя
    Опубликовано: 27.05.2013 Ответить на сообщение

    Замечательная штукенция!)) Таких я еще нигде не видела. Большое спасибо, что поделились!

    • Денис Черников
      Опубликовано: 27.05.2013 Ответить на сообщение

      Пожалуйста, Анастасия! Пользуйтесь!

  • Геннадий
    Опубликовано: 27.05.2013 Ответить на сообщение

    Денис, я так понял это не плагин, а конкретный код? Если так, ты щедрый человек. Такие фишки продаются за деньги. Спасибо!

    • Денис Черников
      Опубликовано: 27.05.2013 Ответить на сообщение

      Да, Сергей, это конкретный код. Пользуйтесь!

  • Любовь
    Опубликовано: 27.05.2013 Ответить на сообщение

    Ой! Какая интересная штучка! Спасибо огромное, Денис! Я такое люблю.

    • Денис Черников
      Опубликовано: 27.05.2013 Ответить на сообщение

      Пожалуйста, Любовь! Забирайте, в хозяйстве пригодится!)))

  • Катерина
    Опубликовано: 28.05.2013 Ответить на сообщение

    ОООО, это что-то! Вы, Денис, как всегда в ударе! Я редко оставляю комментарии, но это заслуживает того, чтобы Вас поблагодарить за креатив в работе и действительно полезные и интересные штучки Думаю, все таки, Вам стоит подумать над созданием собственного сборника вот таких вот интересных вещей и больше, чем уверена, что найдется не мало людей, которые захотят приобрести такой комплектик!!! Вообщем так держать! Я рада, что когда-то попала на Ваш блог и стала его постоянным посетителем!
    Да прибудет с Вами трафик! Успехов!
    С уважением, Катерина.

    • Денис Черников
      Опубликовано: 28.05.2013 Ответить на сообщение

      Спасибо, Екатерина! Рад, что Вы с нами! Надеюсь, что почаще буду видеть Ваши комментарии.

  • Tатьяна Паломи
    Опубликовано: 28.05.2013 Ответить на сообщение

    Денис, как всегда позитивная и главное нужная штучка! Статью взяла в закладки, буду думать куда эту «штучку» прикрепить. Спасибо огромное за очередную полезность и бесплатность.

    • Денис Черников
      Опубликовано: 28.05.2013 Ответить на сообщение

      Всегда пожалуйста, Татьяна! Думаю, что Вы найдёте достойное применение этой вещичке.

  • Татьяна
    Опубликовано: 28.05.2013 Ответить на сообщение

    Денис, я тоже присоединяюсь ко всем хвалебным отзывам! Я тоже в восторге А скажите, хотя бы теоретически, можно этот уголок сделать так, чтобы он высвечивался не сразу, а когда немножко промотаешь вниз. Вот мне нравится, но у меня так сильно верх разрисован (шапка, или как там ее?)Вот если бы была возможность как в случае со стрелкой «вверх» Чтобы она незаметно появлялась в нужный момент и также незаметно исчезала.

    • Денис Черников
      Опубликовано: 28.05.2013 Ответить на сообщение

      Теоретически сделать можно, но кто Вам будет это делать?

      • Татьяна
        Опубликовано: 28.05.2013 Ответить на сообщение

        Ну да
        Просто я подумала что можно по коду стрелочки посмотреть какая команда за это отвечает и добавить в код банера. Нет? Сложнее все гораздо да?

        • Денис Черников
          Опубликовано: 28.05.2013 Ответить на сообщение

          Нет, Татьяна! Можно и так попробовать, просто некогда эти заниматься!

  • Наталья
    Опубликовано: 28.05.2013 Ответить на сообщение

    Мне нравится, что у вас Денис, очень много вещей, которые можно сделать, просто покопавшись в кодах.Ведь это лишний раз не перегружает работу сайта всякими плагинами. Вы все объясняете и показываете.Я уже много чего с вами сделала, и надеюсь еще сделаю.
    А то что вы зависимы и кайфуете от работы, которую проделываете, так это ж здорово! Значит у нас, постоянных читателей, есть гарантия, что вы ее делаете с душой. А это и есть залог нашего с вами успеха!
    Успехов вам!

    • Денис Черников
      Опубликовано: 29.05.2013 Ответить на сообщение

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

  • Константин
    Опубликовано: 01.06.2013 Ответить на сообщение

    Спасибо Денис за работу! Очень нужные вещи вы делаете. Очень жаль что не работает страница «Хочу статью», ваши советы очень пригодились.

    • Денис Черников
      Опубликовано: 01.06.2013 Ответить на сообщение

      Пожалуйста, Константин! Почему страница «Хочу статью», всё работает!

  • Ольга
    Опубликовано: 03.06.2013 Ответить на сообщение

    Классная фишка! Спасибо Денис.

    • Денис Черников
      Опубликовано: 03.06.2013 Ответить на сообщение

      Пожалуйста, Ольга!

  • Игорь
    Опубликовано: 09.06.2013 Ответить на сообщение

    Крутая фишка! А скажите Денис это работает на Joomla?
    Видел нечто подобное на буржйском сайте, но там не в углу, а в середине страницы рычаг — дергаешь — сверху рука выскакивает и задирает страницу вверх. Давно думал как подобное сделать.

    • Денис Черников
      Опубликовано: 09.06.2013 Ответить на сообщение

      Даже не знаю, Игорь! Я с Joomla не работаю, но, думаю, прокатит.

  • Андрей
    Опубликовано: 17.11.2013 Ответить на сообщение

    Класс! обязательно попробую.

    • Денис Черников
      Опубликовано: 17.11.2013 Ответить на сообщение

      Попробуйте, уверен Вам понравится!

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.