Web Analytics Made Easy - StatCounter
FoulsCode

Εμφάνιση αναρτήσεων με ετικέτα Search Box. Εμφάνιση όλων των αναρτήσεων
Εμφάνιση αναρτήσεων με ετικέτα Search Box. Εμφάνιση όλων των αναρτήσεων

2 Νοεμβρίου 2017

Εδώ μπορείτε να αναζητήσετε πατέντες προϊόντων







Εδώ μπορείτε να αναζητήσετε πατέντες προϊόντων. Μπορείτε να χρησιμοποιήσετε και ελληνικές λέξεις, αλλά τα αποτελέσματα θα είναι στα αγγλικά (μπορείτε να κάνετε αυτόματη μετάφραση). Θα ξαφνιαστείτε με το ποια προϊόντα έχουν πατέντες και ποια δεν έχουν!
Διαβάστε Περισσότερα »

31 Οκτωβρίου 2017

Αναζητήστε mp3 στο internet



Θέλουμε να κατεβάσουμε ένα mp3, τότε πρέπει να το ψάξουμε με κάποια προγράμματα p2p ή σε torrent (όλοι δεν ξέρουν) κάποιοι θα πείτε γιατί δεν το βρίσκω στο youtube και να το κατεβάσω - μετατρέψω σε mp3, o λόγος φυσικά είναι η ποιότητα του τραγουδιού που όσο καλή και να είναι στο βίντεο θα χαθεί στην μετατροπή του σε mp3.

Η πιο εύκολη λύση είναι η αναζήτηση στο google, π.χ. αν θέλουμε να βρούμε το τραγούδι hold on των loft βάζουμε τον παρακάτω σύνδεσμο στην αναζήτηση του google και σε κάποιο από τα αποτελέσματα που θα μας βγάλει θα βρούμε το τραγούδι μας, αν είμαστε τυχεροί φυσικά.

Κώδικας:

intitle:index.of?mp3 hold on loft



ΑΝΑΛΥΤΙΚΑ


Κώδικας:

Παράθεση

intitle:index.of?mp3 ΕΔΩ ΤΟ ΤΡΑΓΟΥΔΙ ΠΟΥ ΘΕΛΟΥΜΕ




tip: αν βγάζει πολλά τραγούδια τότε περιορίστε τα αποτελέσματα βάζοντας και το συγκρότημα


καλό ψάξιμο και καλή διασκέδαση!




via: lifehack.gr
Διαβάστε Περισσότερα »

26 Ιανουαρίου 2015

Custom Search Box For BlogSpot v3




<style>
/* foulscode.blogspot.com */
    #searchbox {
    width: 280px;
    background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/s1600/search-box.png) no-repeat;
    }

    #searchbox input {
        outline: none;
    }

    input:focus::-webkit-input-placeholder {
        color: transparent;
    }

    input:focus:-moz-placeholder {
        color: transparent;
    }

    input:focus::-moz-placeholder {
        color: transparent;
    }
    #searchbox input[type="text"] {
    background: transparent;
    border: 0px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 14px;
        color: #f2f2f2 !important;
        padding: 10px 35px 10px 20px;
        width: 220px;
    }
    #searchbox input[type="text"]:focus {
    color: #fff;
    }

    #button-submit{
    background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 40px;
    height: 50px;
    }

    #button-submit:hover {
    background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png);
    }
/* foulscode.blogspot.com */
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="Enter keywords here..." />
    <input id="button-submit" type="submit" value=" "/>
    </form>

DEMO
Διαβάστε Περισσότερα »

23 Ιανουαρίου 2015

Custom Search Box For BlogSpot v2


Αντιγραφή τον παρακάτω κώδικα:


<style>
/* foulscode.blogspot.com */
#searchbox {
    background: url(http://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/s1600/searchbar.png) no-repeat;
    width: 208px;
    height: 29px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
/* foulscode.blogspot.com */
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="search..." />
    <input id="button-submit" type="submit" value="" />
</form>

DEMO
Διαβάστε Περισσότερα »

6 Ιανουαρίου 2015

Custom Search Box For BlogSpot v1


Αντιγραφή τον παρακάτω κώδικα:


 <style>
/* foulscode.blogspot.gr */
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
/* foulscode.blogspot.gr */
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="αναζήτηση" />
<input id="button-submit" type="submit" value=" "/>
</form>

DEMO
Διαβάστε Περισσότερα »

3 Ιανουαρίου 2015

Custom Search Box For BlogSpot



Γεια σας μπλόγκερ ;) Μετά από 3 συνεχόμενα βιβλία που σας έδωσα εχτές σήμερα θα σας δώσω ένα widget για την αναζήτηση στο blog σας και έρχονται και αλλα!

Αντιγραφή τον παρακάτω κώδικα:


<style>
/* foulscode.blogspot.gr */
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
/* foulscode.blogspot.gr */
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="αναζήτηση..." />
<input id="button-submit" type="submit" value="Search" />
</form>


DEMO
Διαβάστε Περισσότερα »

30 Ιουλίου 2013

Deep Web | Μηχανές Αναζήτησης για το Βαθύ Διαδίκτυο



Είχαμε μιλήσει πρόσφατα για το Βαθύ Web (Deep Web). Το κρυφό διαδίκτυο που βρίσκεται πέρα από τις γνωστές μηχανές αναζήτησης και πέρα από κάθε γνωστή ιστοσελίδα γνωρίζατε ως τώρα.
Ένα διαδίκτυο χωρίς κανένα απολύτως όριο η δομή.
Το Deep Web, είναι ένας κόσμος που πλοηγείται από περιθωριακούς αποξενωμένους μοναχικούς τύπους που ζουν στην άκρη της κοινωνίας.
Οι χρήστες του Deep Web ένας ελεεινός και ανεξέλεγκτος υπόκοσμος όπου οι καουμπόηδες της κονσόλας, όπως οι ντετέκτιβ των φιλμ noir, διασυνδέονται με κακοποιούς, απόβλητους, οραματιστές, με διαφωνούντες και απροσάρμοστους.
Το Επιφανειακό ιντερνέτ, φαίνεται σε αντίθεση ένα γαλήνιο, στείρο, χωρίς γεύση, τελείως ανώνυμο με τη δική του συναλλαγματική ισοτιμία, τελείως ανώνυμο, που υφίσταται αποκλειστικά και μόνο στον εικονικό χώρο για τελείως ανώνυμες συναλλαγές.
Ωστόσο, επειδή το θέμα είχε πολύ ενδιαφέρον, θα δώσουμε και καποιες πιο ειδικευμένες μηχανές αναζήτησης, οι οποίες δίνουν αποτελέσματα από το Deep Web.
Φυσικά σε καμία περίπτωση δεν μπορεί να πει κάποιος το πως φιλτράρονται αυτά τα αποτελέσματα, ούτε είναι και ακριβώς το ίδιο, με το να βρίσκεσαι μέσα σε αυτό.
Ωστόσο οι συγκεκριμένες μηχανές “ψαρεύουν” ένα μεγαλο δίκτυο πληροφοριών, μη προσιτό (σε μας), από τις συνήθεις μηχανές αναζήτησης.
Το πως και πως ακριβώς λειτουργουν δεν μπορώ να το αναλύσω τεχνικά, καθώς δεν εχω και τις γνώσεις, ωστόσο όλες αναφέρουν σχετικά στις σελίδες τους.
Ειδικεύονται σε συγκεκριμένα θέματα (επιστημονικά, τεχνικά, κλπ) και όπως θ’ ανακαλύψετε, ορισμένες φορές δίνουν πολύ ενδιαφέροντα αποτελέσματα.
Η σειρά τους, είναι απολύτως και τυχαία:














Διαβάστε Περισσότερα »

5 Απριλίου 2013

Πλαίσιο αναζήτησης CSS3 Σκούρο






Ένα πλαίσιο αναζήτησης που όταν κάνετε κλικ ανοίγει εμπνευσμένο από την apple.com

Απλά αντιγράψτε και επικολλήστε τον παρακάτω κώδικα στο HTML


<style type="text/css">/* foulscode.blogspot.gr */
 #search{padding:0}#search input[type="text"]{background:url(http://2.bp.blogspot.com/-Q-Ejkmx-Ki4/Teem3RZlpqI/AAAAAAAAA40/_p6u9Xpgs7c/s20/Search-icon.png) no-repeat 5px 5px #fcfcfc; border:1px solid #ddd; font:bold 12px Arial,Helvetica,Sans-serif; color:#888; width:210px; 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; -webkit-transition:all .7s ease 0s; -moz-transition:all .7s ease 0s; -o-transition:all .7s ease 0s; transition:all .7s ease 0s}#search input[type="text"]:focus{ width:300px}/* foulscode.blogspot.gr */
</style><center><form method="get" action="/search" id="search"><input name="q" type="text" size="50" placeholder="Αναζήτηση..." /></form></center>


Αλλάζοντας τα width:210px;  width:300px  προσαρμόζεται όπως το θέλετε!

Αφήστε τα σχόλιά σας εδώ κάτω αν έχετε κάτι να ρωτήσετε!


Διαβάστε Περισσότερα »

2 Μαρτίου 2013

Add Fresh and Beautiful Search Boxes to Blogger / Blogspot




Εδώ έχουμε μερικά πλαίσια αναζήτησης για μπλόγκερ.

Διαλέξτε αυτό που σας ταιριάζει.




<style type="text/css">
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.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="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>





<style type="text/css">
#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-bk2Si48eZSo/TeixHMdeiII/AAAAAAAAA6A/eQEEa1tyZkI/way2blogging_searchbox2.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="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>








<style type="text/css">
#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_searchbox3.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="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>





<style type="text/css">
#w2b-searchbox{background:url(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;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=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>






<style type="text/css">
#w2b-searchbox{background:url(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;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=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>







<style type="text/css">
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_searchbox6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;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=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>


Αποθήκευση και αυτό ήταν.


Διαβάστε Περισσότερα »

12 Φεβρουαρίου 2013

Πώς να φαίνονται μόνο οι τίτλοι στην αναζήτηση, στις ετικέτες και στο αρχείο


Για να το δούμε και αυτό.

Βρείτε πρώτα το <b:include data='post' name='post'/> και αντικαταστήστε με το παρακάτω.


<!--ARCHIVE-TITLES-STARTS--><b:if cond='data:blog.homepageUrl !=data:blog.url'><b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'><li></li><data:post.title/></a><br/><br/><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if><!--ARCHIVE-TITLES-STOPS-->


Αποθήκευση και είστε έτοιμη.
Διαβάστε Περισσότερα »

9 Φεβρουαρίου 2013

Πλαίσια αναζήτησης





Μετάβαση στο blogger
Πλοηγηθείτε στην Διάταξη> Προσθήκη Gadget> Html / Javascript
Επικολλήστε τον κώδικα


Style 1 


<style type="text/css">.form-wrapper {width: 270px;padding: 8px;margin: 10px auto;overflow: hidden;border-width: 1px;border-style: solid;border-color: #dedede #bababa #aaa #bababa;-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;background-color: #f6f6f6;background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);background-image: linear-gradient(top, #f6f6f6, #eae8e8);}.form-wrapper #search {width: 180px;height: 20px;padding: 10px 5px;float: left;font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';border: 1px solid #ccc;-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}.form-wrapper #search:focus {outline: 0;border-color: #aaa;-moz-box-shadow: 0 1px 1px #bbb inset;-webkit-box-shadow: 0 1px 1px #bbb inset;box-shadow: 0 1px 1px #bbb inset;}.form-wrapper #search::-webkit-input-placeholder {color: #999;font-weight: normal;}.form-wrapper #search:-moz-placeholder {color: #999;font-weight: normal;}.form-wrapper #search:-ms-input-placeholder {color: #999;font-weight: normal;}.thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.form-wrapper #submit {float: right;border: 1px solid #00748f;height: 42px;width: 70px;padding: 0;cursor: pointer;font: bold 15px Arial, Helvetica;color: #fafafa;text-transform: uppercase;background-color: #0483a0;background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);background-image: -o-linear-gradient(top, #31b2c3, #0483a0);background-image: linear-gradient(top, #31b2c3, #0483a0);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;}.form-wrapper #submit:hover,.form-wrapper #submit:focus {background-color: #31b2c3;background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);background-image: -o-linear-gradient(top, #0483a0, #31b2c3);background-image: linear-gradient(top, #0483a0, #31b2c3);}.form-wrapper #submit:active {outline: 0;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;}.form-wrapper #submit::-moz-focus-inner {border: 0;}</style><form class="form-wrapper" action="/search" method="get">    <input id="search" name="q" type="text" placeholder="Type here" />    <input id="submit" type="submit" value="Search" /></form>


Style 2 



<style type="text/css">
#searchbox
   {
    background: #eaf8fc;
    background-image: -moz-linear-gradient(#fff, #d4e8ec);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
 
    -moz-border-radius: 35px;
    border-radius: 35px;
 
    border-width: 1px;
    border-style: solid;
    border-color: #c4d9df #a4c3ca #83afb7;        
    width: 270px;
    height: 35px;
    padding: 10px;
 
    overflow: hidden;
   }
     
        #search, #submit
        {
            float: left;
        }
     
        #search
        {
            padding: 5px 9px;
            height: 23px;
            width: 180px;
            border: 1px solid #a4c3ca;
            font: normal 13px 'trebuchet MS', arial, helvetica;
            background: #f1f1f1;
         
            -moz-border-radius: 50px 3px 3px 50px;
             border-radius: 50px 3px 3px 50px;
             -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
             -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);        

        }

  /* ----------------------- */

  #submit
  {
            background: #6cbb6b;
            background-image: -moz-linear-gradient(#95d788, #6cbb6b);
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
         
            -moz-border-radius: 3px 50px 50px 3px;
            border-radius: 3px 50px 50px 3px;
         
            border-width: 1px;
            border-style: solid;
            border-color: #7eba7c #578e57 #447d43;
         
             -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
             -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
             box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;  
   height: 35px;
   margin: 0 0 0 10px;
   padding: 0;
   width: 60px;
   cursor: pointer;
   font: bold 14px Arial, Helvetica;
   color: #23441e;

   text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  }

  #submit:hover
  {
            background: #95d788;
            background-image: -moz-linear-gradient(#6cbb6b, #95d788);
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
  }
  #submit:active
  {
            background: #95d788;
   outline: none;
       
             -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  }
  #submit::-moz-focus-inner
  {
    border: none;
  }

  /* ----------------------- */
     
        #search::-webkit-input-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }
     
        #search:-moz-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }
     
        #search.placeholder {
           color: #9c9c9c !important;
           font-style: italic;
        }
     
        #search:focus
        {
            border-color: #8badb4;
            background: #fff;
            outline: none;
        }
</style>
<form id="searchbox" action="/search" method="get">
    <input id="search" name="q" type="text" placeholder="Type here" />
    <input id="submit" type="submit" value="Search" />
</form> 
DEMO

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



ΠΗΓΗ


Διαβάστε Περισσότερα »

21 Ιανουαρίου 2013

Πλαίσιο αναζήτησης CSS3


Ένα πλαίσιο αναζήτησης που όταν κάνετε κλικ ανοίγει εμπνευσμένο από την apple.com

Απλά αντιγράψτε και επικολλήστε τον παρακάτω κώδικα στο HTML



<style type="text/css">
#search{}#search input[type="text"]{background:url(http://2.bp.blogspot.com/-Q-Ejkmx-Ki4/Teem3RZlpqI/AAAAAAAAA40/_p6u9Xpgs7c/s20/Search-icon.png) no-repeat 5px 5px #444; border:0 none; font:bold 12px Arial,Helvetica,Sans-serif; color:#d7d7d7; width:150px; padding:6px 15px 6px 35px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; text-shadow:0 2px 2px rgba(0,0,0,0.3); -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset; box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset; -webkit-transition:all 0.7s ease 0s; -moz-transition:all 0.7s ease 0s; -o-transition:all 0.7s ease 0s; transition:all 0.7s ease 0s}#search input[type="text"]:focus{ background:#fcfcfc; color:#6a6f75; width:200px; -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(0,0,0,0.9) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(0,0,0,0.9) inset; box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(0,0,0,0.9) inset; text-shadow:0 2px 3px rgba(0,0,0,0.1)}
</style>
<center><form method="get" action="/search" id="search">
<input name="q" type="text" size="50" placeholder="Search Here..." />
</form></center>

Αλλάζοντας τα width:150px  width:200px  προσαρμόζεται όπως το θέλετε!

Αφήστε τα σχόλιά σας εδώ κάτω.
Διαβάστε Περισσότερα »

15 Ιανουαρίου 2013

Φόρμα αναζήτησης που αναβοσβήνει στην αναμονή.

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


<style>
.webdesigntuts-workshop {
 text-align: center;
        padding-top:35px;
}
.webdesigntuts-workshop:before,
.webdesigntuts-workshop:after {
 content: '';
 display: block;
 height: 1px;
 left: 50%;
 margin: 0 0 0 0px;

 width: 765px;
}
.webdesigntuts-workshop:before {
 background: #444;
 background: -webkit-linear-gradient(left, #151515, #444, #151515);
 background: -moz-linear-gradient(left, #151515, #444, #151515);
 background: -o-linear-gradient(left, #151515, #444, #151515);
 background: -ms-linear-gradient(left, #151515, #444, #151515);
 background: linear-gradient(left, #151515, #444, #151515);
 top: 192px;
}




.webdesigntuts-workshop form {
 background: #111;
 background: -webkit-linear-gradient(#1b1b1b, #111);
 background: -moz-linear-gradient(#1b1b1b, #111);
 background: -o-linear-gradient(#1b1b1b, #111);
 background: -ms-linear-gradient(#1b1b1b, #111);
 background: linear-gradient(#1b1b1b, #111);
 border: 1px solid #000;
 border-radius: 5px;
 box-shadow: inset 0 0 0 1px #272727;
 display: inline-block;
 font-size: 0px;
        margin: -43px auto 0;
        padding: 20px;
 position: relative;
 z-index: 1;
}

.webdesigntuts-workshop input {
 background: #222;
 background: -webkit-linear-gradient(#333, #222);
 background: -moz-linear-gradient(#333, #222);
 background: -o-linear-gradient(#333, #222);
 background: -ms-linear-gradient(#333, #222);
 background: linear-gradient(#333, #222);
 border: 1px solid #444;
 border-radius: 5px 0 0 5px;
 box-shadow: 0 2px 0 #000;
 color: #888;
 display: block;
 float: left;
 font-family: 'Cabin', helvetica, arial, sans-serif;
 font-size: 13px;
 font-weight: 400;
 height: 40px;
 margin: 0;
 padding: 0 10px;
 text-shadow: 0 -1px 0 #000;
 width: 200px;
}

.ie .webdesigntuts-workshop input {
 line-height: 40px;
}

.webdesigntuts-workshop input::-webkit-input-placeholder {
   color: #888;
}

.webdesigntuts-workshop input:-moz-placeholder {
   color: #888;
}

.webdesigntuts-workshop input:focus {
 -webkit-animation: glow 800ms ease-out infinite alternate;
 -moz-animation: glow 800ms ease-out infinite alternate;
 -o-animation: glow 800ms ease-out infinite alternate;
 -ms-animation: glow 800ms ease-out infinite alternate;
 animation: glow 800ms ease-out infinite alternate;
 background: #222922;
 background: -webkit-linear-gradient(#333933, #222922);
 background: -moz-linear-gradient(#333933, #222922);
 background: -o-linear-gradient(#333933, #222922);
 background: -ms-linear-gradient(#333933, #222922);
 background: linear-gradient(#333933, #222922);
 border-color: #393;
 box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
 color: #efe;
 outline: none;
}

.webdesigntuts-workshop input:focus::-webkit-input-placeholder {
 color: #efe;
}

.webdesigntuts-workshop input:focus:-moz-placeholder {
 color: #efe;
}

.webdesigntuts-workshop button {
 background: #222;
 background: -webkit-linear-gradient(#333, #222);
 background: -moz-linear-gradient(#333, #222);
 background: -o-linear-gradient(#333, #222);
 background: -ms-linear-gradient(#333, #222);
 background: linear-gradient(#333, #222);
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 -o-box-sizing: content-box;
 -ms-box-sizing: content-box;
 box-sizing: content-box;
 border: 1px solid #444;
 border-left-color: #000;
 border-radius: 0 5px 5px 0;
 box-shadow: 0 2px 0 #000;
 color: #fff;
 display: block;
 float: left;
 font-family: 'Cabin', helvetica, arial, sans-serif;
 font-size: 13px;
 font-weight: 400;
 height: 40px;
 line-height: 40px;
 margin: 0;
 padding: 0;
 position: relative;
 text-shadow: 0 -1px 0 #000;
 width: 80px;
}

.webdesigntuts-workshop button:hover,
.webdesigntuts-workshop button:focus {
 background: #292929;
 background: -webkit-linear-gradient(#393939, #292929);
 background: -moz-linear-gradient(#393939, #292929);
 background: -o-linear-gradient(#393939, #292929);
 background: -ms-linear-gradient(#393939, #292929);
 background: linear-gradient(#393939, #292929);
 color: #5f5;
 outline: none;
}

.webdesigntuts-workshop button:active {
 background: #292929;
 background: -webkit-linear-gradient(#393939, #292929);
 background: -moz-linear-gradient(#393939, #292929);
 background: -o-linear-gradient(#393939, #292929);
 background: -ms-linear-gradient(#393939, #292929);
 background: linear-gradient(#393939, #292929);
 box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
 top: 1px;
}

@-webkit-keyframes glow {
    0% {
  border-color: #393;
  box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }
    100% {
  border-color: #6f6;
  box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-moz-keyframes glow {
    0% {
  border-color: #393;
  box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }
    100% {
  border-color: #6f6;
  box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-o-keyframes glow {
    0% {
  border-color: #393;
  box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }
    100% {
  border-color: #6f6;
  box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-ms-keyframes glow {
    0% {
  border-color: #393;
  box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }
    100% {
  border-color: #6f6;
  box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@keyframes glow {
    0% {
  border-color: #393;
  box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }
    100% {
  border-color: #6f6;
  box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}


</style>

<section class="webdesigntuts-workshop">
 <form action='/search' id='searchform' method='get'>
<input id='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='Αναζήτηση...'/>
  <button>Search</button>
 </form>  
</section>


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




Διαβάστε Περισσότερα »

11 Ιανουαρίου 2013

jQuery Plugins Που Θα Σας Βοηθήσουν Να Προσαρμόσετε Το Search Box




Το πλαίσιο αναζήτησης είναι ένα σημαντικό στοιχείο του χώρου και για ορισμένες ιστοσελίδες, είναι το πιο χρησιμοποιημένο.
Συχνά παραβλέπεται ακόμα κι αν αυτό είναι πραγματικά χρήσιμο για τον επισκέπτη. Όταν δεν το παραμελούμε μπορούμε να το προσαρμόσουμε στις ανάγκες του χώρου με οπτικά στοιχεία και πολύ καλή κωδικοποίηση.
Μπορεί να είναι απλό μόνο προσαρμογές στο σχεδιασμό, αλλά με τη βοήθεια  jQuery plugins μπορεί να γίνει αρκετά πιο περίπλοκο και να προσφέρει πολλές επιπλέον λειτουργίες που κάνει την αναζήτηση ευκολότερη. Η Παράδοση αυτού που ψάχνει ο επισκέπτη σας, είναι πολύ σημαντικό και θα πρέπει να κάνετε αυτή τη λειτουργία ευκολότερη για αυτούς.
Παρακάτω θα δούμε μερικά από τα καλύτερα jQuery Plugins για search box που θα μας βοηθήσουν να το προσαρμόσουμε βάση των αναγκών μας.

Ajax AutoComplete for jQuery

Ajax AutoComplete for jQuery
Το Ajax Autocomplete για jQuery σας επιτρέπει να δημιουργήσετε εύκολα autocomplete / autosuggest κουτιά για τα πεδία εισαγωγής κειμένου. Χτισμένο με έμφαση στην απόδοση – τα αποτελέσματα για κάθε ερώτημα είναι cached και τραβιούνται από την τοπική μνήμη για το ίδιο repeating query. Εάν δεν υπάρχουν αποτελέσματα για το συγκεκριμένο ερώτημα,  η αποστολή αιτημάτων στο διακομιστή για άλλα ερωτήματα με την ίδια ρίζα, σταματάει.

Ένα fancy Apple.com-style search suggestion

A fancy Apple.com-style search jQuery plugin

Search Box με Filter και μεγάλο Drop Down Menu

Search Box with Filter and Large Drop Down Menu
Θα σας δείξει κάποια στοιχεία UI: ένα πλαίσιο αναζήτησης με φίλτρο και ένα μεγάλο drop down μενού. Θα χρησιμοποιήσουμε jQuery στα δύο στοιχεία για το αποτέλεσμα. Θα χρησιμοποιήσουμε επίσης την αφθονία των CSS3 ιδιοτήτων για να δημιουργήσουμε λεπτομέρειες.

Ajax-Driven JavaScript ComboBox with Autocomplete

Ajax-Driven JavaScript ComboBox with Autocomplete Plugin
Το dhtmlxCombo είναι ένα cross-browser JavaScript combobox με autocomplete χαρακτηριστικά. Επεκτείνει τις βασικές λειτουργίες select box και παρέχει τη δυνατότητα να εμφανίζει τις προτάσεις, ενώ ένας χρήστης πληκτρολογεί στο πεδίο κειμένου.

AutoSuggest: An AJAX auto-complete text field

AutoSuggest: An AJAX auto-complete text field
Η AutoSuggest class προσθέτει ένα popdown μενού προτεινόμενων τιμών σε ένα πεδίο κειμένου. Ο χρήστης μπορεί είτε να κάνετε κλικ απευθείας σε μια πρόταση για να εισέλθει στο χώρο, ή να πλοηγηθεί στην λίστα χρησιμοποιώντας το πάνω και κάτω βέλος, επιλέγοντας μια τιμή χρησιμοποιώντας το πλήκτρο tab. Οι τιμές για το  suggestion list παρέχονται ως XML (από ένα PHP script, ή κάτι παρόμοιο).

Creating Next Level Search Form Using jQuery & CSS3

Creating Next Level Search Form Using jQuery & CSS3
Σε αυτό το tutorial θα δούμε πως να δημιουργήσουμε φόρμες αναζήτησης, χρησιμοποιώντας jQuery και CSS3.

jQuery Plugin for On-demand Search Box: SearchMeme

jQuery Plugin for On-demand Search Box: SearchMeme
SearchMeme – η ιδέα είναι να παρέχει ένα μικρό κουμπί αναζήτησης που μπορεί να τοποθετηθεί οπουδήποτε στην ιστοσελίδα (μπορεί να θέλετε να το βάλετε στο header σας). Κάνοντας κλικ στο κουμπί αναζήτησης επεκτείνεται για να δείξει ένα πλαίσιο κειμένου όπου μπορείτε να πληκτρολογήσετε τους όρους αναζήτησης.

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

jQuery Autocomplete

jQuery Autocomplete

jQuery Smooth Animated Search Field Freebie

jQuery Smooth Animated Search Field Freebie

jQuery Autocomplete Mod

jQuery Autocomplete Mod

Tipue Search, a jQuery site search engine

Tipue Search, a jQuery site search engine

AutoCompleter

AutoCompleter jQuery search plugin
Αυτό το  AutoCompleter script για MooTools παρέχει χαρακτηριστικά για text suggestion και completion. Διαθέτει διάφορες πηγές δεδομένων (τοπική, JSON ή XML), μια ποικιλία αλληλεπιδράσεων χρηστών, προσαρμοσμένη μορφοποίηση, πολλαπλή επιλογή, κινούμενα σχέδια και πολλά ακόμα.

FCBKcomplete

FCBKcomplete jQuery search plugin

jQuery JSON Suggest/Search Box: JSON powered auto suggest box implemented as a jQuery plugin

jQuery JSON Suggest/Search Box: A JSON powered auto suggest box implemented as a jQuery plugin

Smart Suggest — Advanced Auto-Complete

Smart Suggest — Advanced Auto-Complete jQuery Search Plugin
Το Smart Suggest είναι ένα εντυπωσιακό search suggestion plugin για jQuery (μοιάζει στο site search της Apple). Το Smart Suggest πηγαίνει το auto-complete ένα βήμα πιο πέρα.

SearchBox

Search Box jQuery plugin
Το SearchBox είναι ένα jQuery plugin που σας επιτρέπει να έχετε πλούσια αποτελέσματα αναζήτησης με filters στην σελίδα σας (παρόμοια με το GMail και το Google Docs).

Simple Content Search

Simple Content Search
Αυτό το plugin δημιουργεί ένα απλό ταξινομητή περιεχομένου. Το Simple Content Sorting παρέχει ένα καθαρό και εύκολο τρόπο για να ομορφύνει το περιβάλλον σας, παρέχοντας ένα μηχανισμό διαλογής. Δεν γίνεται φόρτωση της σελίδας, όταν γίνετε η διαλογή μιας και όλα γίνονται με javascript.

Διαβάστε Περισσότερα »
Related Posts Plugin for WordPress, Blogger...