ГлавнаяCSS, JQuery, JavaScript › Угловой баннер с сюрпризом!


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


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

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

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

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

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

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

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

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

ДЕМО СКАЧАТЬ



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

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

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

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

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

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


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


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


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


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

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

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

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

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

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




32 комментарияА что думаете Вы?

  1. Степан

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  2. Марина Антонова

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  3. Виктор

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  4. Сергей Москвитин

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  5. Настя

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  6. Геннадий

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  7. Любовь

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  8. Катерина

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

    Да прибудет с Вами трафик! Успехов!

    С уважением, Катерина.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. Tатьяна Паломи

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  10. Татьяна

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Татьяна ответил:

    :D Ну да :D

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  11. Наталья

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

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

    Успехов вам!

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  12. Константин

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  13. Ольга

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  14. Игорь

    Крутая фишка! А скажите Денис это работает на Joomla?

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  15. Андрей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

Оставить комментарий!

Вверх