Όμορφη CSS φόρμα αναζήτησης gadget για το blog σας

Πολλές φορές σας έχουμε παρουσιάσει διάφορες μορφές φόρμας αναζήτησης πολύ απλές στην εγκατάσταση, αλλά στην ουσία ήταν μια απλή φόρμα χωρίς κανένα άλλο συνδυασμό. Σήμερα θα δούμε την παρακάτω μορφή φόρμας αναζήτησης
Ακολουθήστε τα παρακάτω βήματα για να την εγκαταστήσετε στη Σελίδα σας:
  • Σύνδεση στον Blogger
  • Διάταξη / Προσθήκη gadgdet
  • Επιλέξτε HTML/JavaScript
  • Επικολλήστε τον παρακάτω κώδικα:



<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDnWWOw0YCyS-qYSYzwCkXW0WqMl38_HxkiW34R0JSd6Lqjks0McobsNQQyMrAoColaap3_hOltELSc_ZfranV1PHA9TyAMYNwrsjjAJ63lFrvLzi5GUXdeuX8mrF53XQ6atITBBP36odW/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>

Αποθήκευση και είστε έτοιμοι.

ΠΗΓΗ


Κατηγορίες:
Σχόλια