Elegant Search Box For Blogger - Κομψό πλαίσιο αναζήτησης Για Blogger

   Πριν από λίγες ημέρες άλλαξα τεμπλέιτ και το καινούργιο που έβαλα δεν είχε πλαίσιο αναζήτησης (Search Box). Το να υπάρχει ένα πλαίσιο αναζήτησης στο blog σας είναι κάτι που πάντα συνιστάται. Έψαξα και βρήκα ένα πολύ όμορφο και μικρό εικονίδιο αναζήτησης και τη στιγμή που κάποιος κάνει κλικ σε αυτό, woooh! Ένα κουτί αναζήτησης θα ανοίξει και ο επισκέπτης σας θα αρχίσει να πληκτρολογεί αμέσως!

Ζωντανό Δοκιμαστικό:

Πάμε να δούμε τον τον κωδικό!:

<style>
.search-field {
background-color: transparent;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTNck661OCUaPUsxMcWtma9OZvlj93zzeKHSupAH6OBNMcsFc_9KCoi_iTFAmdVSngv8HSY1b7dljan3pIFEJeank2-LVg7WVNjIeNhZzmP5wvoXQ6FdAhq13-laXhZZ_OFy9Lh1K8aKg/s1600/search-button.gif);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: 2px solid transparent;
cursor: pointer;
height: 37px;margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
color: #222;
font-family: Arial;
font-weight: bold;
}
.search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
</style>
<form action='/search' id='search' method='get'>
<input class='search-field' name='q' placeholder='Αναζήτηση...' title='Κάντε κλικ για αναζήτηση και πατήστε Enter!' type='text'/>
</form>

   Επικολλήστε τον παραπάνω κώδικα όπου θέλετε να εμφανιστεί αυτό το απλό, αλλά σέξι πλαίσιο αναζήτησης! Μπορείτε πάντα να προσθέσετε το πλαίσιο αναζήτησης σαν το gadget HTML / JavaScript.
   Αυτό που μου αρέσει σχετικά με αυτό το πλαίσιο αναζήτησης είναι ότι δεν καταλαμβάνει πολύ χώρο! Γιατί να ενοχλώ τους επισκέπτες μου με τεράστια και φανταχτερά κουτιά αναζήτησης, ακόμη και αν δεν το θέλουν κάνουν αναζήτηση;
   Μετά την εφαρμογή του παραπάνω δεδομένου πλαίσιο αναζήτησης, μόνο ένα μικρό εικονίδιο της αναζήτησης θα εμφανίζεται έτσι ώστε δεν θα αποσπά την προσοχή από τους επισκέπτες σας. Για τους επισκέπτες που πραγματικά θέλουν να αναζητήσουν, μπορούν να κάνουν κλικ σε αυτό το χαριτωμένο μικρό εικονίδιο αναζήτησης και το πλαίσιο αναζήτησης θα πεταχτεί έξω για αυτούς!
   Μερικές συμβουλές
   • Ας πούμε ότι δεν σας αρέσει το εικονίδιο αναζήτησης [που χρησιμοποίησα] και θέλετε να το αντικαταστήσετε με κάποια άλλη εικόνα, μπορείτε απλά να αλλάξετε τον σύνδεσμο με κόκκινο χρώμα με τον σύνδεσμο της εικόνας σας!
   • Αντικαταστήστε τον κωδικό που επισημαίνονται με μπλε χρώμα για να αλλάξετε το ύψος του πλαισίου αναζήτησης!
   • Πρέπει να έχετε παρατηρήσει ότι όταν κάνετε κλικ στο εικονίδιο αναζήτησης μια πλαίσιο κειμένου με το περίγραμμα εμφανίζεται. Αν θέλετε να αλλάξετε το χρώμα του σύνορα, αντικαταστήστε τον κώδικα επισημαίνεται σε ροζ χρώμα.
   • Αν θέλετε να ελέγχετε το πλάτος του κουτιού μετά κάνετε κλικ, αντικαταστήστε το κωδικό με το πράσινο και να πειραματιστούν με διάφορες τιμές, μέχρι να πάρετε αυτό που θέλετε!
   Καλή Αναζήτηση!

Raj Mehta
Techsperia Blog