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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmY-4n-5wZc3HYbwZypRJ8VY_0zg20mDV53jspL8y4ck2HsAhRhL4zjSuOGZ26D77jWS7bXihp_uAaHVkAEMLD4eOAshx9-5Ck4wMKB7MO37NTTSOT5sZRKg9R5WAd2UosPWNK57DiJ6P/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
Κατηγορίες:
Σχόλια