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:
<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>
<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>
<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>
<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 "
Krok 2 . Wybierz HTML / JavaScript w oknie pop-up > wklej kod wewnątrz pustego pola.
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 <<<
