Как установить дразнящий, отгибающийся уголок на сайте

Привет! Сегодня опять техническая тема. Буду показывать вам, как сделать на сайте “дразнящий уголок” или «отгибающийся уголок«. Зачем он нам нужен? Чтобы привлечь внимание посетителя вашего сайта, например к какой-нибудь привлекательной акции или конкурсу на вашем блоге.

дразнящий уголок

Можно установить статический уголок, а можно сделать его динамическим. Эти два варианта сегодня и обсудим. А вы уже выбирайте себе — какой вам больше нравится. Лично мне конечно больше нравится динамический…
Начнём с неподвижного – статического уголка. Можно самостоятельно его установить при помощи стилей, как я и сделал, а можно при помощи специального сервиса. Я, ради эксперимента испробовал работу этого сервиса, все ок! Если хотите самостоятельно установить уголок, то вам необходима картинка, примитивные знания HTML и немного терпения. В помощь по самостоятельной установки могу предложить Вам свою статью по украшению сайта к Новому году, да и к любому другому в принципе, разницы нет. Делать придётся всё тоже самое, только из картинки уголка нужно будет сделать ссылку, которая будет вести посетителя в нужное место (статья, страница либо рубрика). Ну, а если вы не хотите заморачиваться со стилями — установите уголок при помощи специального сервиса. Так быстрее и проще.

Как установить дразнящий уголок при помощи сервиса Quickribbon

Update К сожалению этот сервис стал недоступен…

Итак, идём на сервис  quickribbon.com и начинаем ваять нашу ленточку-завлекалку. Регистрироваться там не нужно.

Сервис иностранный, как вы уже догадались, поэтому воспользуйтесь переводом странички, если у вас это возможно в браузере, как у меня в Хроме. Вся операция создания уголка состоит из 4 шагов:

  1. Придумайте и впишите текст на ленточке, его шрифт, размер и цвет.
  2. Выберите стиль ленты, поставив галочку в нужном чекбоксе, а также выбрав его цвет. Причём для этого можно использовать 3 инструмента: для верхушки ленточки, его нижней части и окантовочки.
  3. Цвет фона можно не выбирать, так как он почему-то у меня всегда выходит прозрачным, что в принципе мне и нужно.
  4. Вставьте ссылку, по которой будут переходить ваши посетители, нажав на уголок. Открытие ссылки лучше выбирите – в новом окне.

Ну а финишный штрих изготовления нашего уголка – нажмите кнопку Generalte Ribbon. Сервис моментально сгенерирует код, который вам нужно будет вставить в файл темы — header.php. Куда именно вставлять этот код? Знаете, у меня он работал и до закрывающего тега </head> и после него. Ещё я бы заключил его в <noindex></noindex> и rel=»nofollow», чтобы закрыть от индексации ПС.

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

Как установить на сайт динамический дразнящий уголок

Двигающийся, дразнящий уголок конечно выглядит намного привлекательней статического, хотя и установка его будет немного посложнее. Он действительно дразнит и манит посетителя нажать на него, так как постоянно двигается. Это создаёт притягательное впечатление какой-то загадки: — А что же там спрятано? — думает посетитель. Когда курсором мышки наводишь на него, страничка сайта плавно отгибается вниз. И когда он нажимает на него, его перебрасывает на нужную страничку.

Итак, давайте установим и такой вариант уголка. Для этого Вам понадобится скрипт, который вы должны установить в корневую директорию сайта (блога). Скачивайте его из моего Дропбокс ящика. Скрипт лёгкий, весит всего 71 Кв. После скачивания, распакуете его Винраром и папку загрузите в корень блога, в папку public.html.

В этой папке находится всего 5 файлов (две картинки — одна большая, другая маленькая; две флешки и яваскрипт). Можете оставить картинки таким же, как у меня, но думаю вы захотите сделать уголок уникальным. Так ведь? Поэтому замените картинки на свои. Чтобы вам не высчитывать размер картинок, я сразу назову их: большая – 500х500, маленькая – 73х73. Вы можете сразу подготовить папку перед загрузкой её на хостинг, а можете загрузить её туда, а потом отредактировать при помощи Filezilla и notepad. Выбирайте сами.

По идее, я бы до загрузки на хост отредактировал папку. Кроме изменения картинок, Вам необходимо будет отредактировать яваскрипт. Что именно нужно будет в нём переделать? Смотрите, если вы не будете изменять названия картинок (large, small), то и в скрипте вам не нужно будет изменять адреса картинок. Ежели измените, то и в скрипте меняйте, иначе он не будет работать. Единственное, что вам точно нужно будет изменить, так это ссылку, на которую будет вести клик по уголку.

Это ещё не всё…Улыбка Последнее, что Вам нужно будет сделать, это прописать в header.php ссылку на скрипт уголка перед закрывающим тегом head. Вот он:

&lt;script type=&quot;text/javascript&quot; src=&quot;ugolok/peel.js&quot;&gt;&lt;/script&gt;

Чтобы Вы уж точно не ошиблись в установки скрипта на сайт, смотрите видео Евгения Попова про это:

Победители

Да, чуть не забыл. Победителем гонки комментаторов Февраля стал Сергей, автор блога grande-life . И он получает заслуженные 100 рублей на свой электронный кошель. Серёга отзовись! Жду номера кошеля на почту… А победителем кроссворда №6 стала Анна, хозяйка сайта Отпускник. Она первая прислала правильное кодовое слово —  ЧЕМПИОНСТВО и получила приз — 50 рубликов. К сожалению больше никто не принял участия в разгадывании моего творения, обидно(((

Ну а на сегодня всё. Пока-пока…

Ваш Алекс Fomik…


Понравилась статья - поделись с друзьями!



Просмотр

Подпишитесь на обновления блога по почте :

Количество читателей блога


К записи "Как установить дразнящий, отгибающийся уголок на сайте" 41 комментарий Самый активный комментатор в конце месяца получает денежный приз.

  1. Анна:

    Давно засматривалась на дразнящий уголок, только пока мне нечего в него положить! Лёша, а сторонние сервисы не замедляют работу блога?

    [Ответить]

    Алекс Fomik Reply:

    Сторонние сервисы замедляют конечно. Главное, чтобы их немного было. Я замечаю, что у меня на блоге кнопка Фейсбука долго грузится…

    [Ответить]

  2. Max:

    уголок очень привлекательно смотрится на сайте!

    [Ответить]

    Алекс Fomik Reply:

    А то)))

    [Ответить]

    Анна Reply:

    Динамический на главной классно смотрится да еще с отражением на обратной стороне!

    [Ответить]

  3. Татьяна:

    Беру пост в закладки

    [Ответить]

    Алекс Fomik Reply:

    Спасибо)

    [Ответить]

  4. Сергей:

    Все это привлекательно, но чем больше всяких разных наворотов. Мне кажется будет тяжелее страница и усложнится обслуживание. Надо следить за большим количеством всяких плагинов, скриптов, чтобы не косячились. Но это мнение делитанта. Я прав?

    [Ответить]

    Алекс Fomik Reply:

    Всё верно, главное не переборщить. А то что ты — делитант, это ерунда. Говоришь правильные вещи)

    [Ответить]

  5. Сергей:

    Я себе ленточку на уголок поставил! Хорошая вещь!
    Кстати, кошелек отправил на почту!!!

    [Ответить]

    Алекс Fomik Reply:

    Сергей, я и ждал вашего отклика. Кошель получил. Деньги отправляю… Ещё раз поздравляю с победой!!!

    [Ответить]

    Сергей Reply:

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

    [Ответить]

  6. Томский школьник:

    Я раньше использовал второй вариант уголка, но потом убрал до «лучших времен» 🙂 Точнее до того момента, как придумаю для него максимальную пользу!

    [Ответить]

  7. Gelo:

    Я вот по первому варианту сделал через сервис quickribbon.com — вроде так всё получилось хорошо… Но… не пойму как сделать чтоб уголок был активный, т.е. при наводе мышкой появлялась рука и при нажатии переходила на страничку указанную в сервисе quickribbon при настройках.
    Как это сделать?

    [Ответить]

    Алекс Fomik Reply:

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

    [Ответить]

  8. Любовь:

    Алекс, огромное спасибо за уголок! А чтобы было что за него спрятать, пришлось срочно пришлось «ваять» кроссворд! Ну и конечно, теперь будет повод для проведения и акций, и конкурсов! Спасибо еще раз!

    [Ответить]

    Алекс Fomik Reply:

    Пожалуйста Люба! А кроссворды вы уже умеете составлять? А то у меня пост про это в будущем выйдет…

    [Ответить]

    Любовь Reply:

    Да, Алекс, я умею составлять кроссворды. А пост про кроссводрды никогда не будет лишним, многим это интересно.

    [Ответить]

  9. Артём:

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

    [Ответить]

    Алекс Fomik Reply:

    Да его можно и без посещалки ставить. Например сделать там раздел — это интересно или ещё какой нить дразнящий заголовок…

    [Ответить]

  10. Дарья:

    Здравствуйте.
    У меня не отображаются картинки small и large! При этом ссылки на них верные на 100%.

    Вот ссылка на сайт, где я поставила дразнящий уголок, посмотрите сами, что получилось: http://makesite.pusku.com/

    В чем проблема? Почему не отображаются картинки?

    [Ответить]

    Алекс Fomik Reply:

    Ролик Попова смотрели? У него есть несколько роликов, но я поставил этот, так как у меня Вордпресс блог. Дарья, вы ведь фрилансер, так почему не можете решить такую несложную задачку?)))

    [Ответить]

    Дарья Reply:

    Я пока еще не фрилансер. Я только у чусь на фриланесера.

    [Ответить]

  11. Дарья:

    Забыла написать: у меня сайт не стоит ни на какой CMS, делала полностью сама. Так что у меня пока не подключен JQuery.

    [Ответить]

    Алекс Fomik Reply:

    Дарья, видимо проблема в том, что у вас ни та CMS.

    [Ответить]

    Дарья Reply:

    Т. е. этот скрипт не предназначен для простых сатов (без CMS)?

    [Ответить]

    Алекс Fomik Reply:

    Видимо да…

    [Ответить]

  12. Дарья:

    Разобралась, в чем дело. Оказывается, ссылки нужно делать на латинице, а у меня были на кириллице. Сейчас все работает.
    Но у меня еще один вопрос: как сделать так, чтобы при нажатии на уголок, страница открывалась в этой же вкладке?

    [Ответить]

    Алекс Fomik Reply:

    Ну вот видишь все как здорово!))) Там, где формируется ссылка на страницу убери target=»_blank»

    [Ответить]

    Дарья Reply:

    В файле peel.js там, где указаны ссылка нет никакого target=»_blank».

    [Ответить]

    Дарья Reply:

    Там только вот это:

    var jaaspeel = new Object();

    jaaspeel.ad_url = escape(‘http://makesite.pusku.com/’);

    [Ответить]

    Алекс Fomik Reply:

    Не в этом файле нужно искать Даш…

    [Ответить]

    Дарья Reply:

    Тогда где?

    [Ответить]

    Алекс Fomik Reply:

    А нет, вру, этот файл… Действительно нету. Тогда я пас… А зачем тебе в этом же окне? Ведь работает всё…

    [Ответить]

    Дарья Reply:

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

    [Ответить]

    Алекс Fomik Reply:

    Это не мой скрипт конечно)) Я не программист ведь. Поищи инфу в сети, на форумах. Напиши Е.Попову наконец…

    [Ответить]

    Дарья Reply:

    А вы не знаете, случайно, его контакты?

    [Ответить]

    Алекс Fomik Reply:

    Даш, проще будет найти инфу на каком-нибудь форуме вебмастеров, например Webmasters или походить по подобным блогам и поспрашивать. Не думаю, что у Попова будет время отвечать на такой мелочный вопрос. Как его найти? Набери в поиске Евгений Попов и свяжись с ним, через техподдержку…

    [Ответить]

  13. Vlad:

    Можешь помочь с живым уголком, вроде все делаю правильно и на другом сайте уже читал, а ничего не работает !

    [Ответить]

    Алекс Fomik Reply:

    Давай завтра. Только напомнишь мне ещё…

    [Ответить]

    Vlad Reply:

    Ок, давай завтра!

    [Ответить]

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