Επεξεργασία της Αναζήτησης. ~ BlogyTricks

Καλημέρα, σήμερα θα σας δείξω πως να δημιουργήσετε και να επεξεργαστείτε την αναζήτηση του ιστολόγου σας. Το παρακάτω Widget/Gadget που θα σας δείξω είναι πολλή εύκολο στην χρήση και χάρις της μικρής βοήθειας μου δεν θα σας πάρει καθόλου χρόνο για να το επεξεργαστείτε. Πάμε λοιπόν χωρίς πολλά-πολλά να δείτε περί τίνος πρόκειται. (Το Video Tutorial βρίσκεται πάντα στο τέλος της ανάρτησης).

1) Πρώτα, συνδεθείτε στο λογαριασμό σας Blogger.

2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Διάταξη (στα αριστερά της οθόνης σας).

3) Πατήστε Προσθηκη Gadget και έπειτα HTML/JavaScript Προσθήκη

.

4) Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα μέσα στο πλαίσιο HTML/JavaScript.

<style type="text/css">

#search input[type="text"] {
    background: url(http://img837.imageshack.us/img837/5967/findp.png) no-repeat 10px 6px #d1d1d1;
    border: 2px solid #cccccc;
    font-family: 'Ropa Sans', sans-serif;
    font-size: 14px;
    color: #000000;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    outline: none;
    }
</style>

<form method="get" action='/search' id='search'>
        <input name='q' onblur='if (this.value == "") {this.value = "Αναζήτηση...";}' onfocus='if (this.value == "Αναζήτηση...") {this.value = "";}' type='text' class="search1" value='Αναζήτηση...'/>
    </form>

-Πατήστε αποθήκευση.

Σημιώσεις:

Μπορείτε να αλλάξετε τα κόκκινα γράμματα, τα μπλε γράμματα και τα πράσινα γράμματα.

Τα κόκκινα γράμματα είναι οι κώδικες για τα χρώματα του πλαισίου και των γραμμάτων, οπού υπάρχουν στο Gadget.
Πιο συγκεκριμένα το #d1d1d1 είναι το χρώμα του φόντου του, το #cccccc είναι το περίγραμμα του και το #000000 είναι το χρώμα των γραμμάτων του.
(Κώδικες για τα χρώματα θα βρείτε εδώ: www.color-hex.com )
Τα μπλε γράμματα είναι το Link της εικόνας του μικρού φακού, οπού βλέπετε στα αριστερά του Widget.

Τα πράσινα γράμματα είναι το μήκος τους Gadget, οπού μπορείτε να το αλλάξετε ανάλογα με το πόσο μεγάλο ή μικρό θέλετε να είναι.

- Για το Demo είναι το παρακάτω βίντεο:

- Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του
κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.

-Άμα σας αρέσουν οι αναρτήσεις μας παρακαλώ προωθήστε την ιστοσελίδα μας ή πατήστε το κουμπί παρακολούθηση στα δεξιά.
Ευχαριστούμε.