Ξεχωριστο κουτακι αναζητησης στο blog

Φορμα αναζητησης css 


Αυτον τον κωδικο τον ζητησε καποιος επισκεπτης και το ειδα μετα απο λιγες μερες ζητω συγνωμη αν και αργα. Γενικα η φορμα αναζητησης ειναι πολυ χρησιμη για ενα σαιτ γιατι μπορει ο επισκεπτης να ψαξει μια αναρτηση την οποια ειχε δει και θελει να την διαβασει.
φορμα αναζητησης

Μπαινει σα gadget οποτε παμε
πινακα ελεγχου
διαταξη
προσθηκη gadget
html/javascript
και κανουμε επικολληση τον κωδικο

<div id='search-form-feed'>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;To search type and hit enter...&quot;;}' onfocus='if (this.value == &quot;To search type and hit enter...&quot;) {this.value = &quot;&quot;;}' onkeyup='resetField();' type='text' value='Ψαξτε κατι...'/>
</form>
</div>


και ενα δευτερο στυλ πιο εξελιγμενο και ομορφο. Μπαινει και αυτο σαν gadget και το μετακινουμε οπου θελουμε.

κουτακι αναζητησης


<style>
/* Search form widget. */
.widget .search-form {
 overflow: hidden;
 margin: 0 0 25px 0;
 }
  
.widget .search-form input[type="text"] {
 width: 190px;
 height: 16px;
 padding: 7px 0 6px 5px;
 text-indent: 10px;
 font-style: italic;
 font-size: 13px;
 color: #999;
 float: left;
 background: #1a1a1a;
 border: 1px solid #373737;
 }
.widget .search-form input[type="submit"] {
 background: #ff0000 url(http://2.bp.blogspot.com/-ItdsQMKz0fI/UGtEGjfC_oI/AAAAAAAADi0/1QZMtVP21Xo/s1600/search-bg.png);
 border: 0;
 margin: 0;
 height: 31px;
 padding: 5px 15px 5px;
 color: #fff;
 font-family: 'Oleo Script', cursive;
 font-size: 16px;
 }
.widget .textwidget {
        margin-bottom: 30px;
}
#sidebar-primary table, #sidebar-subsidiary table  {
 background: #000;
}
</style>
<div class="search">
<form action="/search" class="search-form" method="get">
<div>
<input class="s" name="q" onblur="if(this.value == &quot;&quot;){this.value = &quot;Αναζήτηση...&quot;}" onfocus="if(this.value == &quot;Αναζήτηση...&quot;){this.value = &quot;&quot;}" type="text" value="Αναζήτηση..." />
<input class="search-submit button" name="submit" type="submit" value="Search" />
    </div>
</form>
</div>

κανουμε αποθηκευση και τελος