Yandex.Search dla witryny wykorzystuje wszystkie duże technologie wyszukiwania Yandex. Uwzględnianie uwzględnia różne formy wyrazów, poprawia błędy i literówki, a także niepoprawny układ klawiatury.

Wyszukiwanie jest w stanie znaleźć na stronie nie tylko słowa, które znajdują się w zapytaniu użytkownika, ale także ich synonimy. Na przykład, jeśli użytkownik szuka informacji o swiat gry Warcrafta, niekoniecznie napisze pełny tytuł. Jego prośba może wyglądać jak , a nawet [WoW]. Ale Yandex zrozumie, czego potrzebuje dana osoba i udzieli mu właściwej odpowiedzi.

Yandex.Search dla witryny rozumie różne pisownie słów, nawet te niepoprawne

Konfigurowanie synonimów wyszukiwania

Możesz uzupełnić główną bazę synonimów wyszukiwania o własne opcje specyficzne dla Twojej witryny i użytkowników. Aby to zrobić, Yandex.Search dla witryny ma prosty i intuicyjny interfejs.

W lewej kolumnie dodaj słowa, które użytkownicy wpisują w formularzu wyszukiwania, a w prawej kolumnie dodaj odpowiadające im synonimy ze stron Twojej witryny lub witryn.

Elastyczne ustawienia

Ty wybierasz, jak wyszukiwarka Yandex wygląda w Twojej witrynie. Może być jasnym elementem interfejsu lub niezbyt rzucającym się w oczy, ale zauważalnym asystentem w nawigacji – wszystko zależy od Twoich preferencji i celów.

Od Ciebie zależy, czy pozostawisz standardowy projekt znany wszystkim użytkownikom Yandex, czy zaprojektujesz ciąg wyszukiwania i wyniki we własnych kolorach firmowych.

A jeśli okaże się, że standardowe opcje projektowe Formularz wyszukiwania a wyniki wyszukiwania nie wystarczą, aby idealnie dopasować wyszukiwanie do projektu witryny, Ty (lub Twoi programiści) możesz zastosować niestandardowe style CSS do wymaganych formularzy lub elementów SERP. Dzięki temu możesz w pełni kontrolować wygląd wyszukiwania i uzupełniać go o potrzebne elementy.

Jeśli znalezione dokumenty zawierają filmy lub zdjęcia, ich podglądy zostaną wstawione do wyników wyszukiwania. Możesz także dostosować te podglądy, stosując własne style CSS.

Wyniki wyszukiwania otwierają się na stronie Twojej witryny lub w Yandex - w ten sposób.

Sugestie wyszukiwania

Wyszukiwanie witryny, podobnie jak główne wyszukiwanie Yandex, zawiera sugestie wyszukiwania - przyspieszają one wprowadzanie zapytania. Jeszcze zanim odwiedzający witrynę całkowicie wpisze żądanie, będzie mógł przejść do pożądana opcja. To znacznie przyspiesza.

Yandex utworzy zestaw sugestii wyszukiwania dostosowanych do Twoich potrzeb. Uwzględnią zapytania użytkowników oraz zawartość stron, które chcesz przeszukać.

W porządku, jeśli użytkownicy popełniają błędy podczas wprowadzania zapytania. Wyszukiwanie strony jest w stanie poprawić literówki, błędy gramatyczne i zły układ klawiatury - w tym wszystko na raz. Poprawka działa dla żądań w języku rosyjskim, angielskim, ukraińskim, białoruskim, tureckim i kilku innych językach.

Sugestie wyszukiwania mogą poprawić błędy i literówki, a także nieprawidłowe układy klawiatury.

Możesz edytować sugestie wyszukiwania oferowane przez Yandex. Na przykład dodaj nowe, zmień kolejność istniejących i usuń niepotrzebne. Dzięki temu narzędziu z łatwością poinformujesz użytkowników, czego mają szukać w Twojej witrynie.

Zawęź wyniki wyszukiwania

Możesz pomóc odwiedzającym znaleźć dokładnie to, czego potrzebują w Twojej witrynie. Może to być na przykład artykuł opublikowany w sierpniu 2010 roku lub dokument z działu Recenzje i testy. Wyszukiwanie witryny zapewnia narzędzie do doprecyzowania zapytań - możesz wybrać sekcję witryny, określić przedział czasowy, a także format lub język dokumentu.

Masz również możliwość określenia słów kluczowych, które odwiedzający może dodać do zapytania. Na przykład, jeśli Twoja witryna jest związana z grami, słowami kluczowymi mogą być „gra”, „przegląd”, „kup” i tak dalej.

Tak wyglądają rafinery w wynikach wyszukiwania.

Tematy wyszukiwania

Jeśli chcesz zorganizować wyszukiwanie w wielu różnych witrynach lub w grupie witryn o tym samym temacie, użyj motywów wyszukiwania. Jeden motyw wyszukiwania może łączyć do 100 000 witryn. Ich listę można łatwo edytować za pomocą żądań HTTP.

Przygotuj listę stron, utwórz nowy temat i prześlij go do moderacji. Po potwierdzeniu tematu zorganizuj wyszukiwanie na jego podstawie za pomocą usługi Yandex.Search for site lub Yandex.XML.

Utwórz motyw: http://site.yandex.ru/themes/new/

statystyki zapytań wyszukiwania

Jeśli chcesz wiedzieć, czego szukają odwiedzający Twoją witrynę, odwiedź sekcję Statystyki. Zawiera informacje o żądaniach użytkowników.

Statystyki żądań są aktualizowane codziennie i zawierają następujące informacje:

• lista zapytań wyszukiwania;
• ile razy zadano każde z tych zapytań;
• ile wyników zostało wyświetlonych dla każdego zapytania;
• ile kliknięć było w wynikach wyszukiwania.

Statystyki pomogą Ci zrozumieć, które sekcje Twojej witryny wymagają poprawy.

Interfejs statystyk witryny wyszukiwania.

Linia wyszukiwania

Z tego typu wyszukiwania korzystamy cały czas, każdego dnia.

Pole wyszukiwania dla witryny. Pomysły na dekorację

Aby znaleźć odpowiedź na niektóre z naszych pytań, wystarczy wpisać zapytanie w pasek adresu i naciśnij Enter

Szukaj na stronie witryny

CTRL +FZnaleźć»

Internet

Po prawej stronie tego pola wprowadzana jest kwota żądanego żądania. Możesz przechodzić od jednego wyniku do drugiego za pomocą strzałek w górę iw dół. Aktualnie wybrane słowo zostanie zaznaczone przyciemnionym kolorem. Pomoże Ci to określić, gdzie jesteś na stronie. Pamiętaj również, że jeśli nie umieścisz spacji po słowie „internet”, przeglądarka wskaże słowo, które ma zestaw wprowadzonych znaków. „Internet” - „INTERNET”. Dlatego jeśli potrzebujesz dokładnego dopasowania wyniku wyszukiwania do wyszukiwanego słowa, umieść po nim spację.

Skrót klawiszowy CTRL +F

Znajdź (…) w Google

W podobny sposób można znaleźć dane o dowolnym obrazie (obrazie) znajdującym się na stronie serwisu. Wystarczy kliknąć na zdjęcie kliknij prawym przyciskiem myszy myszką i wybierz " Znajdź obraz (Google)»

Aleksander Żurba

W przypadku, gdy musisz pracować z dużym dokumentem, wyszukiwanie określonego słowa lub frazy może być trudne i czasochłonne. Microsoft Word pozwala na automatyczne wyszukiwanie dokumentu, a także szybko podmieniaj słowa i frazy za pomocą narzędzia Znajdź i zamień. Chcesz dowiedzieć się, jak korzystać z tego narzędzia? Następnie uważnie przeczytaj tę lekcję do końca!

Wyszukiwanie tekstu

Jako przykład weźmy część znanej pracy i użyjmy polecenia Znaleźć znaleźć nazwisko głównego bohatera w tekście.

Możesz wywołać polecenie Znaleźć naciskając Ctrl+f na klawiaturze.

Aby otworzyć dodatkowe opcje wyszukiwania, użyj menu rozwijanego znajdującego się w polu wyszukiwania.

Zamiana tekstu

Zdarza się, że popełniany jest błąd, który powtarza się w całym dokumencie. Na przykład czyjeś imię jest błędnie napisane lub pewne słowo lub fraza muszą zostać zmienione na inne. Możesz użyć funkcji Znajdź i zamień aby szybko wprowadzać poprawki. W naszym przykładzie zmienimy pełną nazwę firmy Microsoft Corporation na MS.

Możesz iść do Okno dialogowe Znajdź i zamień naciskając kombinację klawiszy Ctrl+H na klawiaturze.

Do wyboru Dodatkowe opcje szukaj i zamień kliknij Więcej w oknie dialogowym Znajdź i zamień. Tutaj możesz wybrać opcje, takie jak Tylko całe słowo lub Ignoruj ​​znaki interpunkcyjne.

Witam. Zanim przejdę do rozważań na nasz dzisiejszy temat, chciałbym pogratulować nam wszystkim minionego święta - Wielkiego Zwycięstwa. Powiedz dziadkom, pradziadkom, którzy walczyli, a także, którzy pracowali na tyłach.Wielkie dzięki. Dziękuję za stanie, przezwyciężenie, dokonanie bohaterskiego czynu, za czyste niebo, za pokój na naszej ziemi. I oddać głęboki ukłon tym, którzy przybliżyli godzinę Zwycięstwa. Dziękuję Ci!!!

A teraz wróćmy do naszego tematu. Dzisiaj porozmawiamy o tym, jak korzystać z wyszukiwania w przeglądarce. Rozważ kilka Funkcje Google Chrom.

Linia wyszukiwania

Z tego typu wyszukiwania korzystamy cały czas, każdego dnia. Aby znaleźć odpowiedź na niektóre z naszych pytań, wystarczy wpisać zapytanie w pasku adresu i nacisnąć Enter

Gdy wpisujemy nasze żądanie, przeglądarka oferuje możliwe kombinacje z nim, które wcześniej wpisali inni internauci. Mamy do wyboru: wyszukaj dokładnie nasze zapytanie lub wybierz inną frazę z listy przeglądarki.

Przykład pokazuje, że jesteśmy zaproszeni do wyszukiwania w systemie Google, ale możesz zmienić system na inny.

Szukaj na stronie witryny

Czasami musimy znaleźć słowo lub frazę na stronie internetowej. Ale z powodu duża liczba informacji, czasami jest to trudne. Załóżmy, że znasz nazwę utworu swojego artysty, przejdź do zasobu, w którym prezentowane są wszystkie jego kompozycje. Znalezienie właściwej ścieżki wśród wszystkich innych jest dość trudne. W tym przypadku pomoże nam jedna metoda, którą teraz szczegółowo przeanalizujemy.

Na przykład otworzyłeś portal, na którym, jak zakładasz, znajduje się wyszukiwane słowo, nazwa miasta, kompozycje itp. Do szybkiego wyszukiwania na stronie serwisu używamy skrótu klawiaturowego CTRL +F lub przejdź do menu głównego przeglądarki i wybierz pozycję " Znaleźć»

Następnie w prawym górnym rogu okna przeglądarki pojawi się pole do wpisywania słów. W miarę wpisywania znaków przeglądarka zacznie wyszukiwać i podświetlać w tekście kolejność wprowadzanych liter.

Jako przykład zobaczmy, ile słów „ Internet" zlokalizowany na strona główna nasza strona.

Wskazujemy to w określonym polu, a przeglądarka podświetla wyniki wyszukiwania na żółto.

Po prawej stronie tego pola wprowadzana jest kwota żądanego żądania. Możesz przechodzić od jednego wyniku do drugiego za pomocą strzałek w górę iw dół. Aktualnie wybrane słowo zostanie zaznaczone przyciemnionym kolorem. Pomoże Ci to określić, gdzie jesteś na stronie.

Pamiętaj również, że jeśli nie umieścisz spacji po słowie „internet”, przeglądarka wskaże słowo, które ma zestaw wprowadzonych znaków. „Internet” - „INTERNET”. Dlatego jeśli potrzebujesz dokładnego dopasowania wyniku wyszukiwania do wyszukiwanego słowa, umieść po nim spację.

Skrót klawiszowy CTRL +F do wyszukiwania na stronie zasobów można użyć w dowolnym nowoczesna przeglądarka. W przeglądarce Firefox to pole znajduje się w lewym dolnym rogu. Bądź ostrożny.

Szybkie wyszukiwanie znaczeń słów, fraz, obrazów

Podczas zapoznawania się z informacjami o jakimś zasobie możemy natknąć się na termin lub słowo, którego znaczenia nie mamy pojęcia. Aby szybciej uzyskać dane o tym słowie lub frazie, po prostu zaznaczamy fragment tekstu na stronie i prawym przyciskiem myszy wywołujemy menu, w którym wybieramy „ Znajdź (…) w Google» (podświetlona fraza lub słowo zostaną wskazane w nawiasach klamrowych). Na przykład w naszym przykładzie wygląda to tak.

W podobny sposób można znaleźć dane o dowolnym obrazie (obrazie) znajdującym się na stronie serwisu.

Pole wyszukiwania

W ten sam sposób kliknij zdjęcie prawym przyciskiem myszy i wybierz „ Znajdź obraz (Google)»

Możesz dowiedzieć się więcej o tym, jak znaleźć obraz w Yandex i Google, czytając ten artykuł i tutaj.

Być może tutaj i wszystko na tym. Dzisiaj przyjrzeliśmy się możliwościom wyszukiwania w przeglądarce. Do zobaczenia.

Najlepszym sposobem na naukę jest bycie asystentem profesjonalisty. Trochę gorzej jest spróbować samemu bez nadzoru doświadczonej osoby. Teoria jest użyteczna tylko jako hipoteza, którą należy sprawdzić w praktyce.

sala operacyjna system Windows udostępnia kilka sposobów wyszukiwania plików i folderów. Wyszukiwanie plików, folderów, programów i wiadomości E-mail Na komputerze możesz użyć pola wyszukiwania w menu Start. Ale kiedy próbuję wyszukać coś w menu startowym, nie ma pola wyszukiwania.

Istnieje kilka możliwości przywrócenia wszystkiego na swoje miejsce.

Pierwsza opcja

Najprostszym sposobem jest próba zwrócenia pola wyszukiwania Narzędzia Windows. Otwórz Panel sterowania — programy i funkcje. Wybierz kartę „Włącz lub wyłącz funkcje systemu Windows". Znajdź komponent Wyszukiwanie w systemie Windows. Jeśli komponent nie jest wybrany, zaznacz pole.

Kliknij OK. Teraz sprawdź, czy usługa jest włączona, czy nie Wyszukiwanie w systemie Windows. Aby to zrobić, otwórz Panel sterowania - Narzędzia administracyjne - Usługi. Sprawdzenie trybu serwisowego Wyszukiwanie w systemie Windows. Musi stać Automatycznie.

Druga opcja

Zastosować . Aby to zrobić, w menu Start - Uruchom wpisz polecenie gpedit.msc i OK. Teraz szukamy Konfiguracja użytkownika - Szablony administracyjne - Menu Start i pasek zadań. W prawej połowie okna poszukaj elementu Usuń link „Wyszukaj” z menu „Start”. Sprawdź wartość tego parametru. Musi być Nie ustawiony.

Trzecia opcja

Ta opcja jest przydatna dla tych użytkowników, którzy mają wersję systemu Windows inną niż Pro, Enterprise i Ultimate. Tylko te wersje obsługują Edytor lokalnych zasad grupy.

Otwórz Edytor rejestru: naciśnij klawisz Win + R i wprowadź polecenie regedit I ok. Znajdowanie sekcji

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer

jeśli w tej sekcji znajduje się parametr Nie znaleziono- należy go usunąć.

Jeśli Twoja witryna ma już wystarczającą ilość treści, musisz pomyśleć o wygodnym wyszukiwaniu w witrynie. Oczywiście możesz użyć wbudowanego systemu CMS swojej witryny lub, jeśli Twoja witryna jest w czystym HTML, możesz napisać skrypt, który przeszuka witrynę HTML. Ale jest trzecia opcja i jest bardziej optymalna - jest to wyszukiwanie witryny za pomocą wyszukiwarek.

Dlaczego więc wyszukiwanie w witrynie z wyszukiwarek jest najskuteczniejsze? Przemawia za tym kilka czynników:

• Po pierwsze, i najważniejsze, wyszukiwarki, jakkolwiek trywialne może się wydawać, specjalizują się w wyszukiwaniu. Dlatego powinieneś zaufać jakości ich algorytmów wyszukiwania.
• Wyszukiwarki uwzględniają morfologię języka;
• Używane są wskazówki wyszukiwania;
• Poprawki błędów w Zapytania;
• Statystyki wyszukiwania.

Wyszukiwanie w witrynie przez Yandex.Search

Wyszukiwarka Yandex zapewnia bezpłatne poręczne narzędzie integracja wyszukiwania: Yandex.Wyszukaj witrynę.

Jak już powiedzieliśmy, wyszukiwanie w witrynie bierze pod uwagę morfologia języka, tj. uwzględnia różne formy słów, pisowni, błędów, literówek i tak dalej. Wyszukiwanie z Yandex można również wyszukiwać nie tylko osobno dane słowo, ale także przez jego synonimy. Możesz utworzyć podstawowy synonim dla każdego słowa, którego chcesz użyć w wyszukiwaniu.

Wyszukaj stronę z Yandex has proste i elastyczne ustawienia, możesz łatwo dostosować jego wygląd: zostaw standardowy, znajomy projekt z Yandex lub zaprojektuj go w kolorach swojej witryny. Masz pełną kontrolę nad dostosowywaniem, od wyglądu po stylizację CSS i elementy wyszukiwania. Poszukiwania prowadzone są nie tylko przez dokumenty tekstowe, ale także przy zdjęciach, filmach, są one pokazywane w podglądzie, którego wygląd również można zmienić.

Podczas wyszukiwania w witrynie, a także podczas przeszukiwania pola wyszukiwania na yandex.ru, po wpisaniu słowa w polu wyszukiwania zostanie wyświetlony monit lista podpowiedzi co przyspieszy proces wyszukiwania. Yandex automatycznie utworzy bazę prywatnych zapytań wyszukiwania i zgodnie z nią będzie wydawał podpowiedzi.

Ciąg wyszukiwania można uzupełnić o narzędzie doprecyzowanie wyników wyszukiwania. Oznacza to, że dana osoba może znaleźć dokładnie to, czego potrzebuje, znając przybliżoną datę publikacji materiału lub sekcję strony, w której się znajduje (blog, artykuły, pomoc i wsparcie), czy też jego format i język.

Wyszukiwanie w witrynie poprawi i przyspieszy indeksowanie w wyszukiwarce Yandex, a także pomoże stworzyć własny ranking stron według ważności, zgodnie z którym problem wystąpi, wystarczy zgłosić te strony robotowi Yandex.

w statystykach wyszukiwania będziesz mógł zobaczyć dokładna informacja o zapytaniach wyszukiwanych przez odwiedzających witrynę przez określony, wybrany okres czasu.

Aby otrzymać formularz wyszukiwania dla swojej witryny, musisz podać nazwę wyszukiwania, adres witryny i wyrazić zgodę na warunki korzystania z usługi. Następnie możesz dostosować wygląd formularza wyszukiwania oraz wygląd wyników wyszukiwania. Następnie otrzymasz gotowy kod HTML do instalacji na swojej stronie. Więcej szczegółowe instrukcje Zobacz poniżej dla instalacji.

Wyszukiwanie w witrynie Google: Wyszukiwanie w witrynie

wyszukiwarka System Google zapewnia również przydatne narzędzie wyszukiwania w Twojej witrynie: Niestandardowa wyszukiwarka Google: wyszukiwanie witryn, jest niestety płatny, ale ma możliwość zarobienia dodatkowych pieniędzy na reklamach AdSense.

Załóżmy od razu, że koszt rocznej obsługi wyszukiwania w witrynie Google będzie kosztował co najmniej 100 USD. Koszt zależy od wielkości Twojej witryny i średniej liczby żądań rocznych.

Wyszukiwarka Google dla pracy zapewnia najwyższą jakość wyszukiwania przy użyciu tej samej technologii, co wyszukiwarka Google. Google gwarantuje wysoką trafność, czyli zgodność z żądaniami, funkcjonalność, integracja pod klucz.

Wymieniamy główne funkcje wyszukiwania witryn z Google:

• Personalizacja. Możesz ułożyć wyszukiwanie jak chcesz, możesz usunąć logo Google i umieścić własne, zmienić kolory, kształt, ogólnie cały wygląd.
• Wielojęzyczny. Wyszukiwanie jest możliwe w dowolnym języku, możesz ustawić domyślny język lub zostanie on wykryty automatycznie.
• Wyniki stronniczości. Możesz ręcznie dostosować ranking i wybór wyników wyszukiwania w zależności od daty publikacji, np. im nowszy materiał, tym wyżej w wynikach.
• Doprecyzowanie według etykiet jest jak doprecyzowanie wyników wyszukiwania Yandex, tworzysz kategorie materiałów, których użytkownik w razie potrzeby wyszukuje.
• Wyszukiwanie obrazów i ilustrowanie wyników wyszukiwania za pomocą obrazów, których rozmiar można automatycznie zmieniać lub dostosowywać;
• Brak reklamy;
• Indeksowanie na żądanie, tj. jeśli dodałeś nowy materiał lub wprowadziłeś zmiany w starym, możesz sam wysłać robota Google, aby naprawił aktualizacje.
• Synonimy. Katalog zapytań jest automatycznie wypełniany synonimami, różne opcje pisownię słów (Toyota, Toyota), a także skróty i ich dekodowanie.
• Wybierz adres URL do autouzupełniania. Tutaj możesz ręcznie skonfigurować i kontrolować listę monitów, które są otwierane dla użytkownika, gdy zaczyna on wprowadzać zapytanie.
• Zaletą wyszukiwarki Google jest to, że możesz przeszukiwać nie tylko jedną witrynę, ale kilka.
• Łączenie wyszukiwania w witrynie z innymi Usługi Google. Na stronie będziesz mógł śledzić statystyki zapytań i zachowań odwiedzających, a usługa AdWords pozwoli Ci zarabiać na umieszczaniu reklam.

Dodając wyszukiwarkę Google do swojej witryny, musisz podać nazwę swojej „ wyszukiwarka”, opis i określ witryny, na których zostanie przeprowadzone wyszukiwanie. Następnie musisz wybrać projekt paska wyszukiwania, po czym zostaniesz zaproszony do wypróbowania wyszukiwania. Następnie otrzymasz kod, który możesz dodać do Twojej witryny.

Instrukcje: jak osadzić Yandex.Search na stronie

Przeanalizujmy teraz instalację Yandex.Wyszukaj witrynę na przykładzie naszej witryny Nubex. Kod usługi można wstawić do cms, zintegrować z witryną lub po prostu wkleić kod do dowolnego odpowiedniego bloku witryny.

1. Przejdź do witryny Yandex.Search for site i kliknij przycisk Ustaw wyszukiwanie.

2. Wypełnij wymagane pola, dodaj swoją witrynę do obszaru wyszukiwania, nie zapomnij podać swojego adresu e-mail. Aby witryna została pomyślnie dodana do „Obszaru wyszukiwania”, upewnij się, że została ona dodana do . Przejdź do kroku 2.

3. Dostosuj wygląd paska wyszukiwania: kolor, czcionka, z tłem lub bez. Przejdź do kroku 3.

4. Trzecim krokiem jest doprecyzowanie, jak będzie wyglądał wynik wyszukiwania i na której stronie będzie się znajdował (na stronie Yandex lub w Twojej witrynie). Na dole strony znajduje się podgląd wyników, do których można się odwołać. Przejdź do kroku 4.

5. Sprawdź wydajność wyszukiwania w swojej witrynie. I przejdź do następnego kroku.

6. Teraz musisz skopiować kod serwisowy i zainstalować go na stronie. Należy pamiętać, że istnieją dwa różne kody wyszukiwania i wyników wyszukiwania. Dlaczego jest to potrzebne? Możesz ustawić ciąg wyszukiwania w jednym polu lub w bocznej kolumnie i wyświetlać wyniki na osobnej stronie. W ten sposób użytkownik zada zapytanie i zostanie przekierowany na stronę z wynikami.

7. Kod wyniku wyszukiwania może wynosić 2 różne rodzaje: iframe i html&css. Jaka jest różnica? Iframe to prostsza wersja kodu, bardziej nadaje się do witryn o złożonej konstrukcji, ale ogranicza pojawianie się wyników w dostosowywaniu. Html&CSS - wyniki wyszukiwania zostaną sformatowane zgodnie ze stylem css Twojej witryny, a kod zostanie osadzony w całej strukturze strony witryny.

8. Teraz przechodzimy do panelu administracyjnego serwisu. Zdecydowaliśmy się zainstalować pasek wyszukiwania na stronie głównej naszego serwisu, więc przechodzimy do sekcji „Dokumenty witryny” -> „Kolumna na stronie głównej”. I kliknij przycisk „Utwórz blok tekstowy”.

9. W polu do wstawiania tekstu kliknij przycisk „Źródło”. Zobaczysz kod HTML strony, wklej skopiowany kod formularza wyszukiwania i wyniki tutaj. Kliknij przycisk „Zapisz”.

10. Odśwież swoją stronę internetową. Powinien się pojawić pasek wyszukiwania.

Wniosek

Korzystając z dowolnej niestandardowej wyszukiwarki, niezależnie od tego, czy jest to wyszukiwanie witryny Google, czy Yandex, należy pamiętać, że wyszukiwanie nie jest przeprowadzane w witrynie jako takiej, ale na stronach witryny, które są obecne w indeksie wybranej wyszukiwarki. Dlatego musisz zadbać o to, aby wszystkie strony witryny, które chcesz udostępnić do wyszukiwania, były otwarte do indeksowania i uwzględnione w indeksie wyszukiwarki.

Kreator witryn Nubex ma wbudowany widżet wyszukiwania, który można włączyć dla pasków bocznych.

W tym samouczku chciałbym pokazać, jak możesz udekorować swój formularz wyszukiwania. Nie zrobimy nic bardzo skomplikowanego. Zamiast tego przyjrzyjmy się czterem sposobom udekorowania formularza wyszukiwania za pomocą CSS przejścia

Poniżej znajduje się kod zwykłego pola wyszukiwania.

Aby zacząć w swoim plik HTML utwórz element wejściowy z atrybutem type=search. Jeśli spojrzysz na poniższy kod, zobaczysz 4 różne elementy: element div z klasą .box , element div z klasą .container-1 , .icon i sam pasek wyszukiwania.

Wszystkie cztery przykłady będą oczywiście miały pasek wyszukiwania i ikonę wyszukiwania. Każdy z czterech przykładów będzie w osobnym kontenerze, dzięki czemu będziemy mogli je niezależnie modyfikować. Wreszcie blok div jest odpowiedzialny za utrzymywanie naszego kontenera w środku.

Dodawanie świetnej czcionki

Font Awesome to biblioteka ikon. Możesz dowiedzieć się więcej o tej bibliotece na ich stronie internetowej.

Powyższy fragment kodu pokazuje jeden z przykładów, w jaki sposób możesz umieścić ikonę w swoim znaczniku. Jednak, aby ikona działała, musisz również połączyć się z biblioteką Font Awesome, jak opisano poniżej. Dodaj ten link do tagu head w swoim dokumencie.

Style początkowe

Teraz dodamy kilka stylów do oddzielny plik(który również będziesz musiał dodać do tagu head w swoim dokumencie).

Treść(tło: #343d46; ) .box(margines: 100px auto; szerokość: 300px; wysokość: 50px; )

W powyższym fragmencie kodu CSS dodaliśmy kilka podstawowych stylów dla strony. Styl pól wyszukiwania będzie w kolorze ciemnoniebieskim, więc tło korpusu nie musi być całkowicie białe. Klasa pudełkowa jest również wyśrodkowana na stronie lekcji.

Wykończenie pola wyszukiwania

Ta lekcja dotyczy nauczenia się dekorowania pól wyszukiwania. W pierwszym przykładzie wyjaśnię bardziej szczegółowo, co się dzieje; upewnij się, że wiesz dokładnie, co się dzieje. W pozostałych trzech przykładach pokażę tylko opcje przejścia.

#jeden. Rozjaśnianie tła

Pierwszym przykładem, którym się zajmiemy, jest zmiana tła wprowadzania wyszukiwania po najechaniu myszą. Dodamy przejście, aby zmiana nie była nagła.

HTML

Widziałeś już podstawowy kod HTML znaczników. To będzie jeden fragment dla wszystkich przykładów.

css

Aby przypisać styl, musimy zdefiniować styl CSS samego pola wyszukiwania. Dodajmy wszystko zasady css jeden po drugim, aby dokładnie wiedzieć, co się dzieje.

Kontener-1 (szerokość: 300px; wyrównanie w pionie: środek; odstęp: nowrap; pozycja: względna; )

Najpierw nadajmy styl klasie kontenera. Najważniejszą właściwością jest prawdopodobnie pozycja: relative . Jest to celowe, aby ikona mogła być umieszczona nad wejściem, jak zobaczysz.

Container-1 input#search(szerokość: 300px; wysokość: 50px; tło: #2b303b; obramowanie: brak; rozmiar czcionki: 10pt; float: lewo; kolor: #63717f; padding-left: 45px; -webkit-border- promień: 5px; -moz-border-radius: 5px; border-radius: 5px; )

Wejście

Następnie określimy styl wejścia. Wszystko to jest tylko ozdobą, ponieważ promień obramowania lub kolor tła nie wpływa na funkcjonalność wejścia. Zwróć uwagę na właściwości lewego wcięcia. Ma to na celu zrobienie miejsca na ikonę, aby nie znajdowała się dosłownie nad tekstem wewnątrz danych wejściowych.

Poniżej mamy cztery różne reguły dotyczące koloru tekstu zastępczego w naszym przykładzie. Szukaj. Niestety reguły muszą być oddzielne dla poszczególnych prefiksów dostawców i nie można ich łączyć w skróconą pisemną regułę. To trochę denerwujące i powtórzy się w każdym przykładzie!

Container-1 input#search::-webkit-input-placeholder ( color: #65737e; ) .container-1 input#search:-moz-placeholder ( /* Firefox 18- */ color: #65737e; ) .container- 1 input#search::-moz-placeholder ( /* Firefox 19+ */ color: #65737e; ) .container-1 input#search:-ms-input-placeholder ( color: #65737e; )

Ikona

Wreszcie styl ikony. Najważniejsze jest to, że powinien znajdować się na górze danych wejściowych, więc przypisujemy mu pozycję: absolute . Marginesy pomagają ustawić ikonę na najwyższej pozycji na 50% .

.container-1 .icon( pozycja: bezwzględna; góra: 50%; lewy margines: 17 pikseli; górny margines: 17 pikseli; z-index: 1; kolor: #4f5b66; )

Dodawanie efektów najechania

Poniższy zestaw reguł określa, co dzieje się z polem wyszukiwania po najechaniu myszą. W tym przykładzie chcemy zmienić kolor tła. Aby pozbyć się żółtej lub niebieskiej poświaty wokół danych wejściowych (którą czasami dodają przeglądarki), ustaw outline: none .

Kontener-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active( zarys:brak; tło: #ffffff; )

Utwórz przejście

Aby dokonać przejścia, musimy dodać kilka linijek kodu. Wróćmy do reguły, w której zdefiniowaliśmy input style.container-1 input#search . Przed nawiasami zamykającymi dodaj następujący fragment:

przejście na webkit: łatwość w tle 0,55s; -moz-przejście: łatwość tła 0,55s; -przejście ms: łatwość w tle 0,55s; -o-przejście: łatwość w tle 0,55s; przejście: łatwość w tle 0,55s;

Definiujemy skrót właściwości przejścia, ale możemy również zdefiniować te trzy parametry indywidualnie. Po pierwsze, mówimy, że przejście powinno wpływać tylko na właściwość tła. Następnie mówimy, że przejście zajmie nieco ponad pół sekundy. Na koniec definiujemy zmiękczenie efektu przejścia. Swoboda nie jest jedynym efektem, który mógłby tu zadziałać, moglibyśmy użyć na przykład liniowego lub złagodzenia. Wyglądałoby to trochę inaczej. Wypróbuj, aby zobaczyć, co lubisz najbardziej.

Styl wprowadzania powinien teraz wyglądać jak poniższy kod.

Container-1 input#search(szerokość: 300px; wysokość: 50px; tło: #2b303b; obramowanie: brak; rozmiar czcionki: 10pt; float: lewo; kolor: #262626; padding-left: 45px; -webkit-border- radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: łatwość tła 0,55s; -moz-transition: łatwość tła 0,55s; -ms-transition: łatwość tła 0,55s; - o-przejście: łatwość w tle 0,55 s; przejście: łatwość w tle 0,55 s; )

Jak działają przejścia CSS?

#2. Rozwiń dane wejściowe po najechaniu kursorem

W tym przykładzie wyszukiwanie rozpocznie się od ikony wziernika. Najechanie kursorem na ikonę rozwinie wyszukiwanie, po czym możesz wpisać zapytanie. Większość kodu w tym przykładzie będzie bardzo podobna do poprzedniego.

HTML

css

.container-2( szerokość: 300px; pionowe wyrównanie: środek; białe znaki: nowrap; pozycja: względna; )

Styl wprowadzania dla tego przejścia jest inny. Wejście jest znacznie mniejsze, więc ikona może znajdować się poza placem. Wszystkie inne właściwości, takie jak tło lub kolor czcionki, pozostaną, nie chcemy całkowicie zmieniać stylu wyszukiwania.

Container-2 input#search(szerokość: 50px; wysokość: 50px; tło: #2b303b; obramowanie: brak; rozmiar czcionki: 10pt; float: lewo; kolor: #262626; padding-left: 35px; -webkit-border- radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff; -webkit-transition: szerokość 0,55s łatwość; -moz-transition: szerokość 0,55s łatwość; -ms-transition: szerokość 0,55 s luz; -o-przejście: szerokość .55 s luz; przejście: szerokość .55 s luz; )

Jak widać, nadpisałem właściwość przejścia, aby wpływać tylko na szerokość. Zachowałem ten sam czas, ponieważ jest wystarczająco szybki, aby nie denerwować użytkowników, ale wystarczająco długi, aby uzyskać ładny efekt.

Poniżej znajduje się kod ponownego kolorowania tekstu zastępczego.

Container-2 input#search::-webkit-input-placeholder ( color: #65737e; ) .container-2 input#search:-moz-placeholder ( /* Firefox 18- */ color: #65737e; ) .container- 2 input#search::-moz-placeholder ( /* Firefox 19+ */ color: #65737e; ) .container-2 input#search:-ms-input-placeholder ( color: #65737e; )

Po raz kolejny mamy styl CSS ikony. Pozostaje taka sama jak w poprzednim przykładzie.

Container-2 .icon( pozycja: bezwzględna; góra: 50%; lewy margines: 17 pikseli; górny margines: 17 pikseli; z-index: 1; kolor: #4f5b66; )

Dodawanie efektów najechania

Ostatnią rzeczą, jaką musimy zrobić, jest zdefiniowanie, jak będzie wyglądać wyszukiwanie podczas oczekiwania. W poniższym fragmencie kodu pierwsza reguła zapewnia, że ​​w formularzu nie ma poświaty wywołanej przez przeglądarkę i że podczas pisania — podczas pisania — pole wyszukiwania pozostaje rozwinięte. Środkowa reguła po najechaniu myszą po prostu rozszerza dane wejściowe do pełnej szerokości.

Kontener-2 input#search:focus, .container-2 input#search:active( zarys:brak; szerokość: 300px; ) .container-2:hover input#search(szerokość: 300px; ) .container-2:hover . ikona(kolor: #93a2ad; )

Ostatnią rzeczą, jaka się dzieje w powyższym kodzie, jest to, że po najechaniu kursorem ikona zmienia swój kolor. To tylko szczegół, który szybko pokaże użytkownikowi, że pole wyszukiwania jest aktywne, a nie bezczynne. Ta zmiana nie jest zaimplementowana w przypadku przejścia.

#3. Zwiększanie rozmiaru ikony po najechaniu kursorem

Ze wszystkich czterech przykładów ten jest najbardziej subtelny, zarówno pod względem kodu, jak i wyglądu. W takim przypadku ikona okna podglądu będzie się lekko unosić i powiększać.

HTML

Ponownie, znaczniki HTML ikony i pola wyszukiwania są takie same, jak w poprzednich dwóch przykładach. Oczywiście z wyjątkiem .container-3 .

css

W styl css nic specjalnego w tym przykładzie. W większości początek jest bardzo podobny do pierwszych przykładów, w których stan domyślny nie jest inny. Poniżej znajduje się kod kontenera i danych wejściowych. Zauważ, że tym razem nie ma przejścia do wprowadzania.

Container-3(szerokość: 300px; pionowe wyrównanie: środek; odstęp: nowrap; pozycja: względna; ) .container-3 input#search(szerokość: 300px; wysokość: 50px; tło: #2b303b; obramowanie: brak; font-size: 10pt; float: left; color: #262626; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff; )

Po raz kolejny mamy zasady zastępcze.

Container-3 input#search::-webkit-input-placeholder ( color: #65737e; ) .container-3 input#search:-moz-placeholder ( /* Firefox 18- */ color: #65737e; ) .container- 3 input#search::-moz-placeholder ( /* Firefox 19+ */ color: #65737e; ) .container-3 input#search:-ms-input-placeholder ( color: #65737e; )

Przez wygląd, ikona tego przykładu jest taka sama. Ta sama pozycja, ten sam kolor itp. Dodałem jednak do niego przejście. Te przejścia są przypisane do wszystkich właściwości, co jest krótsze niż ich indywidualna prezentacja.

Container-3 .icon( pozycja: bezwzględna; góra: 50%; margines lewy: 17 pikseli; margines górny: 17 pikseli; z-index: 1; kolor: #4f5b66; -webkit-transition: wszystkie 0,55s łatwość; -moz -przejście: spokój o wszystkich 0,55; -ms-przejście: spadek o wszystkie 0,55; -o-przejście: spadek o wszystkie 0,55s; przejście: spadek o wszystkie 0,55s; )

Dodawanie efektów najechania

.container-3 input#search:focus, .container-3 input#search:active( zarys:brak; ) .container-3:hover .icon(margin-top: 16px; color: #93a2ad; -webkit-transform: scale(1.5); /* Safari i Chrome */ -moz-transform:scale(1.5); /* Firefox */ -ms-transform:scale(1.5); /* IE 9 */ -o-transform:scale( 1.5); /* Opera */ transform:scale(1.5); )

W powyższym kodzie jest kilka rzeczy. Najpierw zmieniliśmy kolor ikony po najechaniu kursorem i przesunęliśmy ją nieco wyżej, aby była wyśrodkowana w pionie po powiększeniu. Po drugie, dodaliśmy do ikony transformację po najechaniu kursorem, aby stała się 1,5 raza większa od jej oryginalnego rozmiaru. Ponieważ wcześniej zdefiniowane przejście zostało skonfigurowane tak, aby wpłynąć na: wszystko właściwości, ikona wydaje się rosnąć po najechaniu myszą.

Przyjrzyjmy się jeszcze raz, aby dowiedzieć się więcej o transformacji.

#4. Wskaż przycisk

W przeciwieństwie do trzech ostatnich przykładów, ten będzie bardziej złożony. Najechanie kursorem na górną część danych wejściowych spowoduje kliknięcie przycisku umożliwiającego kontynuowanie - tak jakby wysłać lub iść. Wewnątrz przycisku znajduje się ikona lupy.

HTML

Ten kod HTML jest nieco inny. Dane wejściowe są oczywiście nadal dostępne, ale ikona znajduje się teraz w elemencie przycisku, który pojawia się po danych wejściowych. Ważne jest, aby przycisk znajdował się po danych wejściowych, ponieważ ma to związek z tym, jak efekt oczekiwania zostanie utworzony w CSS.

css

Zauważ, że CSS w tym przykładzie jest inny! Poniżej znajduje się fragment stylu kontenera. Po pierwsze, brakuje pozycji: względny; Nie jest to już ważne, ponieważ ikona nie polega na tym, że ma być umieszczona na górze wejścia. Mamy jednak overflow:hidden . Zapobiega to wyświetlaniu przycisku, gdy nie jest w toku. Technicznie przycisk, który się pojawia, znajduje się po prawej stronie wejścia, ale dzięki overflow:hidden nie pojawia się, gdy wychodzi poza szerokość kontenera - kontener i wejście mają tę samą szerokość.

Container-4( przepełnienie: ukryte; szerokość: 300px; pionowe wyrównanie: środek; białe znaki: nowrap; )

Poniższe dane wejściowe nie mają przejścia, ponieważ nie są już elementem.

Container-4 input#search(szerokość: 300px; wysokość: 50px; tło: #2b303b; obramowanie: brak; rozmiar czcionki: 10pt; float: lewo; kolor: #fff; padding-left: 15px; -webkit-border- promień: 5px; -moz-border-radius: 5px; border-radius: 5px; )

Następny fragment to zmiana koloru symboli zastępczych.

Container-4 input#search::-webkit-input-placeholder ( color: #65737e; ) .container-4 input#search:-moz-placeholder ( /* Firefox 18- */ color: #65737e; ) .container- 4 input#search::-moz-placeholder ( /* Firefox 19+ */ color: #65737e; ) .container-4 input#search:-ms-input-placeholder ( color: #65737e; )

Poniżej znajduje się kod stylu przycisku najechania. Sztuczka, aby dostać się z boku, polega na umieszczeniu go tuż za wejściem i ukryciu go, aż się zawiśnie. Przycisk to element, który się zmienia – porusza się – a więc to on definiuje przejście. Aby było łatwiej, zdefiniowałem przejście, które ma wpływ na wszystkie właściwości.

Container-4 button.icon( -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius -bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border: none; background: #232833; height: 50px; width: 50px; color: #4f5b66; opacity: 0 ; rozmiar czcionki: 10 punktów; -webkit-transition: łatwość dla wszystkich .55; -moz-transition: luz dla wszystkich .55; -ms-transition: luz dla wszystkich .55; -o-transition: luz dla wszystkich .55; przejście: wszystkie 0,55s łatwość ;)

Dodawanie efektów najechania

Aby zanikać, przycisk musi być umieszczony na górze wejścia. Odbywa się to poprzez ujemny margines. Wcześniej ustawiliśmy krycie przycisku na 0 , więc musimy zresetować go do 1, aby przycisk był również widoczny.

Ostatnia reguła zmienia tło przycisku dopiero po najechaniu na niego. Dobrze jest poinformować użytkownika, że ​​przycisk jest aktywny i może go kliknąć, aby przesłać prośbę; nie ma sensu mieć przycisku, jeśli wydaje się być nieaktywny.

Container-4:najedź na przycisk.icon, .container-4:aktywny przycisk.icon, .container-4:focus button.icon(kontur: brak; krycie: 1; margines-lewy: -50px; ) .container-4: hover button.icon:hover(tło: białe; )

Wniosek

Cóż, doszliśmy do końca naszego Eksperymenty CSS! Wzięliśmy podstawowy formularz wprowadzania wyszukiwania i użyliśmy mały zestaw skutki, aby zmienić jego zachowanie. Jak jeszcze można zmienić dane wejściowe? Jakie inne aspekty zastosowałbyś do przejść lub przekształceń CSS? Daj nam znać w komentarzach!