Как установить дразнящий, отгибающийся уголок на сайте
Привет! Сегодня опять техническая тема. Буду показывать вам, как сделать на сайте “дразнящий уголок” или «отгибающийся уголок«. Зачем он нам нужен? Чтобы привлечь внимание посетителя вашего сайта, например к какой-нибудь привлекательной акции или конкурсу на вашем блоге.
Можно установить статический уголок, а можно сделать его динамическим. Эти два варианта сегодня и обсудим. А вы уже выбирайте себе — какой вам больше нравится. Лично мне конечно больше нравится динамический…
Начнём с неподвижного – статического уголка. Можно самостоятельно его установить при помощи стилей, как я и сделал, а можно при помощи специального сервиса. Я, ради эксперимента испробовал работу этого сервиса, все ок! Если хотите самостоятельно установить уголок, то вам необходима картинка, примитивные знания HTML и немного терпения. В помощь по самостоятельной установки могу предложить Вам свою статью по украшению сайта к Новому году, да и к любому другому в принципе, разницы нет. Делать придётся всё тоже самое, только из картинки уголка нужно будет сделать ссылку, которая будет вести посетителя в нужное место (статья, страница либо рубрика). Ну, а если вы не хотите заморачиваться со стилями — установите уголок при помощи специального сервиса. Так быстрее и проще.
Как установить дразнящий уголок при помощи сервиса Quickribbon
Update К сожалению этот сервис стал недоступен…
Итак, идём на сервис quickribbon.com и начинаем ваять нашу ленточку-завлекалку. Регистрироваться там не нужно.
Сервис иностранный, как вы уже догадались, поэтому воспользуйтесь переводом странички, если у вас это возможно в браузере, как у меня в Хроме. Вся операция создания уголка состоит из 4 шагов:
- Придумайте и впишите текст на ленточке, его шрифт, размер и цвет.
- Выберите стиль ленты, поставив галочку в нужном чекбоксе, а также выбрав его цвет. Причём для этого можно использовать 3 инструмента: для верхушки ленточки, его нижней части и окантовочки.
- Цвет фона можно не выбирать, так как он почему-то у меня всегда выходит прозрачным, что в принципе мне и нужно.
- Вставьте ссылку, по которой будут переходить ваши посетители, нажав на уголок. Открытие ссылки лучше выбирите – в новом окне.
Ну а финишный штрих изготовления нашего уголка – нажмите кнопку Generalte Ribbon. Сервис моментально сгенерирует код, который вам нужно будет вставить в файл темы — header.php. Куда именно вставлять этот код? Знаете, у меня он работал и до закрывающего тега </head> и после него. Ещё я бы заключил его в <noindex></noindex> и rel=»nofollow», чтобы закрыть от индексации ПС.
Сохраните изменения в файле темы и уголок благополучно должен появиться на вашем сайте. Если возникнут проблемы – задавайте вопросы в комментариях, постараюсь Вам помочь.
Как установить на сайт динамический дразнящий уголок
Двигающийся, дразнящий уголок конечно выглядит намного привлекательней статического, хотя и установка его будет немного посложнее. Он действительно дразнит и манит посетителя нажать на него, так как постоянно двигается. Это создаёт притягательное впечатление какой-то загадки: — А что же там спрятано? — думает посетитель. Когда курсором мышки наводишь на него, страничка сайта плавно отгибается вниз. И когда он нажимает на него, его перебрасывает на нужную страничку.
Итак, давайте установим и такой вариант уголка. Для этого Вам понадобится скрипт, который вы должны установить в корневую директорию сайта (блога). Скачивайте его из моего Дропбокс ящика. Скрипт лёгкий, весит всего 71 Кв. После скачивания, распакуете его Винраром и папку загрузите в корень блога, в папку public.html.
В этой папке находится всего 5 файлов (две картинки — одна большая, другая маленькая; две флешки и яваскрипт). Можете оставить картинки таким же, как у меня, но думаю вы захотите сделать уголок уникальным. Так ведь? Поэтому замените картинки на свои. Чтобы вам не высчитывать размер картинок, я сразу назову их: большая – 500х500, маленькая – 73х73. Вы можете сразу подготовить папку перед загрузкой её на хостинг, а можете загрузить её туда, а потом отредактировать при помощи Filezilla и notepad. Выбирайте сами.
По идее, я бы до загрузки на хост отредактировал папку. Кроме изменения картинок, Вам необходимо будет отредактировать яваскрипт. Что именно нужно будет в нём переделать? Смотрите, если вы не будете изменять названия картинок (large, small), то и в скрипте вам не нужно будет изменять адреса картинок. Ежели измените, то и в скрипте меняйте, иначе он не будет работать. Единственное, что вам точно нужно будет изменить, так это ссылку, на которую будет вести клик по уголку.
Это ещё не всё…
Последнее, что Вам нужно будет сделать, это прописать в header.php ссылку на скрипт уголка перед закрывающим тегом head. Вот он:
<script type="text/javascript" src="ugolok/peel.js"></script>
Чтобы Вы уж точно не ошиблись в установки скрипта на сайт, смотрите видео Евгения Попова про это:
Победители
Да, чуть не забыл. Победителем гонки комментаторов Февраля стал Сергей, автор блога grande-life . И он получает заслуженные 100 рублей на свой электронный кошель. Серёга отзовись! Жду номера кошеля на почту… А победителем кроссворда №6 стала Анна, хозяйка сайта Отпускник. Она первая прислала правильное кодовое слово — ЧЕМПИОНСТВО и получила приз — 50 рубликов. К сожалению больше никто не принял участия в разгадывании моего творения, обидно(((
Ну а на сегодня всё. Пока-пока…
Ваш Алекс Fomik…
Давно засматривалась на дразнящий уголок, только пока мне нечего в него положить! Лёша, а сторонние сервисы не замедляют работу блога?
[Ответить]
Алекс Fomik Reply:
Март 4th, 2013 at 10:50 пп
Сторонние сервисы замедляют конечно. Главное, чтобы их немного было. Я замечаю, что у меня на блоге кнопка Фейсбука долго грузится…
[Ответить]
уголок очень привлекательно смотрится на сайте!
[Ответить]
Алекс Fomik Reply:
Март 4th, 2013 at 10:52 пп
А то)))
[Ответить]
Анна Reply:
Март 16th, 2013 at 11:34 пп
Динамический на главной классно смотрится да еще с отражением на обратной стороне!
[Ответить]
Беру пост в закладки
[Ответить]
Алекс Fomik Reply:
Март 4th, 2013 at 10:41 пп
Спасибо)
[Ответить]
Все это привлекательно, но чем больше всяких разных наворотов. Мне кажется будет тяжелее страница и усложнится обслуживание. Надо следить за большим количеством всяких плагинов, скриптов, чтобы не косячились. Но это мнение делитанта. Я прав?
[Ответить]
Алекс Fomik Reply:
Март 4th, 2013 at 10:54 пп
Всё верно, главное не переборщить. А то что ты — делитант, это ерунда. Говоришь правильные вещи)
[Ответить]
Я себе ленточку на уголок поставил! Хорошая вещь!
Кстати, кошелек отправил на почту!!!
[Ответить]
Алекс Fomik Reply:
Март 4th, 2013 at 10:55 пп
Сергей, я и ждал вашего отклика. Кошель получил. Деньги отправляю… Ещё раз поздравляю с победой!!!
[Ответить]
Сергей Reply:
Март 5th, 2013 at 9:19 дп
Ага, спасибо! Удачных заработков, а то я дальше буду комментировать!!!
[Ответить]
Я раньше использовал второй вариант уголка, но потом убрал до «лучших времен» 🙂 Точнее до того момента, как придумаю для него максимальную пользу!
[Ответить]
Я вот по первому варианту сделал через сервис quickribbon.com — вроде так всё получилось хорошо… Но… не пойму как сделать чтоб уголок был активный, т.е. при наводе мышкой появлялась рука и при нажатии переходила на страничку указанную в сервисе quickribbon при настройках.
Как это сделать?
[Ответить]
Алекс Fomik Reply:
Март 12th, 2013 at 1:35 дп
Всё должно работать без каких-либо дополнительных действий. Вы на сервисе не забыли ссылку на эту страничку поставить, на которую нужен переход?
А у вас что, при наведении курсора не активируется ссылка?
[Ответить]
Алекс, огромное спасибо за уголок! А чтобы было что за него спрятать, пришлось срочно пришлось «ваять» кроссворд! Ну и конечно, теперь будет повод для проведения и акций, и конкурсов! Спасибо еще раз!
[Ответить]
Алекс Fomik Reply:
Март 16th, 2013 at 1:23 дп
Пожалуйста Люба! А кроссворды вы уже умеете составлять? А то у меня пост про это в будущем выйдет…
[Ответить]
Любовь Reply:
Март 17th, 2013 at 12:21 пп
Да, Алекс, я умею составлять кроссворды. А пост про кроссводрды никогда не будет лишним, многим это интересно.
[Ответить]
Очень клёвая штука, но не сейчас и не для моего блога, не для такой посещалки и не для такого количества материалов. Вот когда блог обрастёт статьями и количество посетителей перевалит за сотню в сутки, тогда найду нужный материал и поставлю уголок со ссылкой на него. А пока, вашу статью — в закладки.
[Ответить]
Алекс Fomik Reply:
Март 29th, 2013 at 7:13 пп
Да его можно и без посещалки ставить. Например сделать там раздел — это интересно или ещё какой нить дразнящий заголовок…
[Ответить]
Здравствуйте.
У меня не отображаются картинки small и large! При этом ссылки на них верные на 100%.
Вот ссылка на сайт, где я поставила дразнящий уголок, посмотрите сами, что получилось: http://makesite.pusku.com/
В чем проблема? Почему не отображаются картинки?
[Ответить]
Алекс Fomik Reply:
Сентябрь 10th, 2013 at 11:04 пп
Ролик Попова смотрели? У него есть несколько роликов, но я поставил этот, так как у меня Вордпресс блог. Дарья, вы ведь фрилансер, так почему не можете решить такую несложную задачку?)))
[Ответить]
Дарья Reply:
Сентябрь 11th, 2013 at 9:28 дп
Я пока еще не фрилансер. Я только у чусь на фриланесера.
[Ответить]
Забыла написать: у меня сайт не стоит ни на какой CMS, делала полностью сама. Так что у меня пока не подключен JQuery.
[Ответить]
Алекс Fomik Reply:
Сентябрь 10th, 2013 at 10:57 пп
Дарья, видимо проблема в том, что у вас ни та CMS.
[Ответить]
Дарья Reply:
Сентябрь 11th, 2013 at 9:30 дп
Т. е. этот скрипт не предназначен для простых сатов (без CMS)?
[Ответить]
Алекс Fomik Reply:
Сентябрь 11th, 2013 at 3:07 пп
Видимо да…
[Ответить]
Разобралась, в чем дело. Оказывается, ссылки нужно делать на латинице, а у меня были на кириллице. Сейчас все работает.
Но у меня еще один вопрос: как сделать так, чтобы при нажатии на уголок, страница открывалась в этой же вкладке?
[Ответить]
Алекс Fomik Reply:
Сентябрь 12th, 2013 at 1:33 пп
Ну вот видишь все как здорово!))) Там, где формируется ссылка на страницу убери target=»_blank»
[Ответить]
Дарья Reply:
Сентябрь 12th, 2013 at 1:37 пп
В файле peel.js там, где указаны ссылка нет никакого target=»_blank».
[Ответить]
Дарья Reply:
Сентябрь 12th, 2013 at 1:40 пп
Там только вот это:
var jaaspeel = new Object();
jaaspeel.ad_url = escape(‘http://makesite.pusku.com/’);
[Ответить]
Алекс Fomik Reply:
Сентябрь 12th, 2013 at 1:49 пп
Не в этом файле нужно искать Даш…
[Ответить]
Дарья Reply:
Сентябрь 12th, 2013 at 1:52 пп
Тогда где?
[Ответить]
Алекс Fomik Reply:
Сентябрь 12th, 2013 at 1:54 пп
А нет, вру, этот файл… Действительно нету. Тогда я пас… А зачем тебе в этом же окне? Ведь работает всё…
[Ответить]
Дарья Reply:
Сентябрь 12th, 2013 at 1:56 пп
Неудобно, когда открывается в новой вкладке. Помогите, пожалуйста!!! Или это не Ваш скрипт, и Вы не знаете, что нужно в нем изменить, чтобы решить проблему?
[Ответить]
Алекс Fomik Reply:
Сентябрь 12th, 2013 at 2:24 пп
Это не мой скрипт конечно)) Я не программист ведь. Поищи инфу в сети, на форумах. Напиши Е.Попову наконец…
[Ответить]
Дарья Reply:
Сентябрь 12th, 2013 at 2:27 пп
А вы не знаете, случайно, его контакты?
[Ответить]
Алекс Fomik Reply:
Сентябрь 12th, 2013 at 3:09 пп
Даш, проще будет найти инфу на каком-нибудь форуме вебмастеров, например Webmasters или походить по подобным блогам и поспрашивать. Не думаю, что у Попова будет время отвечать на такой мелочный вопрос. Как его найти? Набери в поиске Евгений Попов и свяжись с ним, через техподдержку…
[Ответить]
Можешь помочь с живым уголком, вроде все делаю правильно и на другом сайте уже читал, а ничего не работает !
[Ответить]
Алекс Fomik Reply:
Ноябрь 18th, 2013 at 12:44 дп
Давай завтра. Только напомнишь мне ещё…
[Ответить]
Vlad Reply:
Ноябрь 18th, 2013 at 1:01 дп
Ок, давай завтра!
[Ответить]