Приветствую, всех читателей — Sozdaiblog.ru!
Сегодня я расскажу, как поменять курсор мыши на сайте.
Не знаю, как Вам, но мне нравится использовать разные указатели мыши. На мой взгляд, это одна из тех вещей, которые всё время на виду. Поэтому, иметь симпатичный указатель мыши будет целесообразно.
Главное, не переусердствовать в этом деле, а то бывают такие кадры, что при одном его виде хочется закрыть ресурс и больше не возвращаться.
Приятно, когда на Вашем сайте всего в меру, красивый шаблон, правильно подобранные цвета, грамотно выполненный дизайн. Плюс ко всему индивидуальный указатель мыши, который будет шикарно смотреться, как сладкая вишня на третьем ярусе кремового торта.
Надеюсь, что Вы уловили мои мысли.
Итак.
Как поменять курсор мыши.
Для начала, Вам потребуется создать новое изображение будущего указателя мыши. В этом Вам поможет специальный сервис – www .cursor.cc.
Выбираете любое понравившееся изображение в Интернете и скачиваете себе на компьютер. Затем, переходите на сервис и в левой колонке меню выбираем — Import Image:
После этого используя окно загрузчика, закачиваем сохранённое ранее изображение на сервис, размером не более 5 MB:
Далее, откроется окно, в котором можно произвести нужное Вам редактирование, а под ним будет наглядный пример конечного результата. Закончив все манипуляции, нажимаем – Download Cursor:
Теперь, скаченный указатель мыши нужно закинуть в корневую папку Вашего ресурса.
Следующим шагом открываем на редактирование файл style.css, который находится в папке с Вашей активной темой оформления. В нём находим тег body или похожую конструкцию:
body{background:#00004A;font-size:16px;font-family:FranclinGothHeavyCTT,Arial,Helvetica,sans-serif;color:#000000;text-align:left;}
Внутри фигурных скобок вписываем следующий код:
cursor:url(https://Путь к новому курсору), default;
Сохраняемся, переходим на свой ресурс, чистим кэш браузера и наслаждаемся полученным результатом.
Мой совет:
Не используйте JPG-картинки, на чёрном фоне они смотрятся некрасиво. Применяйте расширения PNG, а лучше CUR.
На сегодня это всё.
Скажите, а Вы изменяете стандартные указатели мыши?
Всем кто любит совершенствовать дизайн своего сайта, предлагаю подписаться на обновление блога и получать уведомления о выходе нового материала на свой адрес электронной почты.
До новых встреч…
С уважением, Денис Черников!
- Декомпозировать это простыми словами
- Чем отличается выручка от прибыли простыми словами
-
WordPress 6.4⁚ последний крупный релиз в 2023 году
-
Как начать блоггинг: пошаговая инструкция
-
Как раскрутить блог бесплатно на Subscribe.ru?
- Как создать свой блог: шаги и рекомендации
- Интерфейс это в информатике простыми словами
- Кадровый консалтинг что это такое простыми словами
-
Что делать если Сайт на WordPress Взломали?
-
Как установить Яндекс поиск по сайту на WordPress?
Денис ты как всегда жжешь! Я как раз хотел в ближайшее время спросить у тебя, как сменить курсор на сайте. А тут хоп, и ты прочитал мои мысли! Экстрасенс…
Сейчас пойду по колдую со своим бложиком, уже есть пару интересных идей =)
Привет, Александр! Смотрю ты следишь за мной!))) Я уже привык, что твой коммент первый!
Мысли читать не умею, но знаю, что хорошие идеи приходят одновременно всем положительным людям сразу! Думаю, что ты поймёшь глубину этого высказывания!
Просто у нас с тобой часовые пояса немного разные. Я по своей натуре сова и спать ложусь поздно ночью.
Получается так, когда ты публикуешь статьи у меня примерно двенадцать или час ночи. Вот и получается, что я всегда первачком отзывы бабахаю… =)
Ааа, вон оно что! Кстати, это правильно, нужно всегда быть везде первым, тогда быстрее заметят!
Курсор оригинальный
Спасибо, что оценили!))))))))))))))
Денис, «Подарок всем — Бесплатное Видео» сегодня скачал.Ты сам сейчас используешь все, что там дано?
Да, Александр! С выходом каждой новой статьи я активно пользуюсь этим сервисом!
Интернет медленный, но уже загрузил. То, что я искал. Денис, если можно хоть примерный трафик с Subscribe.ru
Александр, здесь всё расплывчиво.Всё зависит от темы, посещаемости групп, правильного заголовка и харизмы Автора! В хорошее время, при написании и анонсирования классной статьи в 20 групп, ко мне по 200 человек в день приходили! А так 50-100 стабильно!
Здорово Денис! Все привнесу еще одну изюминку себе на сайт Тем более, опять в очередной раз дизайн сменила . Спасибо, все просто и понятно
Пожалуйста, Светлана! Скоро праздники, как раз украсите свой ресурс!
Вот сижу думаю, только что прочитал статью о том как поставить часы на блог причем сам на блог не поставил эти часы. Теперь про указатель мыши и опять тоже самое, может на недельку для примера поставить…
Вы у меня разрешения спрашиваете или у себя? Возьмите и поставьте, за чем дело стало!
Ставить что-то на свой блог или не ставить выбор стоит за вебмастером!
Вот курсор — это выгладит оригинально, когда он подобран красиво под дизайн блога. А часы — это уже заезженная тема, которая является очень банальной и никому не интересной.
Интересно просто рассказать и не показать на примере
Только подумала о том, что хорошо бы сделать курсор в виде елочки, а Саша Красильный это уже сделал!
Вот такой он шустрый парень!)))
Хех, я его ночью сделал, так сказать пока все спят студент работает =)
Елочку сделала, по шагам дошла до style.css, нашла тег body, а дальше боюсь напортачить: код курсора вставлять сразу после открытой { или перед }? Как прописать путь к новому курсору? Как почистить кэш браузера? Вот такие «чайниковские» вопросы.
Этот блог убран к Новому году снежком, только это на платформе Блогспот, скопировать код можно на странице «Посиделки»
Код нужно ставить { внутри }, можно в самом конце, перед закрывающей скобкой. Путь к курсору, это ссылка-путь к тому месту, куда Вы новый курсор закачали. Кэш чиститься в браузере, в каждом по своему (в настройках смотрите). Если плагин кэширования стоит, то и там удалите все сохранения кэша, а то не увидите новый курсорчик.
Два уточнения имею:
1. В указанной CSS-конструкции body — это уже не тег, а селектор, в качестве которого употреблен дескриптор body. То есть, употребленная вами фраза ориентирует на поиск тега body в теле веб-документа. Тогда как указанную CSS-конструкцию нужно искать в головной секции веб-документа или даже в отдельном файле со CSS-списками.
2. Полагаю, не следует указывать http:// внутри url (…), так как эта абсолютная адресация затруднит
отладку локальной версии веб-проекта на компьютере разработчика.
Уточнения лично для Вас:
На моём блоге собираются новички. Те люди, которые только познают азы Веб-мастерства и подача информация в стиле «Я супермозг» не поможет понять и сделать то о чём идёт речь в статье.
Если кто-то захочет узнать что такое селектор, то он прочитает учебник по CSS и NTML. Сдесь же описывается конкретное действие с инструкцией по применению в которой чётко описаны все шаги реализации изменения курсора мыши.
Если бы я имел ввиду искать его в головном документе, то это было бы изложено в понятной человеческой форме, а не употребляя заумную диалектику.
Полагать можно всё что угодно, но решение остаётся за самим разработчиком.
Ни какая локальная разработка не тормозит и не вызывает затруднений у хорошего разработчика, а плохому танцору всегда чешки жмут.
+1 селекторы — коклекторы, главное, что правильно изложили материал, Денис, а на задирающих высоко нос можно и не обращать внимание, прочитав Ваш пост я и сам с легкостью настроил все, тут максималльно просто все описано)
Спасибо, Денис за поддержку! Всегда найдётся человек, который недоволен, больше знает, завидует или просто далёкий. Всем не угодишь. Если человек хочет помочь или что-то подсказать, но просто без гонора или вываливания своего достоинства, то я только ЗА. Но, когда начинают тошнотворить, поучать и высокомерие своё показывать, будут получать по шапке!
спасибо, сейчас поищем что нибудь интересное)))
Пожалуйста, заходите!
Спасибо, Денис, поставил заместо курсора елочку=)
Мне даже кажется я знаю, откуда Вы спионерили эту елочку! =)
Да, да, Александр, спасибо Вам=)
Мне не жалко, пользуйтесь на здоровье! =)
Сделала всё как у Вас написано, но новый курсор появляется только когда навожу его на панель админки, т.е. на полоску сверху. Не подскажите, в чём может быть проблема?
Значит что-то упустили! У меня ведь работает! Пробуйте ещё!
Оказывается не упустила) Решение другое: из-за особенностей темы строку, в которой путь к курсору, мне нужно было разместить не в body{}, а в другом месте CSS, точнее в трёх(!) — art-main{}, art-layout-cell{} и art-post-body{}. А в body{} оказалось совершенно бесполезным. Пришлось повозиться прежде чем разобралась, правда не знаю насколько это грамотно?!))) зато теперь всё работает. Спасибо!)
Рад, что у Вас всё получилось! Видимо и правда проблема в особенностях строения Вашей темы оформления. Такое чувство, что её не под WordPress делали. Был у Вас в гостях. Оригинальное решение для указателя. В принципе всё соответствует тематике сайта, а это самое главное.
Мне понравилась идея изменения вида курсора, как бы мелочь, а получается небольшая особенность, притягивающая взоры, спасибо, осталось внедрить!
Пожалуйста, Галина! Действительно мелочь, а приятно!
На замену курсора ушло около часа,долго искал style.css зато во всем разобрался.Спасибо !
Пожалуйста! Если что обращайтесь!
Здравствуйте! Сделал курсор себе на сайт как у вас описано. Разобрался быстро. Теперь красуется на сайте. Сайт сделан на платформе wordpress. Недавно задался вопросом увеличения скорости загрузки сайта. Пытаюсь все плагины заменить кодом. Вот теперь думаю заменить мой любимый курсор на стандартный. Вы мне не подскажите влияет ли такая «изюминка» сайта на скорость его загрузки? Я новичок в сайтостроении и буду Вам очень благодарен за дельный совет!
Здравствуйте! Такая мелочь, как курсор на скорость не влияет!
Печально но я не нашел строчку
body{background:#00004A;font-size:16px;font-family:FranclinGothHeavyCTT,Arial,Helvetica,sans-serif;color:#000000;text-align:left;}
Уже как не просматривал, даже копировал все с css в блокнот и там вбивал body, результатов нету, может все из за того что сам шаблон себе делал?
Так в чём проблема-то, допишите недостающие элементы и протестируйте работоспособность!
Эм, в любом месте можно впихнуть этот код???
Ну у тебя body что вообще нет?
Есть попадается отдельно…просто слово, строки как у тебя нету.
Вот ты и добавь!
Минут пять назад добавил) не знал куда, и добавил просто в самый низ, в итоге ничего не произошло =(
Возьми и рядом со своим body пропиши недостающие стили и адрес картинки курсора!
Так это должно выглядеть?
body{background:#00004A;font-size:16px;font-family:FranclinGothHeavyCTT,Arial,Helvetica,sans-serif;color:#000000;text-align:left; cursor:url (world-gk.ru/cur116.cur), default;}
Всё что до cursor:url не нужно, это стили оформления страницы и даны, как пример!
body{cursor:url (world-gk.ru/cur116.cur), default;}
такой вариант тоже не срабатывает.
Тогда ищите другой способ. У меня работает и у многих тоже! Вы адрес к картинке не правильно прописали!
Почему не правильно, у меня она в корне сайта находится.
А кто будет http:// дописывать!?
Дописал, но к сожалению не сработало =(
Кэш то надеюсь чистили?
Да, куки и кеш, все снес.
Ищите другое решение тогда или анализируйте это и попытайтесь понять почему не работает!
Большое спасибо автору за статью! Но есть вопрос: указатель мыши в таком виде только когда им просто водишь по экрану сайта, но если навести на ссылку, то он принимает вид, который настроен в системе на компьютере. Можно это тоже изменить?
Пожалуйста!
Думаю, что можно, но я не пробовал!
Спасибо вам огромное ! Всё получилось))
Пожалуйста, обращайтесь!
Я работаю почти со всеми браузерами ( где лучше идёт) и только в соцсетях. Порой мучаюсь чтобы найти курсор (глаза уже не те , а активность большая) Как сделать его заметным (может быть насадить цветной шарик) и путь к pnjve
Есть анимированные курсоры, используйте их!
Спасибо!В случаен с MODX путь прописал не много по другому top;cursor:url (/cursor.cur), default;
Пожалуйста!
я, вы выбираете скачанное вами изображение курсора и нажимаете кнопку “Import”. Затем вы можете отредактировать изображение, задавать ему размеры, менять цвета и прочие настройки. Когда закончите, нажмите кнопку “Export” и сохраните полученный курсор на свой компьютер.
Чтобы установить новый курсор на своем сайте, вам необходимо создать файл CSS со следующим кодом:
“`
body {
cursor: url(‘путь_к_файлу_курсора.cur’), auto;
}
“`
Вместо “путь_к_файлу_курсора” укажите путь к файлу, который вы сохранили ранее. Затем добавьте этот файл CSS на свой сайт, используя тег или вставив его непосредственно в HTML-код вашей страницы.
И вот, ваш новый курсор мыши успешно установлен на сайте! Теперь ваша страница будет выглядеть еще более привлекательно и оригинально.
Надеюсь, этот мини-урок был полезен для вас. Удачи в создании своего уникального дизайна!