sobota, 10 listopada 2012

Jak dodać wyszukiwarkę do bloga?

Kolejne MUST HAVE naszego bloga to wyszukiwarka. Często czytelnik potrzebuje znaleźć konkretne informacje, wie że są na naszym blogu - jednak tym trudniej mu się odnaleźć im więcej mamy postów. Dobrym rozwiązaniem tego problemu jesz wstawienie wyszukiwarki na blogu - tym bardziej że to naprawdę łatwe.



Standardowa wyszukiwarka bloggera:
1. Dodajemy ją poprzez gadżet "Pole wyszukiwania"
Wchodzimy w "Układ" bloga i klikamy "Dodaj gadżet" Znajdujemy "Pole wyszukiwania"
 Ustaw opcje:
 Przykład z mojego bloga:


Niestandardowe pola wyszukiwania:
Wystarczy dodać do naszego bloga gadżet HTML/Java Script - jak to zrobić - kliknij TUTAJ. I dodać jeden z poniższych kodów.

Do wyboru mamy kilka ciekawych opcji:

1. Widget standard, bez koloru

Kod powyższego widgetu:
<div class="searchform">
<form action="/search" id="searchform" method="get">
<table style="width: 100%px;"><tbody>
<tr> <td style="text-align: center;"><input class="sbox" id="sbox" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Szukaj w tym blogu...&quot;;}" onfocus="if (this.value == &quot;Szukaj w tym blogu...&quot;) {this.value = &quot;&quot;}" style="padding: 2px; width: 98%;" type="text" value="Szukaj w tym blogu..." /></td> <td style="text-align: center;" width="75px"><input alt="" class="sbutton" id="sbutton" type="button" value="Szukaj" /></td> </tr>
</tbody></table>
</form>
</div>
Wyszukiwarki kolorowe:
 2. Czarny widget





<style type="text/css">
#w2b-searchbox{background:url(http://dl.dropbox.com/u/106645823/szukaj/czarny.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Szukaj..." onfocus='if (this.value == "Szukaj...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Szukaj...";}'/>
<input type="image" src="http://dl.dropbox.com/u/106645823/szukaj/piksel.gif" id="sbutton" />
</form>
</div>
 3. Czerwony widget


<style type="text/css">#w2b-searchbox{background:url(http://dl.dropbox.com/u/106645823/szukaj/czerwony.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style><div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value="Szukaj..." onfocus='if (this.value == "Szukaj...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Szukaj...";}'/><input type="image" src="http://dl.dropbox.com/u/106645823/szukaj/piksel.gif" id="sbutton" /></form></div>
4. Złoty widget

<style type="text/css">#w2b-searchbox{background:url(http://dl.dropbox.com/u/106645823/szukaj/zolty.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style><div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value="Szukaj..." onfocus='if (this.value == "Szukaj...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Szukaj...";}'/><input type="image" src="http://dl.dropbox.com/u/106645823/szukaj/piksel.gif" id="sbutton" /></form></div>


 5. Niebieski widget



<style type="text/css">#w2b-searchbox{background:url(http://dl.dropbox.com/u/106645823/szukaj/niebieski.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style><div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value="Szukaj..." onfocus='if (this.value == "Szukaj...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Szukaj...";}'/><input type="image" src="http://dl.dropbox.com/u/106645823/szukaj/piksel.gif" id="sbutton" /></form></div>

6. Szaro-czerwony widget

<style type="text/css">#w2b-searchbox{background:url(http://dl.dropbox.com/u/106645823/szukaj/srebrny.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style><div id="w2b-searchbox"><form id="w2b-searchform" action="/search" method="get"><input type="text" id="s" name="q" value="Szukaj..." onfocus='if (this.value == "Szukaj...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Szukaj...";}'/><input type="image" src="http://dl.dropbox.com/u/106645823/szukaj/piksel.gif" id="sbutton" /></form></div>
Zapisujemy rozmieszczenie układu bloga i gotowe.

Zarabiaj na sprzedaży książek!