Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

Как стилизовать результаты пользовательского поиска Google с помощью пользовательского CSS

Google Custom Search делает ваш сайт доступным для поиска по той же технологии, что и основная поисковая система Google.com. Вам просто нужно добавить фрагмент JavaScript к вашему шаблону, и посетители смогут легко найти контент, который они ищут на вашем сайте.

Пользовательский поиск Google по умолчанию использует классический макет Google - синие заголовки, зеленые ссылки и черные фрагменты - для оформления результатов поиска на вашем сайте. У вас есть возможность выбрать другую цветовую схему и семейство шрифтов для результатов поиска *, но это почти все.

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

Если вы когда-либо использовали функцию поиска по сайту на labnol.org Вы можете заметить, что результаты поиска немного отличаются по стилю: под заголовками не отображается URL-адрес, соответствующие ключевые слова не выделяются жирным шрифтом, а номера нумерации страниц отображаются в виде квадратных кнопок.

Вы не можете добавить эти пользовательские стили через редактор Custom Search, но вы можете написать простые правила CSS, которые принесут тот же эффект. Идея проста. Как отмечено на приведенном выше снимке экрана, каждый элемент на странице результатов поиска имеет связанный с ним класс. Вы можете использовать установить стиль для класса как display: none, чтобы скрыть определенный элемент, или использовать обычный шрифт, цвет, свойства border, чтобы стилизовать этот элемент.

Например, давайте нацелить информационное поле в результатах поиска, которое отображает счетчик результатов (class = gsc-result-info). Если вы хотите скрыть этот конкретный блок, вы можете добавить в свою таблицу стилей правило, которое говорит: .gsc-result-info {display: none; } и количество больше не будет отображаться. Точно так же вы можете сказать .gs-snippet {display: none}, чтобы отображать только заголовки, а не фрагменты.

Редактор пользовательского поиска не позволит вам изменить размер шрифта, заголовок и результаты, но с помощью CSS вы можете сделать это легко.

Вот еще несколько правил CSS, которые вы можете использовать для стилизации своей системы пользовательского поиска.

<style type = 'text / css'> / * Использование другого семейства шрифтов для результатов поиска * / .gs-title, .gs-snippet {font-family: courier; } / * Добавить границу между отдельными результатами поиска * / .gs-webResult {border: 1px solid #eee; набивка: 1em; } / * Не отображать количество результатов поиска * / .gsc-result-info {display: none; } / * Скрыть брендирование Google в результатах поиска * / .gcsc-branding {display: none; } / * Скрыть миниатюры изображений в результатах поиска * / .gsc-thumbnail {display: none; } / * Скрыть фрагменты в результатах поиска Google * / .gs-snippet {display: none; } / * Изменить размер шрифта заголовка результатов поиска * / .gs-title a {font-size: 16px; } / * Изменить размер шрифта фрагментов внутри результатов поиска * / .gs-snippet {font-size: 14px; } / * Пользовательский поиск Google выделяет подходящие слова жирным шрифтом, переключая его * / .gs-title b, .gs-snippet b {font-weight: normal; } / * Не отображать URL веб-страниц в результатах поиска * / .gsc-url-top, .gsc-url-bottom {display: none; } / * Выделите кнопки нумерации страниц внизу результатов поиска * / .gsc-cursor-page {font-size: 1.5em; обивка: 4px 8px; граница: 2px solid #ccc; } </ style>

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

[*] Если вы хотите использовать собственную цветовую схему для своей поисковой системы, перейдите на google.com/cse, выберите свою поисковую систему, а затем перейдите на вкладку «Взгляд и ощущения». Здесь вы можете выбрать разные цвета для заголовков, URL-адресов и фрагментов, переключиться на другое семейство шрифтов (по умолчанию Arial), а также выбрать другой цвет для фона.

Похожие

Google AdWords
Клиенты веб-хостинга Linux Shared теперь получают рекламный кредит Google AdWords в размере 100 долларов США, добавив их в свой аккаунт AdWords, потратив 25 долларов на рекламу Google. Принять условия. Кредит Google AdWords в размере
Google & DSGVO: Какие сервисы можно использовать в соответствии с защитой данных и как?
... Google и его многочисленные сервисы в наши дни. Например, встроенные видео YouTube, карты Google Maps, шрифты Google Fonts и другие службы Google можно найти практически на каждом веб-сайте сегодня. Многие из этих сервисов собирают личные данные, поэтому с точки зрения защиты данных при их использовании необходимо учитывать некоторые факторы. Здесь я хотел бы создать обзор того, какие сервисы Google соответствуют DSGVO, а какие нет, насколько далеко Google прилагает усилия
Ваша работа включает в себя сбор опросов и отзывов? Как ты это делаешь? Вы отправляете электронные ...
Ваша работа включает в себя сбор опросов и отзывов? Как ты это делаешь? Вы отправляете электронные письма своей команде, просите обзоры и вручную вводите лист? или есть централизованная таблица Excel и попросить всех обновить? - Теперь позвольте мне сказать вам, что это один печальный способ сделать, и я думаю ... даже вы согласитесь с этим! Теперь давайте обратимся к блоггерам / авторам - у большинства из нас есть блоги, и нам всем нужны наши читатели, чтобы связаться с нами, либо
Как поставить Windows 8 на флешку
... помощью флешки. Видите, когда вы загружаете что-то вроде Windows 8 Developer Preview (что может проверить любой, а не только разработчик), у вас есть файл ISO, который необходимо записать на DVD, прежде чем вы сможете его установить. Или это должно? Windows 7 USB / DVD Download Tool позволяет скопировать
Результаты конкурса - Мои покупки через интернет
... с есть результаты опроса « Мои покупки в интернете ». Вы отправили нам много идей по улучшению интернет-магазина, большое спасибо! Победителем конкурса становится Патрик М., который получит тюбик мюсли и набор Mixitek. Поздравляем и удачи! Что нам нравится, а что нет в интернет магазинах Онлайн-покупки означают экономию и удобство, но, несмотря на полную автоматизацию интернет-магазинов, мы не всегда довольны ими.
Как синхронизировать Календарь Google с Outlook (2016, 2013 и 2010)
Теперь я уверен, что все вы знаете, что старая хорошая синхронизация Календаря Google больше не поддерживается. И вам не нужно иметь третий глаз, чтобы понять хотя бы одну причину, по которой они прекратили это делать. Microsoft и Google являются крупнейшими конкурентами, борющимися за лидерство и долю на рынке, и все честно в любви и войне ... Не только понятно, почему мы, пользователи, должны страдать. В любом случае, помимо синхронизации Календаря Google, существует ряд способов и
Google наконец-то отключил Chrome для Windows XP
... google-nakonec-to-otklucil-chrome-dla-windows-xp-1.jpg> Google Chrome оставляет старые операционные системы на своих устройствах. Google Еще один гвоздь в гроб для Windows XP: Google, наконец, перестанет поддерживать Chrome в старых операционных системах. В пост в официальном блоге Chrome Google объявил об окончании поддержки Chrome для Windows XP и Windows Vista, а также Mac OS
Как легко создать собственную тему Google Chrome
Google Chrome Web Store предлагает множество темы для Chrome , которые включают фоновые изображения для вашей новой вкладки и настраиваемые цвета. Еще лучше - вы можете создать
Поклонники Windows Phone обновляют Plea для Google Chrome
Поклонники Windows Phone вновь обратились к Google с просьбой вывести Chrome на мобильную платформу Microsoft. В системе отслеживания
Новая панель инструментов Google придает Firefox внешний вид Chrome
... стил вторую бета-версию своего программного обеспечения для панели инструментов для Firefox, которая дает браузеру отличительную особенность собственного Chrome от Google. В Chrome, когда вы открываете новую вкладку, браузер отображает страницу, содержащую до девяти миниатюрных версий страниц, которые вы часто посещаете, - выбор из того, что вы показали как свою общую домашнюю страницу. Новая бета-версия панели инструментов 5 делает то же самое для Firefox, включая не только миниатюрные
Как конвертировать Micro SIM в Nano SIM для iPhone 5
IPhone 5 на 18% тоньше, чем 4S. Чтобы уменьшить толщину, Apple пришлось полностью переделать ранее использованную технологию - например, заменить 30-контактный разъем новым разъемом Lightning - или еще больше уменьшить размер существующих компонентов, что вы заметите, когда поймете, что ваш новый блестящий iPhone не работает. недостаточно места для вашей стандартной SIM-карты или микро-SIM-карты;

Комментарии

Вы встречали какие-либо персонализированные результаты поиска Bing, которые вы действительно цените?
Вы встречали какие-либо персонализированные результаты поиска Bing, которые вы действительно цените? Что заставляет вас использовать Cortana в браузере и поисковой системе по умолчанию? Пожалуйста, поделитесь в комментариях!
Но как этот бесплатный редактор PDF сочетается с Adobe Acrobat Pro DC?
Но как этот бесплатный редактор PDF сочетается с Adobe Acrobat Pro DC? Давайте взглянем. Скачать: PDFescape (Бесплатная базовая версия для пользователей Windows) | Adobe Acrobat Pro DC (Работает с платформами Windows и Mac и стоит $ 14,99 / месяц после двухнедельной бесплатной пробной версии) Пользовательский интерфейс
Вы задаетесь вопросом, как изменить PDF на ПК?
Вы задаетесь вопросом, как изменить PDF на ПК? В этом случае прочтите также углубленный анализ, в котором я подробно объясняю как редактировать PDF на компьютере. Я уверен, что вы тоже найдете это чтение очень полезным.
Как купить домены?
Как купить домены? Прежде всего, лучше всего покупать домены у польских поставщиков услуг. Они могут предлагать лучшие цены на польском рынке и дают возможность требовать прав в случае непредвиденных проблем (в отличие от компаний, зарегистрированных за границей). Стоимость покупки домена При покупке нового домена регистраторы предлагают очень выгодные условия. Однако есть одна «хитрость» - эти привлекательные цены обычно относятся только к первому
Как это работает?
Как это работает? Если соответствующий продукт добавлен в вашу корзину, полная стоимость вашей корзины, включая любые покупки аксессуаров, будет иметь право на беспроцентный кредит. Это зависит от стоимости дополнительных продуктов, не превышающей стоимость соответствующего продукта. Депозит не требуется, платежи будут взиматься прямым дебетом ежемесячными платежами, причем первый взнос взимается через 30 дней после отгрузки продукта. Что я получу от финансового провайдера
Как это выглядит с полезной стороны и производительности?
Как это выглядит с полезной стороны и производительности? С точки зрения связи с компьютером мы выделяем четыре (основные) категории полупроводниковых носителей - SATA, mSATA, M.2
Но как сохранить такой файл PDF, чтобы он был у вас под рукой?
Но как сохранить такой файл PDF, чтобы он был у вас под рукой? Для этого есть различные варианты, которые мы объясним вам ниже. Сохранить PDF в iBooks Если вы получили файл PDF по электронной почте, вы можете открыть и просмотреть его немедленно. Если вы хотите сохранить файл, вы можете переслать его интерактивные книги Apple, собственное приложение для чтения книг и документов. Следуйте инструкциям ниже:
А как насчет их использования на вашем мобильном сайте?
А как насчет их использования на вашем мобильном сайте? Все, что вам нужно сделать, это скопировать код CSS, который вы уже используете для рабочего стола. После этого просто добавьте @ livechat-mobile {в начале стиля и закрывающую скобку (}) в его конце и вставьте код в настройку LiveChat, используя собственный раздел CSS . Добавив те же CSS-коды, но один из них с дополнительным мобильным контейнером
Как вам понравилась эта статья?
Как вам понравилась эта статья? (Всего: 9, в среднем: 4,2)
Как он сравнивает цену с предлагаемыми возможностями?
Как он сравнивает цену с предлагаемыми возможностями? Технические характеристики Huawei P10 Lite WAS-LX1 : 5,2-дюймовый IPS-дисплей с разрешением Full HD (1080 × 1920), 8-ядерный процессор Kirin 658 (4 х ARM Cortex-A53 2,3 ГГц + 4 х ARM Cortex-A53 1,7 ГГц) с ARM Mali T830MP2, 3 ГБ ОЗУ, 32 ГБ встроенной памяти (доступно пользователю около 22 ГБ), поддержка карт microSD, основная камера 12 мегапикселей
Но как это исправить навсегда?
Но как это исправить навсегда? Если вы плохо разбираетесь в командной строке Gnu / Linux, вы можете просто использовать Rescatux Restore Grub. Обновление Grub Menues (Видео) Иногда конфигурация Grub больше не действительна. Либо порядок ваших жестких дисков при загрузке изменился (это должно повлиять только на GRUB1), либо вы добавили новую установку Windows, и она не обнаружена. Обновите опцию Grub, и вы сможете

Как ты это делаешь?
Ваша работа включает в себя сбор опросов и отзывов?
Как ты это делаешь?
Вы отправляете электронные письма своей команде, просите обзоры и вручную вводите лист?
Или есть централизованная таблица Excel и попросить всех обновить?
Или это должно?
Вы встречали какие-либо персонализированные результаты поиска Bing, которые вы действительно цените?
Что заставляет вас использовать Cortana в браузере и поисковой системе по умолчанию?
Но как этот бесплатный редактор PDF сочетается с Adobe Acrobat Pro DC?
Но как этот бесплатный редактор PDF сочетается с Adobe Acrobat Pro DC?

Новости

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

Пиротехника своими руками в домашних
Самые лучшие полезные самоделки рунета! Как сделать самому, мастер-классы, фото, чертежи, инструкции, книги, видео. Главная САМОДЕЛКИ Дизайнерские

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

Как сделать красивую снежинку из бумаги
Красивые бумажные снежинки станут хорошим украшением дома на Новый год. Они создадут в квартире атмосферу белоснежной, зимней сказки. Да и просто занимаясь вырезанием из бумаги снежинок разнообразной

Аниматоры на детские праздники в Зеленограде
Уж сколько раз твердили миру…Что готовиться ко дню рождения нужно заранее, а не бегать в предпраздничный день угорелой кошкой. Нельзя впихнуть в 24 часа дела, рассчитанные на недели. К празднику нужно

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