6 stylowych niestandardowych skrzynek wyszukiwania SEARCH BOXES | Blogger Skrypt

Kyani

Kyani

Translate

6 stylowych niestandardowych skrzynek wyszukiwania SEARCH BOXES


Istnieje niepisana zasada w świecie projektowania stron internetowych, które mówi, że każda strona ma pole wyszukiwania. Można i należy, zaprojektować gadżet wyszukiwania niestandardowego, który przyczynia się do wyszukania tematu na stronie, zapewniając jednocześnie kilka kluczowych korzyści zarówno dla klientów i Ciebie.

Korzyści dla Klientów

Search Box nie tylko przyczynia się do zwiększenia użyteczność witryny, ale jest bardzo wygodny dla odwiedzających witrynę i stałych bywalców. Dla tych, którzy byli na stronie, wiedzą, czego chcą i chcą ją teraz szybko pozwiedzać. To są niecierpliwi ludzie, którzy nie czują się dobrze jak mają brodzić myszką klikając w kilka różnych linków. Jeśli nie ogarniasz tego problem możesz ryzykować utratą tych czytelników. Dla nowych klientów, którzy chcą się czuć na stronie komfortowo przed zainwestowaniem większej ilości czasu, daje im on szansę spojrzeć na ich interesy obu stron e-commerce i blogu.

Korzyści dla Ciebie


Dodawanie Custom Search gadżet do Bloggera, być może najlepszych korzyści dla witryn e-commerce, ponieważ jest to przemysł, który z natury oferuje wiele bardzo konkretnych produktów. Na przykład, jeśli sprzedawane jest odzież odzieży i ktoś patrzy tylko na koszule, wyszukiwanie spowoduje przyniesie tylko na koszule tak, że człowiek może spojrzeć na wszystko w jednym miejscu. Blogerzy mogą nie mieć produktu do zaoferowania, ale dodanie gadżetu Custom Search Blogger może pomóc witrynie i SEO analityki. Google Analytics oferuje narzędzie, które będą śledzić wszystkie wyszukiwań wykonywanych przez pasek wyszukiwania, dzięki czemu można korzystać z tych danych w przypadku poprawy swoich słów kluczowych i zawartości wyborów. Roboty sieciowe Google i boty wyszukiwarek również przetestowują frazy w tych polach przy rzadkich okazjach, aby upewnić się, że wszystkie treści prowadzą gdzieś gdzie tworzy zamkniętą pętlę.

DODAJ SWOJĄ wyszukiwarkę na bloga

 

Dlatego, trzeba mieć pasek wyszukiwania, jeśli go nie masz nie oznacza że jesteś ograniczony.. Pasek wyszukiwania powinien być łatwy do znalezienia i łatwo dostępny, gdy ktoś go potrzebuje, ale poza tym wygląd search box jest zależny od Ciebie. Jeśli chcesz dodać gadżet wyszukiwania do niestandardowego Blogger, oto 6 stylowych opcji do wyboru. Wystarczy skopiować poniższy kod i wkleić do okienka pop-up html/javascript, aby dodać, wykonaj następujące czynności:

 

wyszukiwarka SearchBox



<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjETiyjLX4sI7We2tzeaykp9usbuQVsUsH6pkETZNDhyfcbNmwISjXmJ5f63f4r1fP0shOSiqJMAbuwjbzcU6Tsry3UK-AUjWEBSxl3dvdMp0IBawYbz4mv8_yptM0d4NBgKJG-rwNPtV2K/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

wyszukiwarka SearchBox


<style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjETiyjLX4sI7We2tzeaykp9usbuQVsUsH6pkETZNDhyfcbNmwISjXmJ5f63f4r1fP0shOSiqJMAbuwjbzcU6Tsry3UK-AUjWEBSxl3dvdMp0IBawYbz4mv8_yptM0d4NBgKJG-rwNPtV2K/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQp4mgRLluePmIX06Q9UtMM57tObEYAITLLS1xDCKEwWhTuOkbcFdvmPZ0iY-Awa-yrFAvBtAh_GC41Di4BdiDTc_2JpZjvXmmsfzBbaBDFWKZBNA_7orKPol7CUoDpOpSGdUPIdBHJRU7/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>


wyszukiwarka SearchBox

<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7meVfHIlksGjVDIlZj6o5Da-1LuaAfpa5uqwr25M2fDw-ZxIJH_yLes-TAdIN33WjI9fIC4U4F05SrlSkQqBJHdnEk8VUpneTxAVxz6r2hEEuRq9zGMUQQl1BvwpCP3YL5TmVVx0JOWpj/s1600/searchbar.png) no-repeat;
width: 208px;
height: 29px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 3px 0px 0px 20px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
color: #828282;
width: 70%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjZaSNBPE8FvFXoCu-RT_wBCBVseRqgmc05nBlW7QX0ub6rMDaW33p_K_7Zer6eBcXE5LjQL-l-Un5ynDiVJhmva_i7cwDucSUlBFEbYmGYHLPA2eUE370eFLFIQE3HHzkJq2S4TAslO8Y/s1600/magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
width: 21px;
height: 22px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhorYluV3lRgjX5bLQaUCRYH6x1g-UISZRWL0c13Y9hFAGPtXEw6bYnxs1VD5_3e9diurU8OMJ36nhv7VxgKy2d-DNVue9n9fSX0PoBYQcnt0ha3vFDrP2YxA4mFOphUARMKrOkbNv4YTvH/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhorYluV3lRgjX5bLQaUCRYH6x1g-UISZRWL0c13Y9hFAGPtXEw6bYnxs1VD5_3e9diurU8OMJ36nhv7VxgKy2d-DNVue9n9fSX0PoBYQcnt0ha3vFDrP2YxA4mFOphUARMKrOkbNv4YTvH/s1600/magnifier-hover.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

wyszukiwarka SearchBox

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA0JHpxkuE_E1xemy4FzffmQQ9BURVIVT1SRcFJjS3sf5nJ2LIHVjxV4qaN8Vjmg60hXoGL_n5vj-IZT4LCt3Ke8Rd_ho9DtJDwV3JWpKqASHRPV9PIpLRGLq9PUxwZ51CEGgOJy_p-PRY/s1600/search-box.png) no-repeat;
    height: 27px;
    width: 202px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 0px 0px 0px 12px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXC_j9dNLB63ggCylPNKN2GCSbc8MxEll5Iwilbk86Nr-PNdN-MXievEmxLS_700Lhg7aKpHcdmtpeNZA2MzEeekBs13mHBTi43HSM9bajMDK6Fx8vL57O2TfB2RDsitBRqMWYEXTqAOa/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVx2buwEh45AhIJ9XNVfNAkdVC9LGlUJ8w_w5MrxTJJxZQk2dvki4KW5wYFqx_EKDld6Ya7hPr8shwzHyI1i9SbcGjrnJfAMuMDzZCujtXh_r-xPoTbkbgTXXaizeH0m0BNDl8s71jOiw/s1600/search-button-hover.png) no-repeat;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>





<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnduCZn4nhTZ2siewz1w6ru5NTCGWoXPAMb_UHTVrNu3UeX5m9lkab6GJZFbPL5IQVlrox92XXgrOJcRrTCFxZ-aZbBkcYMNgy5GAMycF89ucvEBUQfpYygIEyPf7Gc4tkKWQ2PNuB8KdL/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1xLJ9jLfc8_XxVWHC8jzPUnlp9PnPhNPCgynE9nEWzSZQcB8RBHlizp7VjeBICeFDrlNCfa0HlPJKLF-GNzo0_m07YhzJo2LXKKrwNDJ9b-VrAj9mdI9GYNkaOI06wCCq9BNFWKFWoj0T/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-VDUcx-_BoICKdjzi3yEY_ia7xTTZ-ppPlt9vY_80GmKqFvguehYW3_NfwxkYqcrl8JKBGcIYdXXNirAD-JthO1rfY5qoC_GshUnV_XLlzQlBtUvoyHCM7sy799lSrAQS2kQ9CpE4UXtK/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-VDUcx-_BoICKdjzi3yEY_ia7xTTZ-ppPlt9vY_80GmKqFvguehYW3_NfwxkYqcrl8JKBGcIYdXXNirAD-JthO1rfY5qoC_GshUnV_XLlzQlBtUvoyHCM7sy799lSrAQS2kQ9CpE4UXtK/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>




 <style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVcha3_WOBC4m42NW4-msxat5DyHEaQsOX1KOUygNT46kb0WXaofSsem_98C9p45nZqYFEaWOhHRT8iOkT0qbAmciwvV_ibTvn10T-9bccIE-rddOOUWsJSPhC0MQqJ_itKqGyoCE6Cg8z/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUOifwQUSUp5MLjU3naig7vZUnIHrOGk97n9RSnlfglocxUh8vs5Ci92bVxskoPNCJYkv8mmDVEBTKnFaRnI09P5tKaJEiWMkb8MmdWkBKKsQxLj3TdjNsVseGz7If90ciJCXHOg3DZqfz/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(4.bp.blogspot.com/-yr-iPw6vXWg/VR-zr7-zrmI/AAAAAAAADKU/wo-B33EkrAo/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>


Kroki: jak dodać niestandardowy Searchj Box na Blogger

Krok 1 . ZALOGUJ SIĘ na Swoje konto w serwisie Blogger, następnie przejdź do układu > kliknij "dodaj gadżet "

dodac Gadet

Krok 2 . Wybierz HTML / JavaScript w oknie pop-up > wklej kod wewnątrz pustego pola.

Kopiuj / javascript

Krok 3 . Naciśnij przycisk zapisz.

To jest to!

Nie masz go, 6 stylowe wybory, które pozwoli Ci skorzystać z wszystkich wielkich zalet korzystania z wyszukiwarki, a jednocześnie pomaga swoim blogu wyróżniać. Po dodaniu nowego paska wyszukiwania, użytkownicy będą mogli poruszać się po swojej stronie i dostać się do tego samego miejsca, z wykorzystaniem zarówno okno oraz pasek nawigacji.


Dzięki!




>>> KLIKNIJ poniżej dzieki <<<
Etykiety: , , , ,

13 komentarzy:

  1. Unknown8 grudnia 2015 09:14

    Heyy dzieki :) wzielam ostatnia opcje, ale nie wiem czy mozna ten pasek skrócić? jesli tak to q ktorym miejscu skryptu

    OdpowiedzUsuń
  2. Adrian Moczyński31 lipca 2019 13:15

    Super sprawa

    OdpowiedzUsuń
  3. Tłumaczenia2 czerwca 2020 07:05

    Dzięki

    OdpowiedzUsuń
  4. Mateusz Domański10 grudnia 2020 07:29

    W sumie sam wygląd strony na pewno ma pośredni wpływ na naszego odbiorcę. Ja także jestem zdania, że właśnie to co napisano w https://push-ad.com/blog/segmentacja-klientow-kluczem-do-sukcesu-kampanii-web-push/ z pewnością bardzo fajnie komponuje się z kampaniami push. Jestem zdania, że warto z tych rozwiązań korzystać.

    OdpowiedzUsuń
  5. Mateusz Domański19 kwietnia 2021 15:48

    Jestem pod wielkim wrażeniem. Świetny artykuł.

    OdpowiedzUsuń
  6. Marek25 maja 2022 11:45

    Bardzo pomocny wpis.

    OdpowiedzUsuń
  7. Jedzenie z dostawą warszawa7 czerwca 2022 01:32

    Same ciekawe rzeczy na tym blogu

    OdpowiedzUsuń
  8. https://seolyze.pl/13 lipca 2022 10:49

    super

    OdpowiedzUsuń
  9. https://sitab.pl/27 marca 2023 06:42

    Pomysłowe skrzynki.

    OdpowiedzUsuń
  10. https://web-med.pl/5 kwietnia 2023 13:29

    Ładnie to wygląda.

    OdpowiedzUsuń
  11. Artur29 października 2023 12:34

    Świetny wpis. Pomocne informacje

    OdpowiedzUsuń
  12. Marta13 lutego 2024 05:35

    Bardzo przydatne informacje

    OdpowiedzUsuń
  13. Iza28 marca 2024 09:41

    Ten wpis to prawdziwa skarbnica wiedzy.

    OdpowiedzUsuń

Subskrybuj: Komentarze do posta (Atom)